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

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

javascript html css

Javascript 如何制作使用自定义资源和链接到其他页面的按钮,javascript,html,css,Javascript,Html,Css,我不熟悉CSS、HTML和JS，但我希望在开发我的公文包网站的过程中了解更多。目前，我正在尝试将我设计的自定义按钮放在我的网站上，链接到另一个页面。我有“零”按钮并单击“状态工作”，但我不能100%确定如何使用该按钮链接到我网站上的另一个页面这是到目前为止的代码 <html> <head><title>button</title> <style> div.butn{ background-image:url("https:/

我不熟悉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>


按钮
布顿分区{
背景图像：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“；
宽度：555px；
高度：170px；}
分区但n：活动{
背景图像：url（“https://static1.squarespace.com/static/54da7941e4b0e25dc3648a4f/t/5964090b6b8f5bf77b28504f/1499728139538/hover_state%40300x-8.巴布亚新几内亚）；
宽度：555px；
高度：170px；}

感谢您的帮助，对于任何noobie错误提前表示歉意xD

我建议您坚持使用语义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>


按钮
布顿先生{
背景图像：url（…/plain.image”）；
宽度：555px；
高度：170px；
}
.butn:主动的{
背景图像：url（“../active.image”）；
}

那么，除了使用锚定标签外，还有什么变化呢？事实上，变化很大：

我选择了一个合适的字符集（UTF-8应该适合大多数情况）
我降低了你的CSS规则（你可能会读到为什么这是！重要的（没有双关语的意图）上）
我使用锚定标记
```
来了解样式是如何级联的）
```


最后但并非最不重要的一点是，我正确地对齐了您的代码（称我为迂腐的代码，但对齐错误的代码使其更难阅读并阻碍了您的思维过程）


还有很多地方要覆盖，但这应该足以让你在接下来的两周内保持忙碌。继续问吧！
我建议你坚持使用语义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>


按钮
布顿先生{
背景图像：url（…/plain.image”）；
宽度：555px；
高度：170px；
}
.butn:主动的{
背景图像：url（“../active.image”）；
}


那么，除了使用锚定标签外，还有什么变化？事实上，相当多：

我选择了一个合适的字符集（UTF-8应该适合大多数情况）
我降低了你的CSS规则（你可能会读到为什么这是！重要的（没有双关语的意图）上）
我使用锚定标记来了解样式是如何级联的）

最后但并非最不重要的一点是，我正确地对齐了您的代码（称我为迂腐的代码，但对齐错误的代码使其更难阅读并阻碍了您的思维过程）

还有很多地方要覆盖，但这应该足以让你在接下来的两周里有空。继续问
 这并不是关于html
或css
，更多关于javascript
。。。搜索一下onclick
和窗口。打开
…使用锚定标记，将要导航到的url放在href中，然后作为类或内联样式添加到css中。如果您想要一个新窗口，请使用target=“_blank”。这并不是关于html
或css
的特定内容，更多关于javascript
。。。搜索一下onclick
和窗口。打开
…使用锚定标记，将要导航到的url放在href中，然后作为类或内联样式添加到css中。如果您想要一个新窗口，请使用target=“\u blank”。非常感谢@aefxx，该链接现在可以使用了。。。然而，我注入网站的图像资产没有被调用，相反，我得到了这个结果——它看起来像是我创建的按钮资产的左上角，我只是没有显示足够的图像吗？@WilliamOliver我真的不知道它应该是什么样子。给我看看你的模型，我会告诉你怎么做。这是按钮样式，非活动和活动-我想显示非活动状态，然后当用户悬停在上面（现在单击）时，显示活动状态。这就是你所说的实体模型吗？我所做的就是用你提供给我的代码（谢谢！）用按钮状态的真实URL替换你的普通/活动按钮。你能解释一下你说的模拟是什么意思吗？很抱歉打扰你，我在按钮方面遇到了问题，所以我转到了网站的其他方面，这些方面一直进展顺利。没问题，你提供的屏幕截图实际上就是我想要的模型。我只是还没来得及回答。上面我的答案中的代码应该适用于您，只要您确保按钮的尺寸与背景图像的尺寸匹配。至于背景图像：您可能需要查看背景重复
和背景位置
CSS属性以获得最大控制。非常感谢@aefxx，该链接现在可以使用了。。。然而，我注入网站的图像资产没有被调用，相反，我得到了这个结果——它看起来像是我创建的按钮资产的左上角，我只是没有显示足够的图像吗？@WilliamOliver我真的不知道它应该是什么样子。给我看看你的模型，我会告诉你怎么做。这是按钮样式，非活动和活动-我想显示非活动状态，然后当使用