Знакомство с HTML5 / Основное содержание. Тег main [2/19]
×

Основное содержание. Тег main [2/19]

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

Хедер — это не только привычная шапка сайта с логотипом и меню, он может использоваться и как «шапка» какой-нибудь статьи или раздела сайта. Конечно, в случае со статьёй хедер называют не «шапкой», а вводной частью, в которой могут содержаться заголовки, оглавление и так далее.

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

А раз теги неуникальные, то и стилизовать их лучше с помощью классов, как мы и сделали.

Если вы не хотите использовать классы для шапки и подвала сайта, то можете использовать селекторы body > header и body > footer. Эти селекторы не повлияют на хедеры и футеры, вложенные более глубоко.

Другое дело новый тег <main>, который обозначает основное содержание сайта и по спецификации может использоваться на странице только один раз. Для его стилизации никакие классы не нужны.

Кстати, загляните в CSS и посмотрите, как сделаны фоны для основных блоков. В хедере и футере мы использовали линейные градиенты, которые детально разберём в более позднем курсе. А фоновую картинку для основного содержания мы задали с помощью так называемого data:URI, закодировав изображение прямо в CSS-коде. Это одна из продвинутых техник оптимизации вёрстки.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Основное содержание. Тег main</title> <meta charset="utf-8"> </head> <body> <header class="page-header"> Хедер </header> <footer class="page-footer"> Футер </footer> </body> </html>
CSS
html, body { margin: 0; padding: 0; color: white; background-color: #2c3e50; } /* Header */ header.page-header { position: relative; z-index: 5; min-height: 20px; padding: 20px; color: white; background-image: linear-gradient(45deg, #34495e 25%, transparent 25%), linear-gradient(-45deg, #34495e 25%, transparent 25%), linear-gradient(135deg, #34495e 25%, transparent 25%), linear-gradient(-135deg, #34495e 25%, transparent 25%); background-position: 10px 0, 10px 0, 0 0, 0 0; background-size: 20px 20px; box-shadow: 0 0 5px 0 #333333; } /* Main */ main { display: block; /* для страховки, очень новый элемент */ min-height: 200px; padding-top: 50px; color: black; background-color: white; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAMAAAApB0NrAAAABlBMVEX///+pqalTpKl9AAAAAnRSTlMAGovxNEIAAAAdSURBVDjLY2AAAUaG4UYxDDsfjfp91O+jfqfE7wCzpQCw/dq+qQAAAABJRU5ErkJggg=="); } /* Footer */ footer.page-footer { min-height: 50px; padding: 20px; font-size: 14px; color: black; background-color: #f1c40f; background-image: linear-gradient(45deg, transparent 50%, white 50%), linear-gradient(-45deg, transparent 50%, white 50%), linear-gradient(135deg, transparent 50%, #2c3e50 50%), linear-gradient(-135deg, transparent 50%, #2c3e50 50%); background-repeat: repeat-x; background-position: 0 0, 0 0, 0 100%, 0 100%; background-size: 10px 12px; }
HTML Academy
  1. Добавьте между хедером и футером элемент main c текстом Основное содержание.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.