Как изменить цвет нижнего колонтитула?

Я новичок в HTML и CSS и не могу понять, как я изменяю цвет нижнего колонтитула, который находится в http://materializecss.com/footer.html . любая помощь была бы потрясающей, спасибо!

711   9  

9 ответов:

Класс, содержащий информацию о окраске нижнего колонтитула , является 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>
2  
2016-07-15 05:58:05

Если вы хотите использовать один из материализованных цветов , Вы можете просто добавить red / orange / teal для ваших footer классов вот так: 

<footer class="page-footer pink lighten-1">
1  
2017-01-18 21:28:03

CSS: 

footer {
  background-color: red; 
}
0  
2016-07-15 04:39:29

Я посмотрел на css и обнаружил, что класс окрашивает нижний колонтитул.

footer.page-footer {
    background-color: #333333;
}
0  
2016-07-15 04:40:50

В вашем собственном CSS-документе, который вам нужно будет поместить после материализации.css документ, который вам нужно будет добавить: цвет фона: #fff; в нижний класс. (На #FFF может быть изменена для различных цветов, посетите htmlcolorcodes.com для получения дополнительной информации) Надеюсь, им это поможет...

0  
2016-07-15 04:42:34

Просто выберите тег элемента нижнего колонтитула и поместите на него фон CSS. Например.

footer{background:red;}
0  
2016-07-15 04:48:35

Я попробовал это, и это сработало 

footer.page-footer {
        background-color:hotpink;
    }
0  
2016-07-15 05:23:13

Просто добавьте классы, например, изменив цвет nav ниже: 

 <nav class="teal lighten-2">
0  
2017-11-23 15:21:01

Ручные цвета

Как уже упоминалось, вы можете пройти мимо класса и создать некоторый CSS: 

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

Или назначьте идентификатор для нижнего колонтитула и установите 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. Обратите внимание, что это возможно только в том случае, если вы скачали и @imported SCSS-версию materialize, которая официально имеет и поддерживает.

0  
2018-06-17 17:33:36

Comments

    Ничего не найдено.
Click here to cancel reply.