html - CSS 按钮错误?

标签 html css

我的 css 按钮不起作用,它只作为一个简单的超链接出现.. 我已经使用 css 引用和所有内容进行了所有设置。下面是我的代码:

.B1 {
	background-color:#44c767;
	-moz-border-radius:16px;
	-webkit-border-radius:16px;
	border-radius:16px;
	border:4px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:17px;
	padding:18px 63px;
	text-decoration:none;
	text-shadow:1px 0px 8px #2f6627;
}
.B1:hover {
	background-color:#5cbf2a;
}
.B1:active {
	position:relative;
	top:1px;
}
<!DOCTYPE html>
<html>
<title>Tutorial</title>
<head>
<link rel="stylesheet" type="text/css" href="file:///Users/lucasaltmann/Desktop/styles2.css">
</head>
<body bgcolor="Green">
<center>
<h1 style="color:orange">Welcome to CocoaCraft!</h1>
<a class="B1" href="http://cocoacraftnetwork.buycraft.net">Donate</a>
</center>
</body>
</html>

CSS 在上,HTML 在下。当我在这里运行它时它运行良好但它对我不起作用..

PS:我正在运行 mac snow leopard 和 firefox(Chrome 也不能用)

最佳答案

它在这里可以工作,但不能在您的计算机上工作——CSS 可能没有正确加载。你有 CSS 文件的绝对路径,所以试试这个 instad:

<!DOCTYPE html>
<html>
<title>Tutorial</title>
<head>
<link rel="stylesheet" type="text/css" href="styles2.css">
</head>
<body bgcolor="Green">
<center>
<h1 style="color:orange">Welcome to CocoaCraft!</h1>
<a class="B1" href="http://cocoacraftnetwork.buycraft.net">Donate</a>
</center>
</body>
</html>

将 .html 和 style2.css 放在同一个文件夹中,它应该可以工作。

另一种解决方案:

将您的 html 替换为:

<!DOCTYPE html>
<html>
<title>Tutorial</title>
<head>
<style>
.B1 {
    background-color:#44c767;
    -moz-border-radius:16px;
    -webkit-border-radius:16px;
    border-radius:16px;
    border:4px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:arial;
    font-size:17px;
    padding:18px 63px;
    text-decoration:none;
    text-shadow:1px 0px 8px #2f6627;
}
.B1:hover {
    background-color:#5cbf2a;
}
.B1:active {
    position:relative;
    top:1px;
}
</style>
</head>
<body bgcolor="Green">
<center>
<h1 style="color:orange">Welcome to CocoaCraft!</h1>
<a class="B1" href="http://cocoacraftnetwork.buycraft.net">Donate</a>
</center>
</body>
</html>

现在 CSS 位于 html 文件中。

关于html - CSS 按钮错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26952920/

相关文章:

javascript - 我可以使用 css 中的变量设置 Canvas fillStyle 吗?

jquery - 如何使用 jquery(在 webkit 中)在图像上循环使用 css 过滤器

html - 如何在 float 内容上使用 `flex: grow`?

html - 如何创建具有多种颜色的居中标题?

javascript - 在一个函数之后设置超时

javascript - 单击时如何更改按钮的背景?

html - Bootstrap 4 SCSS 覆盖不起作用

HTML 元素在多个奇怪的点插入到 DOM 中

javascript - 重复代码块

html - (jQuery mobile) 如何让主 div 将页眉和页脚之间的其余部分包装起来?