如何改变页脚的颜色？

Question

我是HTML和CSS的新手，无法弄清楚我如何更改http://materializecss.com/footer.html上的页脚颜色。 任何帮助都会很棒，谢谢！

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> 

Answer 2

如果您想使用Materialize颜色之一 ，您可以简单地将red / orange / teal添加到您的footer类，如下所示：

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

Answer 3

手动颜色

如前所述，您可以通过该类创建一些CSS：

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

或者为页脚指定ID，并设置background-color 。

使用类的材质颜色

如果要使用材质颜色（请参阅此处的列表），可以使用类，或复制粘贴十六进制值。 如果使用十六进制值，请参阅“手动颜色”下的第一个片段以进行实施。

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

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

例如：

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

（虽然没有必要使用darken-2 ，但这仅仅是一个例子。在这种情况下，我使用了amber darken-2作为颜色）

SASS / SCSS使用材料类

注意： SASS / SCSS需要ruby编译器，并编译为常规CSS。 如果你不使用.scss或.sass ，这是不行的。

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

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

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

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

这使用SASS / SCSS的继承功能。 请注意，只有在您下载并@import编辑了物化的SCSS版本时才能实现这一点 ，而且它正式拥有并支持 。

Answer 4

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

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

颜色代码可在此处颜色代码

Answer 5

CSS：

footer {
  background-color: red; 
}

Answer 6

我看着css，发现这个类着色了页脚。

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

Answer 7

在您自己的CSS文档中，您需要在materialise.css文档之后添加：background-color：#fff; 到页脚课。 （#fff可以更改为不同的颜色访问htmlcolorcodes.com获取更多信息）我希望他们这有帮助...

Answer 8

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

footer{background:red;}

Answer 9

我试过这个并且它有效

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

Answer 10

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

 <nav class="teal lighten-2">

Answer 11

您需要使用materialize框架。 如果您认为级联优先级会起作用......请三思而后行。 这是Materialise需要重新思考的东西。 它们不应该覆盖级联样式规则，但我猜它们与JS有关。 需要将类添加到要应用颜色的元素。

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

在你试图撞到墙上之前，灰色是灰色的。