Question

所以我刚刚开始学习HTML / CSS，我正在尝试为我正在整理的杂志创建一个网站。但是，当我尝试将两个链接添加到两个不同的文本时，一个只是部分可点击而下面的那个不是。

我认为它与我的包装或文本旁边的照片有关，因为当我更正确地对齐它们时，它们现在可以点击了。似乎有些东西阻止了单击（链接）单词的一部分。

我尝试过制作侧边栏但我仍然得到相同的结果。我尝试移动我的代码以获得不同的结果，但仍然无法弄明白。

#wrapper {
  margin: 0 auto;
  width: 1140px;
}

.slider {
  max-width: 457px;
  height: 451px;
  margin: 0 auto;
  position: relative;
}

.slide1,
.slide2,
.slide3,
.slide4,
.slide5 {
  position: absolute;
  width: 100%;
  height: 100%;
}

.slide1 {
  background: url(TPWeb.jpg)no-repeat center;
  background-size: cover;
  animation: fade 80s infinite;
  -webkit-animation: fade 20s infinite;
  margin-top: 20px;
  margin-left: -155px;
}

.slide2 {
  background: url(DS.jpg)no-repeat center;
  background-size: cover;
  animation: fade2 80s infinite;
  -webkit-animation: fade2 20s infinite;
  margin-top: 20px;
  margin-left: -155px;
}

.slide3 {
  background: url(IT95Web.jpg)no-repeat center;
  background-size: cover;
  animation: fade3 80s infinite;
  -webkit-animation: fade3 20s infinite;
  margin-top: 20px;
  margin-left: -155px;
}

@font-face {
  font-family:
}

@keyframes fade1 {
  0% {
    opacity: 1
  }
  33.333% {
    opacity: 0
  }
  66.666% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

@keyframes fade2 {
  0% {
    opacity: 0
  }
  33.333% {
    opacity: 1
  }
  66.666% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

@keyframes fade3 {
  0% {
    opacity: 0
  }
  33.333% {
    opacity: 0
  }
  66.666% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}


}
.TPWeb {
  margin-top: 80px;
  margin-left: 50px;
}
.DFBase1 {
  margin-top: 45px;
  margin-left: 183px;
  width: 448px;
  height: 127px;
}
.ATA {
  margin-right: 305px;
  margin-top: -475px;
  font-family:
}
.B {
  margin-right: 370px;
  font-family:
}
.about {
  color: #000;
  text-decoration: none;
}
.blog {
  color: #000;
  text-decoration: none;
}

<div id="wrapper">

  <div class='slider'>
    <div class='slide1'></div>
    <div class='slide2'></div>
    <div class='slide3'></div>
  </div>

  <img src="DFBase1.png" alt="DFBase" class=DFBase1>

  <div align="right" class=ATA>
    <font size="5"><em><b><a href="http://google.com" title="about the author" class="about" target="new">about the author</a></b></em></font>
  </div>

  <div align="right" class=B>
    <font size="5"><em><b><a href="http://google.com" title="blog" class="blog" target="new">blog</a></b></em></font>
  </div>
</div>

Answer 1

.slider与链接重叠，因为您使用了否定margin将链接重新移回页面。

一个简单的解决方法是通过分配z-index

为链接position: relative

   .ATA, .B {
position: relative;
   }

#wrapper {
  margin: 0 auto;
  width: 1140px;
}

.slider {
  max-width: 457px;
  height: 451px;
  margin: 0 auto;
  position: relative;
}

.slide1,
.slide2,
.slide3,
.slide4,
.slide5 {
  position: absolute;
  width: 100%;
  height: 100%;
}

.slide1 {
  background: url(TPWeb.jpg)no-repeat center;
  background-size: cover;
  animation: fade 80s infinite;
  -webkit-animation: fade 20s infinite;
  margin-top: 20px;
  margin-left: -155px;
}

.slide2 {
  background: url(DS.jpg)no-repeat center;
  background-size: cover;
  animation: fade2 80s infinite;
  -webkit-animation: fade2 20s infinite;
  margin-top: 20px;
  margin-left: -155px;
}

.slide3 {
  background: url(IT95Web.jpg)no-repeat center;
  background-size: cover;
  animation: fade3 80s infinite;
  -webkit-animation: fade3 20s infinite;
  margin-top: 20px;
  margin-left: -155px;
}

@font-face {
  font-family:
}

@keyframes fade1 {
  0% {
    opacity: 1
  }
  33.333% {
    opacity: 0
  }
  66.666% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

@keyframes fade2 {
  0% {
    opacity: 0
  }
  33.333% {
    opacity: 1
  }
  66.666% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

@keyframes fade3 {
  0% {
    opacity: 0
  }
  33.333% {
    opacity: 0
  }
  66.666% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}


}
.TPWeb {
  margin-top: 80px;
  margin-left: 50px;
}
.DFBase1 {
  margin-top: 45px;
  margin-left: 183px;
  width: 448px;
  height: 127px;
}
.ATA {
  margin-right: 305px;
  margin-top: -475px;
  font-family:
}
.B {
  margin-right: 370px;
  font-family:
}
.about {
  color: #000;
  text-decoration: none;
}
.blog {
  color: #000;
  text-decoration: none;
}

<div id="wrapper">

  <div class='slider'>
    <div class='slide1'></div>
    <div class='slide2'></div>
    <div class='slide3'></div>
  </div>

  <img src="DFBase1.png" alt="DFBase" class=DFBase1>

  <div align="right" class=ATA>
    <font size="5"><em><b><a href="http://google.com" title="about the author" class="about" target="new">about the author</a></b></em></font>
  </div>

  <div align="right" class=B>
    <font size="5"><em><b><a href="http://google.com" title="blog" class="blog" target="new">blog</a></b></em></font>
  </div>
</div>

超链接只能部分点击

1 个答案: