如何改變頁腳的顏色？

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>

在你試圖撞到牆上之前，灰色是灰色的。