HTML Футер: Создаем и стилизуем (Урок 3/2)

Урок посвящен созданию футера (footer) для сайта. Добавим футер в нижнюю часть страницы и стилизуем его.

Прикрепление футера к низу сайта

Перед стилизацией необходимо прикрепить футер к низу сайта. Создадим несколько новых тегов div:

  • Внешний div с классом (или id) wrapper.
  • Внутренний div с id content, содержащий весь контент сайта. Этот div закрывается после шапки.
  • wrapper закрывается после футера.

Структура:

<div id="wrapper">
  <div id="content">
    <!-- весь контент сайта -->
  </div>
  <!-- футер -->
</div>

Для корректного позиционирования футера добавим стили:

  • height: 100% для html и body. Без этого футер не прикрепится к низу.
  • display: flex, flex-direction: column и height: 100% для wrapper. Это создаст гибкий контейнер, занимающий всю высоту страницы и выравнивающий элементы по вертикали.

Создание структуры футера

Создадим div с id site-footer для футера. Внутри разместим:

  • span с id site-name для названия сайта или девиза (например, «Сообщество программистов»).
  • div с id footer-menu для меню футера (например, ссылки «Узнать детальнее про рекламу»).
  • div с id copyright для информации об авторских правах (например, «Все права защищены © 2016»). Будет содержать текущий год (<span id="year"></span>).
  • div с id social для ссылок на социальные сети (Facebook, Twitter, YouTube).

Стилизация футера

Для стилизации используем CSS. Добавим стили для:

  • site-name: text-align: right, цвет, размер шрифта.
  • footer-menu: display: flex, justify-content: flex-start, цвет ссылок, размер шрифта, отступы. Эффекты при наведении курсора (изменение цвета, границы). Адаптивность для мобильных устройств (@media (max-width: 520px)).
  • copyright: text-align: left, отступы, цвет, размер шрифта.
  • social: text-align: right, отступы. Стилизация иконок социальных сетей (круглые иконки с помощью border-radius: 50%, фон, цвет иконок). Адаптивность для мобильных устройств.

Для иконок социальных сетей используем Font Awesome. Необходимо загрузить его файлы (.css, fonts) и подключить .css файл в HTML.

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

Что будем искать? Например,программа