如何更改页脚的颜色？

Question

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

Answer 1

CSS:

footer {
  background-color: red; 
}

Answer 2

我查看了 css，发现 class 为页脚着色。

footer.page-footer {
    background-color: #333333;
}

Answer 3

在您自己的 CSS 文档中，您需要将其放在之后 materialise.css 文档，您需要添加：背景色：#fff；到页脚 class。（#fff 可以更改为不同的颜色访问 htmlcolorcodes.com 了解更多信息）我希望这对他们有所帮助...

Answer 4

只需 select 您的页脚元素标签并在其上放置一些 CSS 背景。例如。

footer{background:red;}

Answer 5

我试过了，效果很好

footer.page-footer {
        background-color:hotpink;
    }

Answer 6

包含关于页脚的着色信息的class是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>

查看 this fiddle 和下面的代码片段以观看现场演示：

#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>

Answer 7

如果您想使用 Materialize colors 之一，只需将 red / orange / teal 添加到您的 footer 类像这样：

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

Answer 8

只需添加类，例如，更改下面的导航颜色：

 <nav class="teal lighten-2">

Answer 9

手动颜色

如前所述，您可以按照 class 创建一些 CSS:

.page-footer{
    background-color: your color here;
}

或者为页脚指定一个ID，然后这样设置background-color。

Material 颜色使用 classes

如果您想使用 material 颜色（参见列表 here），您可以使用 classes，或复制粘贴十六进制值。如果您使用十六进制值，请参阅 "manual colors" 下的第一个片段以进行实施。

如果您使用颜色 classes，它就像任何其他元素一样：

<footer class = "page-footer your-color-class">

例如：

<footer class="page-footer amber darken-2">

（darken-2 不是必需的，它只是作为示例。在这种情况下，我使用 amber darken-2 作为颜色）

SASS/SCSS 使用 material classes

注意： SASS/SCSS 需要 ruby 编译器，并编译为常规 CSS .如果您不使用 .scss 或 .sass，这将不起作用。

如果你使用SASS，还有另一种方法（这是SCSS，同样适用于SASS，只是语法略有不同）：

.page-footer{
    @extend .your-color-class;
}

使用与之前相同的颜色，这将是：

.page-footer{
    @extend .amber, .darken-2;
}

这使用了SASS/SCSS. Note that this is only possible if you've downloaded and @imported the SCSS version of materialize, which it does officially have and support的继承特性。

Answer 10

只需将您需要的颜色的颜色代码添加到页脚的 class 例子

<footer class="page-footer blue-grey darken-4">
      <div class="container">
        <div class="row">
          <div class="col l6 s12">
            <h5 class="white-text">Contacts Us</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 Gautham J
        <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
        </div>
      </div>
    </footer>

此处提供颜色代码 Color codes

Answer 11

您需要使用物化框架。如果您认为级联优先会起作用……请三思。这是 Materialise 需要重新思考的事情。他们不应该覆盖级联样式规则，但我猜他们会使用 JS。需要将 class 添加到要应用颜色的元素。

<span class="blue-text text-darken-2">This is a card panel with dark blue text</span>

在你试图用头撞墙之前，灰色就是灰色。

如何更改页脚的颜色？

How to change color of footer?

html

css

materialize

手动颜色

Material 颜色使用 classes

SASS/SCSS 使用 material classes