Как добавить подвал в html
Тег задаёт «подвал» сайта или раздела, в нём может располагаться имя автора, дата документа, контактная и правовая информация.
Синтаксис
Атрибуты
Закрывающий тег
HTML5 IE Cr Op Sa Fx
footer Персональный сайт Кристины Ветровой
Добро пожаловать!
Рада приветствовать вас на своем сайте.
Результат данного примера показан на рис. 1.
Рис. 1. Подвал сайта
Браузеры
Internet Explorer до версии 8.0 включительно игнорирует тег , но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору FOOTER .
Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.
Статьи по теме
- Блочная вёрстка
- Новые теги
- Подвал страницы
- Пять вещей, которые надо знать об HTML5
- Что всё это значит?
Фиксированный подвал
Подвалом на жаргоне веб-разработчиков называется нижняя часть сайта, где пишутся авторские права, публикуются контакты, выводятся разные счетчики и тому подобная информация. Обычно подвал располагается после всего контента и виден только при прокрутке страницы. В некоторых случаях желательно сделать подвал доступным всегда, независимо от высоты страницы, и зафиксировать его внизу окна браузера.
Для этого воспользуемся свойством position и его значением fixed . При этом элемент остается на одном месте, а его положение задается координатами через свойства top , right , bottom , left . В нашем случае достаточно задать нулевые значения у left и bottom . Ширина фиксированных элементов равна их контенту, что хорошо заметно, если добавить фоновый цвет или рисунок, поэтому необходимо также задать ширину через width как 100% (пример 1).
Пример 1. Фиксированный подвал
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Фиксированный подвал
Результат примера показан на рис. 1.
Рис. 1. Подвал внизу страницы
Браузер Internet Explorer 6 не поддерживает значение fixed , поэтому в нем данный пример будет работать некорректно. Для IE6 придется дополнить код двумя тегами , вложив их внутрь контейнеров content и footer , а также включить еще один стиль специально для этого браузера (пример 2).
Пример 2. Код с учетом IE6
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Фиксированный подвал Читать:Что лучше iphone xr или xs
Еще один неприятный момент это наложение фона подвала на полосу прокрутки, так что придется задать отступ справа на ширину скролбара. При этом, если полосы прокрутки нет, в подвале справа будет зиять дыра.
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Как сделать - Фиксированный подвал
Узнать, как создать фиксированный/липкий нижний колонтитул с помощью CSS.
Фиксированный подвал
Создать фиксированный подвал
Пример
Совет: Зайдите на наш учебник CSS Позиция, чтобы узнать больше о позиционировании.
Мы только что запустили
SchoolsW3 видео
ВЫБОР ЦВЕТА
курс сегодня!
Сообщить об ошибке
Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:
Ваше предложение:
Спасибо Вам за то, что помогаете!
Ваше сообщение было отправлено в SchoolsW3.
ТОП Учебники
ТОП Справочники
ТОП Примеры
Получить сертификат
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.
Как сделать подвал в html
Для создания подвала на веб-странице в HTML можно использовать тег . Этот тег помещается внутри тега и содержит информацию о различных дополнительных элементах на странице, таких как контактная информация, ссылки на социальные сети, авторские права и т.д.
Пример кода для создания простого подвала:
Контактная информация: phone@mail.ru Авторские права © 2023
В данном примере тег содержит два абзаца с контактной информацией и информацией об авторских правах. Оформление подвала может быть изменено с помощью CSS, добавив соответствующие стили.
Предыдущая запись