Знакомство с CSS / Создание сетки страницы [7/15]
×

Создание сетки страницы [7/15]

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

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

В этом задании мы создадим простейшую раскладку из двух колонок. А в курсе «Сетки» рассмотрим приёмы создания сеток и потренируемся строить более сложные раскладки страниц.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Создание сетки страницы</title> </head> <body> <div class="header">Логотип и меню</div> <div class="left-column">Основное содержание страницы</div> <div class="right-column">Боковая колонка</div> <div class="footer">Подвал</div> </body> </html>
CSS
div { margin-bottom: 15px; padding: 10px 25px 10px 25px; background-color: #dff0d8; } .left-column { width: 50%; min-height: 100px; background-color: #fcf8e3; } .right-column { width: 25%; min-height: 100px; background-color: #d9edf7; } .footer { }
HTML Academy

Завершим сетку страницы:

  1. Добавьте в CSS-правило для класса left-column свойство float: left;.
  2. В CSS-правило для right-column свойство float: right;.
  3. В CSS-правило для footer свойство clear: both;.

Используемые свойства детально разобраны в курсе «Сетки».

Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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