手动颜色

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>

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

＆＃13;

#myFooter {
  background-color: blue;
}

＆＃13;

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

＆＃13;

Answer 2

如果您想使用其中一个Materialize colors，只需将red / orange / teal添加到footer类，如下所示：< / p>

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

Answer 3

手动颜色

如前所述，您可以在课堂上创建一些CSS：

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

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

使用类

的材质颜色

如果要使用材质颜色（请参阅列表here），可以使用类，或复制粘贴十六进制值。如果您使用十六进制值，请参阅＆＃34;手动颜色＆＃34;下的第一个片段。实施。

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

<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版本it does officially have and support后才能实现此目的。

Answer 4

CSS：

footer {
  background-color: red; 
}

Answer 5

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

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

Answer 6

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

Answer 7

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

footer{background:red;}

Answer 8

我试过这个并且有效

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

Answer 9

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

 <nav class="teal lighten-2">

Answer 10

只需将所需颜色的颜色代码添加到页脚类中例子

<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

您需要使用实例化框架。如果您认为级联优先有效，请三思。这是实现需要重新考虑的事情。它们不应覆盖级联样式规则，但我想它们与JS兼容。需要将类添加到要应用颜色的元素。

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

在尝试将头撞到墙上之前，灰色为灰色。

如何改变页脚的颜色？

11 个答案:

手动颜色

使用类

使用材料类