Урок посвящен созданию футера (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 для иконок.