Сетки / Сетка посложнее, шаг 2 [21/32]
×
Курс «Сетки»

Сетка посложнее, шаг 2 [21/32]

Обратите внимание на способ именования классов: колонки имеют класс layout-column.

Префикс layout обозначает «сетка» или «раскладка». Таким образом, мы даём понять, что классы с этим префиксом предназначены для создания сетки. Обычно для таких классов задают только флоаты, размеры и внешние отступы.

Использование значимых префиксов для именования классов — хороший приём. Используйте его в своей вёрстке.

На втором шаге мы создадим колонки содержания.

Хотите писать JavaScript, используя современный синтаксис (ES2015, ES2016, ES2017)? Уметь тестировать свои программы? Записывайтесь на продвинутый интенсив по JavaScript.

Выполнить задание
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="wrapper"> <div class="header clearfix"> <div class="layout-column layout-column-1"> Лого </div> <div class="layout-column layout-column-2"> Меню </div> </div> <div class="features"> <div class="layout-column"> Колонка 1 </div> <div class="layout-column"> Колонка 2 </div> <div class="layout-column"> Колонка 3 </div> </div> <div class="footer"> Футер </div> </div> </body> </html>
CSS
body { margin: 0; padding: 0; font-family: "PT Sans", sans-serif; } .wrapper { width: 430px; margin: 0 auto; box-shadow: 0 0 2px #cccccc; } .clearfix::after { content: ""; clear: both; display: table; } .header { margin-bottom: 10px; color: white; background: #34495e; } .header .layout-column { min-height: 50px; background: rgba(192, 57, 43, 0.9); border-bottom: 2px dashed #95a5a6; } .header .layout-column-1 { float: left; width: 280px; } .header .layout-column-2 { float: right; width: 130px; } .features { margin-bottom: 10px; } .features .layout-column { min-height: 100px; background: rgba(236, 240, 241, 0.9); border-bottom: 2px dashed #95a5a6; } .footer { min-height: 50px; color: white; background: #34495e; }
HTML Academy
  1. Задайте для колонок внутри .features флоат влево и ширину 130px.
  2. Добавьте элементу с классом features класс clearfix.
Теория Проверить Следующее задание
Идёт запись на курс JavaScript, уровень 2 #6, который стартует 6 августа.

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

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

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

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