ZorNet.Ru — сайт для вебмастера » HTML и CSS » Адаптивный нижний колонтитул на CSS

Адаптивный нижний колонтитул на CSS

Стильно по дизайну создан низ сайта, который идет в адаптивной верстке под все мобильные аппараты, где представлена информация в компактном виде. В представленном материале узнаете, как правильно использовать flexbox для создания гибкого, многоуровневого нижнего колонтитула, который прилипает к нижней части страницы, где корректно смотрится, как на большом мониторе, так на небольшом экране аппарата.

На каждом сайте есть свой низ сайта, и где-то он занимает очень большую роль, так как на нем размещают нужную информацию. Такую как обратная связь или самые топовые разделы для гостей и пользователей, что по одному клику вы переходите на нужную категорию. Но главное это безусловно, как выполнен низ по своему стилю.

Этот вариант вы вероятно встречали, так как по своему формату он отлично встраивается на софт порталы или интернет магазины. Как можно заметить, что почти в самом низу по центру располагаются социальные кнопки, которые подключены для вывода на Font Awesome шрифте, что идет на тематические значки. И если у вас они не подключены, то просто проходим по ссылке и там вы разберетесь по их размещению, ведь это не так сложно.

Проверено на тестовой площадке, где после установки так выглядит по строению:

Как сделать фиксированный липкий нижний колонтитул

Flexbox позволяет создавать гибкие макеты, которые естественным образом адаптируются к различным размерам области просмотра. Многоуровневые, многоколонные нижние колонтитулы являются хорошим примером использования уникальных возможностей flexbox, а именно:

- flex-grow: позволяет не придерживаться колонтитула в нижней части страницы;
- flex-wrap: столбцы автоматически завернуть на основе размера окна просмотра;
- justify-content: отображать столбцы в различных механизмах, как space-around и так далее;

Самым большим преимуществом нижних колонтитулов flexbox является то, что вы можете использовать различные правила переноса, определения размера и выравнивания для каждого уровня. В результате вы можете сохранить нижний колонтитул полностью осведомленным о содержимом без использования JavaScript или CSS @media запросов.

Установочный процесс:

HTML

Код

<div class="nizhniy-kolontitul"></div>
<footer>
  
  <section class="adaptivnym-dizaynom">
  <div class="adaptivnym-dizaynom-item">
  <h2 class="korinasan-elementa">Zornet.Ru</h2>
  <ul>
  <li><a href="#">Скрипты</a></li>
  <li><a href="#">Шаблоны</a></li>
  <li><a href="#">Стили</a></li>
  <li><a href="#">Дизайн</a></li>
  <li><a href="#">Контакты</a></li>
  </ul>
  </div>
  <div class="adaptivnym-dizaynom-item">
  <h2 class="korinasan-elementa">Разделы</h2>
  <ul>
  <li><a href="#">Статьй</a></li>
  <li><a href="#">Блог</a></li>
  <li><a href="#">Файлы</a></li>
  <li><a href="#">Форум</a></li>
  </ul>
  </div>
  <div class="adaptivnym-dizaynom-item">
  <h2 class="korinasan-elementa">Связь</h2>
  <ul>
  <li><a href="#">Вконтакте</a></li>
  <li><a href="#">Facebook</a></li>
  <li><a href="#">Портал</a></li>
  </ul>
  </div>
  <div class="adaptivnym-dizaynom-item">
  <h2 class="korinasan-elementa">Оставаться в курсе</h2>
  <p>Подпишитесь на нашу рассылку для новости.</p>
  <form>
  <input type="email" name="email" placeholder="Enter email address">
  <input type="submit" value="Subscribe">
  </form>
  </div>
  </section>

  
  <section class="nedsav-kulopan">
  <ul class="vekenim-nizhn-kolontul">
  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
  <li><a href="#"><i class="fa fa-twitter"></i></a></li>
  <li><a href="#"><i class="fa fa-instagram"></i></a></li>
  <li><a href="#"><i class="fa fa-github"></i></a></li>
  <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
  <li><a href="#"><i class="fa fa-youtube"></i></a></li>
  </ul>
  </section>

  
  <section class="kesanuc-sulovelus">
  <ul class="sulovan-lipkiв-nisayta">
  <li><a href="#">Термины & условия</a></li>
  <li><a href="#">Конфиденциальность</a></li>
  <li>© 2019 Copyright Nowrap Inc.</li>
  </ul>
  </section>
</footer>

CSS

Код

/* Общий стиль */
* {
  box-sizing: border-box;
  font-family: "Lato", sans-serif;
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
  padding-left: 0;
}
footer {
  background-color: #555;
  color: #bbb;
  line-height: 1.5;
}
footer a {
  text-decoration: none;
  color: #eee;
}
a:hover {
  text-decoration: underline;
}
.korinasan-elementa {
  color: #fff;
  font-family: "Merriweather", serif;
  font-size: 1.375rem;
  padding-bottom: 0.625rem;
}
/* Придерживает нижний колонтитул */
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.nizhniy-kolontitul {
  flex: 1;
}
/* Основной нижний колонтитул */
.adaptivnym-dizaynom {
  padding: 1.25rem 1.875rem;
  display: flex;
  flex-wrap: wrap;
}
@media only screen and (min-width: 29.8125rem ) {
  .adaptivnym-dizaynom {
  justify-content: space-evenly;
  }
}
@media only screen and (min-width: 77.5rem ) {
  .adaptivnym-dizaynom {
  justify-content: space-evenly;
  }
}
.adaptivnym-dizaynom-item {
  padding: 1.25rem;
  min-width: 12.5rem;
}

/* Нижний колонтитул | Форма рассылки */
form {
  display: flex;
  flex-wrap: wrap;
}
input[type="email"] {
  border: 0;
  padding: 0.625rem;
  margin-top: 0.3125rem;
}
input[type="submit"] {
  background-color: #00d188;
  color: #fff;
  cursor: pointer;
  border: 0;
  padding: 0.625rem 0.9375rem;
  margin-top: 0.3125rem;
}
/* Нижний колонтитул */
.nedsav-kulopan {
  padding: 0 1.875rem 1.25rem;
}
.vekenim-nizhn-kolontul {
  display: flex;
  justify-content: center;
  border-top: 1px #777 solid;
  padding-top: 1.25rem;
}
.vekenim-nizhn-kolontul li {
  margin: 0.5rem;
  font-size: 1.25rem;
}

.kesanuc-sulovelus {
  padding: 0.9375rem 1.875rem;
  background-color: #333;
}
.sulovan-lipkiв-nisayta {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.sulovan-lipkiв-nisayta li {
  margin: 0.125rem 0.625rem;
  white-space: nowrap;
}

.sulovan-lipkiв-nisayta li:nth-last-child(2) {
  flex: 1;
}

Хотя также возможно создать нижний колонтитул с помощью CSS-сетки, где flexbox позволяет нам создавать несколько уровней нижнего колонтитула друг над другом, где каждый уровень переносится независимо.

Используя приемы, которые представленные в этом руководстве, вы можете создать любой макет нижнего колонтитула с любым количеством уровней и столбцов, где автоматически трансформируются при просмотре с разных гаджет.

Демонстрация

08 Августа 2019 Загрузок: 2 Просмотров: 1152 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0