'Footer' 网页顶部的样式栏不起作用。 CSS & HTML

Question

http://biggerbyte.net/testwebsite/test.html

网站有托管版本

@charset "utf-8";
 .footer {
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  padding: 0;
  background-color: black;
  text-align: center;
  color: white;
  font-size: 14px;
}
.footer a {
  color: white;
}
.footer a:hover {
  color: #E8DE4D;
}
.background-image {
  background-image: url("http://garanthomas.me/images/dsc00813-2.jpg?crc=4106647053");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% auto;
}
.content-box {
  position: absolute;
  top: 50px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  background-color: #4A4A4A;
  width: 450px;
  opacity: 0.65;
  text-align: center;
  align-content: center;
  font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, DejaVu Sans, Verdana, " sans-serif";
  font-size: 90;
  color: white;
}
.content-box p {
  text-align: center;
  align-content: center;
  font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, DejaVu Sans, Verdana, " sans-serif";
  font-size: 90;
  color: white;
}
.content-box h1 {
  text-align: center;
  align-content: center;
  font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, DejaVu Sans, Verdana, " sans-serif";
  font-size: 90;
  color: white;
}
.cb-slideshow,
.cb-slideshow:after {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 0;
  text-decoration: none;
  list-style-type: none;
}
.cb-slideshow:after {
  content: '';
  background: transparent url(../images/patterrn.png) repeat top left;
  text-decoration: none;
  list-style-type: none;
}
.cb-slideshow li span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 0;
  animation: imageAnimation 36s linear infinite 0s;
  text-decoration: none;
  list-style-type: none;
}
.cb-slideshow li div {
  z-index: 1000;
  position: absolute;
  bottom: 30px;
  left: 0px;
  width: 100%;
  text-align: center;
  opacity: 0;
  color: #fff;
  animation: titleAnimation 36s linear infinite 0s;
  text-decoration: none;
  list-style-type: none;
}
.cb-slideshow li div h3 {
  font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
  font-size: 200px;
  padding: 0;
  line-height: 200px;
  text-decoration: none;
  list-style-type: none;
}
.cb-slideshow li:nth-child(1) span {
  background-image: url(images/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
  background-image: url(images/3.jpg);
  animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
  background-image: url(images/2.jpg);
  animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
  background-image: url(images/4.jpg);
  animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
  background-image: url(images/5.jpg);
  animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
  background-image: url(images/6.jpg);
  animation-delay: 30s;
}
.cb-slideshow li:nth-child(2) div {
  animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
  animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
  animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
  animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
  animation-delay: 30s;
}
@keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  17% {
    opacity: 1
  }
  25% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}
@keyframes titleAnimation {
  0% {
    opacity: 0
  }
  8% {
    opacity: 0.5
  }
  17% {
    opacity: 0.5
  }
  19% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}
.no-cssanimations .cb-slideshow li span {
  opacity: 1;
}
@media screen and (max-width: 1140px) {
  .cb-slideshow li div h3 {
    font-size: 140px
  }
}
@media screen and (max-width: 600px) {
  .cb-slideshow li div h3 {
    font-size: 80px
  }
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">

  <title>index</title>
  <link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

  <div class="footer">©2016 Garan Thomas - <a href="contact.html">Contact Me</a>.</div>

  <ul class="cb-slideshow">
    <li>
      <span>Image 01</span>
      <div>
        <h3>Brecon</h3>
      </div>
    </li>

    <li>
      <span>Image 03</span>
      <div>
        <h3>Swansea</h3>
      </div>
    </li>

    <li><span>Image 02</span>
      <div>
        <h3>Brecon</h3>
      </div>
    </li>

    <li>
      <span>Image 04</span>
      <div>
        <h3>Neath</h3>
      </div>
    </li>

    <li>
      <span>Image 05</span>
      <div>
        <h3>Brecon Beacons</h3>
      </div>
    </li>

    <li>
      <span>Image 06</span>
      <div>
        <h3>Rhigos</h3>
      </div>
    </li>
  </ul>

  <center>

    <div class="content-box">
      <h1>Welcome to my website</h1>
      <p>Welcome to my photography website. Here you can find my photography work, website work and other things I decide to put up.</p>
    </div>

  </center>
</body>

</html>

以上是我使用的代码。代码很乱，很多都是从我遵循的一个小指南中复制的。我仍在学习这种类型的代码，所以请原谅任何错误。我发现我的网页顶部没有 .footer 栏，我发现了一个白色间隙，它本质上是一个裸网站，您可以在其中看到任何内容等等。我找不到解决这个问题的方法，所以我想我会在网站顶部添加一个小的页脚样式栏，在那里我会把导航放在那里，但现在我从另一个网站偷了页脚并很快将其编辑为位于网页顶部。我认为它看起来相当不错，但我注意到我拥有的超链接和栏内的文本无法突出显示，就好像它上面的东西在网页上阻挡它一样，例如 photoshop 中的图层。谁能帮我解决这个问题？告诉我我的代码出了什么问题，或者我在以后应该避免的代码中做了什么？或者对网站有什么建议？我非常欢迎任何回复。

感谢您的时间和回答。

Answer 1

如果您想在不放置栏的情况下解决此问题，导致顶部出现白色 space 的问题是您的整个页面内容都在 unordered list 中。默认情况下，浏览器会将上边距应用到 unordered lists，因此您所要做的就是像这样覆盖它：

ul.cb-slideshow {
    margin-top:0;
}

如果您想将柱保持在顶部，问题是 "footer" 柱的 z-index 低于 unordered list。您可以通过设置页脚的 z-index 来解决这个问题：

.footer {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    padding: 0;
    background-color: black;
    text-align: center;
    color: white;
    font-size: 14px;
    z-index: 1; /* Make sure footer is above ul */
}

Answer 2

尝试在

之后将页脚添加到底部

</center>

<footer class="footer">©2016 Garan Thomas - <a href="contact.html">Contact Me</a>.</footer>

Answer 3

只需将 z-index: 1; 添加到 CSS 中的 .footer。但是，您应该将其命名为 footer...

以外的名称

Answer 4

对于您的页脚，将其设置为 z-index 高于其他任何内容以使其保持在顶部并将 bottom 设置为 0。此外，在 HTML 中，将其放在body 结束。
因此，页脚的最终 css 变为。

.footer {
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0;
  background-color: black;
  text-align: center;
  color: white;
  font-size: 14px;
  z-index: 100000;
}

对于顶部的空白，这是您的无序列表自动从浏览器获取 margin-top，使用此：

ul.cb-slideshow {
margin-top: 0;
}

Fiddle

Answer 5

谢谢大家的回答。我通过添加比我的幻灯片更高数字的 Z-Index 来修复它，我还通过使用

摆脱了那里的愚蠢差距

ul.cb-slideshow {
    margin-top:0;
}

'Footer' 网页顶部的样式栏不起作用。 CSS & HTML

'Footer' style bar at top of web page isn't working. CSS & HTML

html

css

dreamweaver