Question

我有一个使用Github Pages托管的网站，我似乎无法让我的页脚工作。它甚至不会给任何文本提供背景颜色：

h1 {
  background-color: #000000;
}

因此，当我尝试对页脚进行编码时，我试图制作一个类似于本页底部的页脚，并且它不会执行任何background-color: #color;。我很想得到一些帮助，所以这里有HTML和CSS：

    <!DOCTYPE html>
<html>

    <head>

        <meta charset="utf-8">
                <link rel='stylesheet' href='style.css'/>
                <script src='script.js'></script>
                <link rel="shortcut icon" href="MyLogo.ico" />

    </head>

    <body>
      <center>
        <img src="A.jpg"></img>
          <div class="navbar">
            <a href="/">Home</a>
            <a href="About/">About</a>
            <a href="Photos/">Photos</a>
            <a href="Contact">Contact</a>
          </div>
    </center>
      <br/>
      <br/>
      <br/>

        <div class="footer">

      <a href="https://www.facebook.com/Amundson-Aerial-Photography-AAP-881108668736951/">My Facebook page</a>

        </div>
    </body>
</html>







body {
      font-family: sans-serif;
    }

    .navbar {
      overflow: hidden;
      background-color: black;
    }

    .navbar a {
      float: left;
      display: block;
      color: white;
      text-align: center;
      padding: 14px 20px;
      text-decoration: none;
      transition: .3s;
    }

    .navbar a:hover {
       background-color: #666666;
}    
    .footer {
       width: 100%;
       background-color: #000000;
       padding: 60px 0px;
       position:fixed;
       left:0px;
       bottom:0px;
       height:50px;
       width:100%;
       background:#999;

    }

Answer 1

根据您上面分享的代码，它会应用背景颜色，但是您有一个background:#999规则，因此它会覆盖它。

值得研究css继承，如果这是你不确定的东西，但只是在同一个选择器语句中进一步向下，或者使用更具体的选择器，它将始终覆盖。

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance

我还为<img/>使用了自我关闭标记，这是正确的语法，因为<img>标记没有结束标记。

https://www.w3schools.com/tags/tag_img.asp

body {
      font-family: sans-serif;
    }

    .navbar {
      overflow: hidden;
      background-color: black;
    }

    .navbar a {
      float: left;
      display: block;
      color: white;
      text-align: center;
      padding: 14px 20px;
      text-decoration: none;
      transition: .3s;
    }

    .navbar a:hover {
       background-color: #666666;
}    
    .footer {
       width: 100%;
       padding: 60px 0px;
       position:fixed;
       left:0px;
       bottom:0px;
       height:50px;
       width:100%;

       background-color: #000000;
       background:#999;
       background-color:red;
    }

<!DOCTYPE html>
<html>

    <head>

        <meta charset="utf-8">
                <link rel='stylesheet' href='style.css'/>
                <script src='script.js'></script>
                <link rel="shortcut icon" href="MyLogo.ico" />

    </head>

    <body>
      <center>
        <img src="A.jpg" />
          <div class="navbar">
            <a href="/">Home</a>
            <a href="About/">About</a>
            <a href="Photos/">Photos</a>
            <a href="Contact">Contact</a>
          </div>
    </center>
      <br/>
      <br/>
      <br/>

        <div class="footer">

      <a href="https://www.facebook.com/Amundson-Aerial-Photography-AAP-881108668736951/">My Facebook page</a>

        </div>
    </body>
</html>

Answer 2

如果您的意思是无法更改背景页脚，background-color: #000000;和background:#999;具有相同的功能。删除一个。

HTML页脚无法在Github Pages上运行

2 个答案: