如何更改页脚的颜色？

Question

我是 HTML 和 CSS 的新手，不知道如何更改位于 http://materializecss.com/footer.html 的页脚颜色。任何帮助都会很棒，谢谢！

原文由 Maxx Brixner 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

包含 有关页脚的着色信息 的类是 page-footer ，因此您可以更改颜色，如下所示：

 <style>
    .page-footer {
        background-color: blue;
    }
</style>

此外 ，您可以将 ID 设置为页脚并覆盖现有设置，如图所示：

HTML :

 <footer id = "myFooter">...</footer>

CSS （ _内联_）：

 <style>
    #myFooter {
        background-color: blue;
    }
</style>

如果上述方法不起作用，请尝试使用 !important 强制更改，如下所示：

 <style>
    #myFooter {
        background-color: blue !important;
    }
</style>

查看此小提琴和下面的代码片段以查看现场演示：

 #myFooter {
  background-color: blue;
}

 <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" type="text/css" />
<footer id="myFooter" class="page-footer">
  <div class="container">
    <div class="row">
      <div class="col l6 s12">
        <h5 class="white-text">Footer Content</h5>
        <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
      </div>
      <div class="col l4 offset-l2 s12">
        <h5 class="white-text">Links</h5>
        <ul>
          <li><a class="grey-text text-lighten-3" href="#!">Link 1</a>
          </li>
          <li><a class="grey-text text-lighten-3" href="#!">Link 2</a>
          </li>
          <li><a class="grey-text text-lighten-3" href="#!">Link 3</a>
          </li>
          <li><a class="grey-text text-lighten-3" href="#!">Link 4</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="footer-copyright">
    <div class="container">
      © 2014 Copyright Text
      <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
    </div>
  </div>
</footer>

原文由 Angel Politis 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

If you want to use one of the Materialize colors , you can simply add red / orange / teal to your footer classes like this :

 <footer class="page-footer pink lighten-1">

原文由 egor.zhdan 发布，翻译遵循 CC BY-SA 3.0 许可协议