代码之家 › 专栏 › 技术社区 › Cody

&CSS HTML按钮

format button css html

Cody · 技术社区 · 8 年前

因此,我正在尝试将按钮列表添加到我正在创建的网站中。但当我把它们一个放在另一个上面时,它会禁用单击顶部的一个的功能。有人能帮助我理解如何更好地编写此代码或我缺少的内容吗?

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

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

body {
  width: 100wh;
  height: 90vh;
  color: #fff;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 15s ease infinite;
  animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@-moz-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

h1 {
  font-family: "Merienda";
  font-size: 40px;
  font-weight: 400;
  text-align: center;
  position: absolute;
  top: 40%;
  right: 0;
  left: 0;
}

h2 {
  font-family: "Merienda";
  font-weight: 300;
  text-align: center;
  position: absolute;
  top: 55%;
  right: 0;
  left: 0;
}

p {
  font-family: "Merienda";
  font-weight: 300;
  text-align: center;
  position: absolute;
  top: 63%;
  right: 0;
  left: 0;
}

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-top: 10px;
  padding-right: 28px;
  padding-left: 28px;
  padding-bottom: 10px;
  border-radius: 10px;
  line-height: 10;
}

.right {
  position: absolute;
  right: 0px;
  width: 200px;
}

   

     <!DOCTYPE html>
    <html lang="en" >
    
    <head>
      <meta charset="UTF-8">
      <title>Kevin's Website</title>
      
      
      
          <link rel="stylesheet" href="homestyle.css">
    
      
    </head>
    
    <body>
    
    <!DOCTYPE html>
    <html>
    
    <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merienda" type="text/css" />
    
      <title>Kevin's Website</title>
      </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>

2 回复 | 直到 8 年前

Cat 8 年前

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

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>

CSS中的第二个:

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-top: 10px;
  padding-right: 28px;
  padding-left: 28px;
  padding-bottom: 10px;
  border-radius: 10px;
  line-height: 10;
}

更改为:

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.button”的填充。

这里有一个 DEMO

JackHacks 8 年前

我发现你的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>