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

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

Теперь построим более сложную сетку. В конце у нас получится вот такой результат:

Да, мы повторяем раскладку прошлой версии главной страницы HTML Academy: двухколоночный хедер и контент в три колонки.

На этом шаге создадим сетку хедера. Пока что работаем без содержания.

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

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Сетка посложнее, шаг 1</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"> <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 { 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); border-bottom: 2px dashed #95a5a6; } .header .layout-column-1 { } .header .layout-column-2 { } .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. Задайте первой колонке в .header флоат влево и ширину 280px,
  2. второй колонке в .header флоат вправо и ширину 130px.
  3. Добавьте элементу с классом header класс clearfix.
Теория Проверить Следующее задание
Идёт запись на курс JavaScript, уровень 2 #6, который стартует 6 августа.

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

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

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

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