Question

我是CSS，HTML和JS的新手，但我希望通过开发我的投资组合网站来了解更多信息。目前我正在尝试将我设计的自定义按钮放在我的网站上，链接到另一个页面。我有按钮零点击状态工作，但我不能100％确定如何制作它，以便按钮可以用来链接到我网站上的另一个页面。

到目前为止，这是代码。

<html>
 <head><title>button</title>
 <style>

 div.butn{
 background-image:url("https://static1.squarespace.com/static/54da7941e4b0e25dc3648a4f/t/59640885b3db2b282c21c56e/1499728005971/zero_state%40300x-8.png@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:700");

 width:555px;
 height:170px;}

 div.butn:active{
 background-image:url("https://static1.squarespace.com/static/54da7941e4b0e25dc3648a4f/t/5964090b6b8f5bf77b28504f/1499728139538/hover_state%40300x-8.png");

 width:555px;
 height:170px;}
 </style>
 </head>
<body>

<div class="butn"></div>
</body>
</html>

任何帮助都表示赞赏，对于任何noobie错误xD

提前抱歉

Answer 1

我建议您坚持使用语义HTML，即使用适当的标签来表达您想传达的内容。在您的示例中，您希望按钮的行为类似于指向另一个URL的超链接，那么为什么不使用为此目的而制作的锚标记呢？

让我们看看我们如何改善一些事情：

<html>
<head>
  <meta charset="utf-8">
  <title>button</title>
  <style>
    .butn {
      background-image:url(.../plain.image");
      width:555px;
      height:170px;
    }

    .butn:active{
      background-image:url("../active.image");
    }
  </style>
</head>
<body>
  <p><a class="butn" href="https://..." title="Show this text on hover">Go to YouTube</a></p>
</body>
</html>

那么，除了使用锚标签之外，还有什么变化？很多，实际上：

我选择了一个合适的字符集（UTF-8应该适用于大多数事情）
我降低了你的CSS规则specificity（你可能会在Smashing magazine上读到为什么这很重要（没有双关语意））
我使用了锚标记<a>来正确标记超链接
我摆脱了.btn:active规则中多余的CSS属性（请参阅CSS-Tricks了解有关样式如何级联的所有内容）
最后但并非最不重要的是，我正确地对齐了你的代码（称我为迂腐，但未对齐的代码使得阅读更加困难，妨碍了你的思考过程）

还有更多的理由可以覆盖，但这应该足以让你在接下来的两周内被占用。继续问！

如何制作使用自定义资源并链接到其他页面的按钮

1 个答案: