Question

自从我用html / css搞砸了很长一段时间后，我正试图实现一些示例按钮。它在jsfiddle和其他代码运行程序中运行正常，但是当我尝试通过notepad ++运行时，它以html格式而不是css出现

看看

body {
  background-color: #9e9a75
}

.B1 {
  background: #b5ad67;
  background-image: -webkit-linear-gradient(top, #b5ad67, b5ad67);
  background-image: -moz-linear-gradient(top, #b5ad67, b5ad67);
  background-image: -ms-linear-gradient(top, #b5ad67, b5ad67);
  background-image: -o-linear-gradient(top, #b5ad67, b5ad67);
  background-image: linear-gradient(to bottom, #b5ad67, b5ad67);
  -webkit-border-radius: 9;
  -moz-border-radius: 9;
  border-radius: 9px;
  -webkit-box-shadow: 3px 3px 12px #666666;
  -moz-box-shadow: 3px 3px 12px #666666;
  box-shadow: 3px 3px 12px #666666;
  font-family: Georgia;
  color: #7a7448;
  font-size: 20px;
  padding: 20px 20px 20px 20px;
  text-decoration: none;
}

.B1:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

<!DOCTYPE html?
<html>

<head>
  <title>Big Bite Tackle</title>
  <link rel="stylesheet" type="text/css" href="Styles.css">
</head>

<body>

</body>

<div>
  <CENTER>
    <a class="B1" href="http://www.google.com" <strong>Meet the man</a>
    <a class="B1" href="http://www.google.com" <strong>Shop</a>
    <a class="B1" href="http://www.google.com" <strong>Contact and Support</a>
  </CENTER>
</div>

<center>
  <img src="BBTTITLE.PNG">
</center>

当我独自运行它时，它就会出现 https://gyazo.com/5639170d4b29d5c966427a4953482c8f

Answer 1

你的锚标签有一些拼写错误。 <a>尚未关闭且<strong>没有结束标记。主要代码应放在<body></body>内。我对下面的代码做了一些修改。此外，<center>为deprecated。

＆＃13;

body {
  background-color: #9e9a75
}

.center{
 text-align: center;
}

.B1 {
  background: #b5ad67;
  background-image: -webkit-linear-gradient(top, #b5ad67, b5ad67);
  background-image: -moz-linear-gradient(top, #b5ad67, b5ad67);
  background-image: -ms-linear-gradient(top, #b5ad67, b5ad67);
  background-image: -o-linear-gradient(top, #b5ad67, b5ad67);
  background-image: linear-gradient(to bottom, #b5ad67, b5ad67);
  -webkit-border-radius: 9;
  -moz-border-radius: 9;
  border-radius: 9px;
  -webkit-box-shadow: 3px 3px 12px #666666;
  -moz-box-shadow: 3px 3px 12px #666666;
  box-shadow: 3px 3px 12px #666666;
  font-family: Georgia;
  color: #7a7448;
  font-size: 20px;
  padding: 10px;
  text-decoration: none;
}

.B1:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

＆＃13;

<!DOCTYPE html?
<html>

<head>
  <title>Big Bite Tackle</title>
  <link rel="stylesheet" type="text/css" href="Styles.css">
</head>

<body>
  <div class="center">
    <a class="B1" href="http://www.google.com"><strong>Meet the man</strong></a>
    <a class="B1" href="http://www.google.com"><strong>Shop</strong></a>
    <a class="B1" href="http://www.google.com"><strong>Contact and Support</strong></a>
  </div>
</body>

＆＃13;

按钮无法正常显示

1 个答案: