Футер (footer) – важная часть сайта. Начнём его создание с написания комментариев – это важная практика в программировании, особенно при командной работе.
Стиль футера
Создадим класс footer. Для него установим следующие стили:
- float: left;
- width: 100%;
- background-color: #989898; (коричневый цвет)
- padding-top: 10px; (верхний отступ 10 пикселей)
Контент и разметка футера
В футере разместим: текст «Все права защищены», знак копирайта (©) и текущий год. Для динамического отображения года используем getFullYear(). Пример кода:
document.write("© " + new Date().getFullYear());Вместо document.write() можно использовать другой способ вывода данных, в зависимости от используемых технологий.
Расположение элементов и стили текста
Для элемента footer установим:
- width: 50%;
Текст в футере будет белого цвета (color: white;) и размером 1.1em. Исправлена ошибка: удалено дублирующее объявление float: left; из стилей футера.
Добавление социальных кнопок
Добавим ссылки на социальные сети (VK, Facebook, Twitter). Для каждой ссылки создадим кнопку с соответствующей иконкой (иконки можно скачать, например, с Iconfinder). Иконки будут круглыми.
Для стилизации социальных кнопок добавим класс footer_social_media. Установим для него:
- width: 50px;
- height: auto;
- margin-bottom: 5px; (отступ снизу для выравнивания кнопок)
Мы создали футер сайта, включающий текст «Все права защищены», знак копирайта с текущим годом и ссылки на социальные сети. Дизайн можно изменить по своему желанию. Это пример, который можно модифицировать под свои нужды.