CSS&；HTML按钮_Html_Css_Button_Format

CSS&；HTML按钮

html css button

CSS&；HTML按钮,html,css,button,format,Html,Css,Button,Format,因此，我试图添加一个按钮列表到我正在创建的网站。但是当我把它们一个放在另一个上面时，它就不能点击上面的那个。有人能帮我理解如何更好地编写这个或我缺少什么吗我的CSS主要是格式化的东西，但我确实想继续，但由于某些原因，我无法想出如何让这两个按钮正常工作。我只想把它们一层一层地放在右边。我把它们放在一个很好的位置，但它就是不让我点击它们我的CSS文件包括按钮右侧、两个标题的格式，并添加了动画渐变字体正文{ 宽度：100wh；高度：90vh；颜色：#fff；背景：线性梯度（-45度，#e

因此，我试图添加一个按钮列表到我正在创建的网站。但是当我把它们一个放在另一个上面时，它就不能点击上面的那个。有人能帮我理解如何更好地编写这个或我缺少什么吗

我的CSS主要是格式化的东西，但我确实想继续，但由于某些原因，我无法想出如何让这两个按钮正常工作。我只想把它们一层一层地放在右边。我把它们放在一个很好的位置，但它就是不让我点击它们

我的CSS文件包括按钮右侧、两个标题的格式，并添加了动画渐变字体

正文{
宽度：100wh；
高度：90vh；
颜色：#fff；
背景：线性梯度（-45度，#ee7752，#e73c7e，#23a6d5，#23d5ab）；
背景大小：400%400%；
-webkit动画：渐变15s轻松无限；
-moz动画：渐变15s轻松无限；
动画：渐变15s轻松无限；
}
@-webkit关键帧渐变{
0% {
背景位置：0%50%；
}
50% {
背景位置：100%50%；
}
100% {
背景位置：0%50%；
}
}
@-moz关键帧渐变{
0% {
背景位置：0%50%；
}
50% {
背景位置：100%50%；
}
100% {
背景位置：0%50%；
}
}
@关键帧渐变{
0% {
背景位置：0%50%；
}
50% {
背景位置：100%50%；
}
100% {
背景位置：0%50%；
}
}
h1{
字体系列：“Merienda”；
字体大小：40px；
字体大小：400；
文本对齐：居中；
位置：绝对位置；
最高：40%；
右：0；
左：0；
}
氢{
字体系列：“Merienda”；
字体大小：300；
文本对齐：居中；
位置：绝对位置；
最高：55%；
右：0；
左：0；
}
p{
字体系列：“Merienda”；
字体大小：300；
文本对齐：居中；
位置：绝对位置；
最高：63%；
右：0；
左：0；
}
a、 钮扣{
-webkit外观：按钮；
-moz外观：按钮；
外观：按钮；
字体系列：“Merienda”；
背景色：无；
文字装饰：无；
颜色：白色；
字体大小：24px；
填充顶部：10px；
右边填充：28px；
左侧填充：28px；
垫底：10px；
边界半径：10px；
线高：10；
}
.对{
位置：绝对位置；
右：0px；
宽度：200px；
}


凯文的网站
凯文的网站
凯文
雄心勃勃的学生
信息
是的，我

我发现你的HTML有问题。您可以打开一个额外的html和body标记而不关闭它们

不确定这是否会对按钮产生影响，但这是一个修复的好主意

此外，您可能应该从div标记中删除分号。这可能会奏效

我认为应该是这样的：

 <!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Kevin's Website</title>

   <link rel="stylesheet" href="homestyle.css">    
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merienda" type="text/css" />


</head>

<body>

<h1>Kevin</h1>

  <h2> An Ambitious Student </h2>
  <p> Info </p>
  <p style="line-height: 5">Yeah me </p>

  <div class="right">  
    <a href="skills.html" class=button>Skills</a> 
  </div>

  <div style="line-height: 25" class="right">  
    <a href="aboutme.html" class=button>About Me</a> 
  </div>


</body>
</html>


凯文的网站
凯文
雄心勃勃的学生
信息
是的，我

我发现一些小问题导致了您的行为

首先在HTML中：

<div class="right";>  
  <a href="skills.html" class=button>Skills</a> 
</div>

<div style="line-height: 25"; class="right";>  
  <a href="aboutme.html" class=button>About Me</a> 
</div>

改为：

<div class="right";>  
  <a href="skills.html" class=button>Skills</a> 
  <a href="aboutme.html" class=button>About Me</a> 
</div>

a.button {
  -webkit-apperance: button;
  -moz-apperance: button;
  apperance: button;
  font-family: "Merienda";

  background-color: none;
  text-decoration: none;
  color: white;
  font-size: 24px;
  padding: 10px 28px;
  border-radius: 10px;
  display: block;
}

实际的问题是“线高度”使a按钮的面积变得如此之大，以至于它们彼此重叠，因此每个按钮都会覆盖其上方的按钮（使其不可点击）

基本上，如果删除线高度，应该可以解决问题。如果你想在它们周围留出空间，我会调整“a按钮”的填充

这里有一个

我看到了所有的

位置：绝对

，这是一个创建布局的糟糕方法。。所以我建议你考虑一个比这更好的方法，而不是固定的，你也不能忘记在指定任何高度时加上“px”，例如style =“行高：5px”，所以如果我在px中加上线的高度，它实际上不使用线高。但如果我不加上它，它就会工作。你为什么要用线的高度？如果您想在段落/div周围添加空格，我可能会使用填充。我认为行高更适合于调整同一段落中行与行之间的间距。

a.button {
  -webkit-apperance: button;
  -moz-apperance: button;
  apperance: button;
  font-family: "Merienda";

  background-color: none;
  text-decoration: none;
  color: white;
  font-size: 24px;
  padding: 10px 28px;
  border-radius: 10px;
  display: block;
}