文字装饰不会工作？在html / css中

时间：2016-02-06 17:40:23

标签： html css

好吧所以我把一个背景和块放在列表中，但现在文本是超链接的，只有文本是可点击的。我在做什么呢？我需要整个盒子是可点击的，文本是白色的，直到你滚动它然后它变成黑色。另外，有没有办法在移动设备上让盒子彼此靠得更近？

＆＃13;
＆＃13; 
body {
  background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") #363634 no-repeat center top;
  background-size: 100%;
  background-color: #3D5771;
  margin: 0;
  padding: 0;
}

h1 {
  position: absolute;
  top: 23%;
  left: 30%;
  color: white;
  font-family: Arial;
  font-size: 4.6vw;
  letter-spacing: 1px;
}

p {
  position: absolute;
  width: 250px;
  top: -1px;
  left: 15px;
  height: 25px;
  font-family: Arial;
}

ul {
  word-spacing: .2em;
  letter-spacing: .2em;
}

ul li {
  font-family: Arial;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
  top: 43%;
  display: inline-block;
  margin-top: 250px;
  margin-left: 115px;
  letter-spacing: 1px;
  word-spacing: normal;
  background-color: rgba(5, 4, 2, 0.1);
  border: 2px solid white;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 90%;
  width: 150px;
  height: 40px;
}

ul li:link,
ul li:visited {
  font-family: Arial;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
  display: inline-block;
  margin-top: 250px;
  margin-left: 115px;
  letter-spacing: 1px;
  word-spacing: normal;
  background-color: rgba(5, 4, 2, 0.1);
  border: 2px solid white;
  font-size: 90%;
  width: 150px;
  height: 40px;
  text-decoration: none;
  color: white;
}

li {
  text-decoration: none;
  color: white;
}

ul li:hover,
ul li:active {
  background-color: white;
  color: black;
  text-decoration: none;
}
＆＃13; 
<center>
  <h1>A Girl With A Passion</h1>
</center>
<ul>
  <li><a href="www.youtube.com" class="life"><strong>MY LIFE</strong></a>
  </li>
  <li><a href="www.youtube.com" class="prot"><strong>PORTFOLIO</strong></a>
  </li>
  <li><a href="www.youtube.com" class="resume"><strong>RESUME</strong></a>
  </li>
  <li><a href="www.youtube.com" class="me"><strong>ABOUT ME</strong></a>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：2)

文本修饰是在我认为的锚元素上完成的，而不是<li>标记。

你试过这个吗？

 ul li a,
 ul li a {
    text-decoration: none;
 }

完整的CSS / HTML：

＆＃13;
＆＃13; 
body {
  background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") #363634 no-repeat center top;
  background-size: 100%;
  background-color: #3D5771;
  margin: 0;
  padding: 0;
}
h1 {
  position: absolute;
  top: 23%;
  left: 30%;
  color: white;
  font-family: Arial;
  font-size: 4.6vw;
  letter-spacing: 1px;
}
p {
  position: absolute;
  width: 250px;
  top: -1px;
  left: 15px;
  height: 25px;
  font-family: Arial;
}
ul {
  word-spacing: .2em;
  letter-spacing: .2em;
}
ul li {
  font-family: Arial;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
  top: 43%;
  display: inline-block;
  margin-top: 250px;
  margin-left: 115px;
  letter-spacing: 1px;
  word-spacing: normal;
  background-color: rgba(5, 4, 2, 0.1);
  border: 2px solid white;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 90%;
  width: 150px;
  height: 40px;
}
ul li:link,
ul li:visited {
  font-family: Arial;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
  display: inline-block;
  margin-top: 250px;
  margin-left: 115px;
  letter-spacing: 1px;
  word-spacing: normal;
  background-color: rgba(5, 4, 2, 0.1);
  border: 2px solid white;
  font-size: 90%;
  width: 150px;
  height: 40px;
  text-decoration: none;
  color: white;
}
li {
  text-decoration: none;
  color: white;
}
ul li:hover,
ul li:active {
  background-color: white;
  color: black;
  text-decoration: none;
}

ul li:hover a,
ul li a:active {
  background-color: white;
  color: black;
}

ul li a {
  color: white;
  text-decoration: none;
  height: 100%;
  width: 100%;
  display: inline-block;
}
＆＃13; 
<center>
  <h1>A Girl With A Passion</h1>
</center>
<ul>
  <li><a href="www.youtube.com" class="life"><strong>MY LIFE</strong></a>
  </li>
  <li><a href="www.youtube.com" class="prot"><strong>PORTFOLIO</strong></a>
  </li>
  <li><a href="www.youtube.com" class="resume"><strong>RESUME</strong></a>
  </li>
  <li><a href="www.youtube.com" class="me"><strong>ABOUT ME</strong></a>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

将此添加到您的CSS中以制作整个＆＃34;框＆＃34;可点击

ul li a {
  display: inline-block;
  height: 100%;
  width: 100%;
  color: white;
  text-decoration: none;
}

然后改变它以获得正确的颜色

ul li a:hover, ul li a:active {
  background-color: white;
  color: black;
}

更新：根据您的请求，我进行了一些标记更改，以使其更具响应性

摘录演示

＆＃13;
＆＃13; 
html, body {
  margin: 0;
  padding:0;
}
body {
  background:URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") #363634 no-repeat center top;
  background-size: 100%;
  background-color:#3D5771;

}
.wrapper {
  padding-top: 10%;
}

h1 {
  color: white;
  font-family:Arial;
  font-size: 4.6vw;
  letter-spacing: 1px;
  text-align: center;
}

ul {
  word-spacing: .2em;
  letter-spacing: .2em;
  text-align: center;
  margin: 0;
  padding: 0;
}
ul li {
  font-family:Arial;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
  display: inline-block;
  background-color: rgba(5,4,2,0.1);
  border: 2px solid white;
  color: white;
  font-size: 90%;
  width: 150px;
  height: 40px;
  margin: 30px;
}

ul li a:hover, ul li a:active {
  background-color: white;
  color: black;
}  
ul li a {
  display: inline-block;
  height: 100%;
  width: 100%;
  text-decoration: none;
  color: white;
}

@media screen and (max-width: 700px) {

  .wrapper {
    padding-top: 5%;
  }
  
  ul li {
    margin: 10px;
  }

}
＆＃13; 
<div class="wrapper">
  <h1>A Girl With A Passion</h1>
  <ul>
    <li><a href="www.youtube.com" class="life" ><strong>MY LIFE</strong></a></li>
    <li><a href="www.youtube.com" class="prot"><strong>PORTFOLIO</strong></a></li>
    <li><a href="www.youtube.com" class="resume"><strong>RESUME</strong></a></li>
    <li><a href="www.youtube.com" class="me"><strong>ABOUT ME</strong></a></li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

这是因为您没有使用text-decoration a属性来使用li a{ text-decoration:none; } 。在您的css使用中执行此操作，

li{
     text-decoration:none;
 }

而不是这个。

public void move()
{
    ballX += dx;
    ballY += dy;

    checkWalls();
}

//bounce of top/bottom, pass through left/right
public void checkWalls() {
    //left-right
    if(ballX > w) {
        ballX = -diam;
    }
    else if(ballX < -diam) {
        ballX = w;
    }

    //top-bottom
    if(ballY < 0) {
        dy *= -1;
    }
    else if(ballY + diam > h) {
        dy *= -1;
    }
}
相关问题
最新问题