Сетки / Последняя сетка, шаг 2 [25/32]
×
Курс «Сетки»

Последняя сетка, шаг 2 [25/32]

Блоки с классом layout-positioner добавлены в код. Это невидимые блоки-центровщики. Теперь хедер и футер могут тянуться на всю ширину окна, а их содержимое будет отцентровано с помощью добавленных блоков.

Мы задали голубую рамку для центровщиков, чтобы было видно, как они себя ведут. Также мы добавили им псевдораспорки, поэтому можно удалить класс clearfix из HTML кода.

И еще одна мелочь: класс wrapper уже нигде не используется, поэтому он удалён из CSS. Класс clearfix мы оставили в CSS, т. к. это вспомогательный класс, который может пригодиться при вёрстке.

На этом шаге ваша задача — отцентровать центровщики.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Последняя сетка, шаг 2</title> <meta charset="utf-8"> <link href="//fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css"> </head> <body> <div class="header clearfix"> <div class="layout-positioner"> <div class="layout-column-1 layout-column"> Лого </div> <div class="layout-column-2 layout-column"> Меню </div> </div> </div> <div class="features clearfix"> <div class="layout-positioner"> <div class="layout-column"> Колонка 1 </div> <div class="layout-column"> Колонка 2 </div> <div class="layout-column"> Колонка 3 </div> </div> </div> <div class="footer clearfix"> <div class="layout-positioner"> Футер </div> </div> </body> </html>
CSS
body { min-width: 500px; margin: 0; padding: 0; font-family: "PT Sans", sans-serif; } .clearfix::after { display: table; content: ""; clear: both; } .layout-positioner { border: 2px dashed #3498db; } .layout-positioner::after { display: table; content: ""; clear: both; } .header { margin-bottom: 10px; color: white; background: #34495e; } .header .layout-column { min-height: 50px; background: rgba(192, 57, 43, 0.9); } .header .layout-column-1 { float: left; width: 280px; } .header .layout-column-2 { float: right; width: 130px; } .features { margin-bottom: 10px; } .features .layout-column { float: left; width: 130px; min-height: 100px; margin-right: 20px; background: rgba(236, 240, 241, 0.9); } .features .layout-column:last-child { margin-right: 0; } .footer { min-height: 50px; color: white; background: #34495e; }
HTML Academy
  1. Задайте для .layout-positioner ширину 430px и автоматические горизонтальные отступы.
  2. Удалите лишний класс clearfix у хедера, футера и блока особенностей.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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