Лабораторные работы / Лабораторная работа 5

Лабораторная работа 5 Тема: Создание сеток

Задание: создайте сетки для главной и внутренней страниц сайта «Графомания». В этой лабораторной работе вы продолжаете работать с файлом style.css.

Подготовка к лабораторной работе:

Перед выполнением лабораторной работы рекомендуется пройти курсы на сайте htmlacademy.ru:

Построение сеток. Блочная модель документа.

Сетки.

Флексбокс. Знакомство.

Флексбокс. Погружение.

Переходим к созданию сетки главной страницы «Барбершопа».

Для удобства сеточные стили мы будем добавлять отдельно. В будущем все стилевые правила мы объединим.

Начнем с оформления шапки сайта.

1. На рисунке выделена область, которую мы определили как шапку. Видно, что шапка тянется на всю ширину страницу. На самом деле у нас уже этот элемент тянется на всю ширину. Это стандартное поведение блочного элемента. Остается добавить нижний отступ. Добавим элементу с классом main-header нижний отступ до следующего сеточного элемента равный 75px (размер берем из макета).

2.Логотипу зададим высоту и ширину. Убедимся, что у списков сброшены дефолтный стили и отступы.

3.Логотип должен остаться в потоке, но переместиться после списков. Для этого делаем из main-navigation флекс-контейнер.

4.Изменим направление основной оси в main-navigation, чтобы элементы располагались вертикально.

5. Перемещаем логотип в конец контейнера с помощью правила order.

6.Логотип должен центроваться, поэтому задаем выравнивание элементов по центру внутри флекс-контейнера.

7.Зададим блокам site-navigation и user-navigation ширину.

8.На макете видно, что блоки меню должны быть расположены по центру на одной строке. Для того что бы добиться этого выполним следующие шаги. Добавим дополнительную обертку. Она должна тянуться на всю ширину, иметь черный фон и содержать в себе список с меню и список с пользовательским входом. Добавим такую обертку в разметку. Используйте для обертки тег div с классом main-navigation-wrapper.

Задаем обертке ширину 100%, внешний нижний отступ до логотипа и черный фон, как в макете.

Для того чтобы расположить блоки меню по центру используем еще одну обертку, так называемый центровщик. Добавим в разметку обертку с классом container.Используем стандартный способ расположения блока по центру - центровку с помощью внешних отступов margin: 0 auto. Зададим блоку фиксированную ширину и небольшие внутренние отступы.

Далее делаем новую обертку для списков в шапке сайта флексконтейнером. Чтобы списки расположились равномерно, как в макете, задаем правило justify-content: space-between. Шапка готова!

9.Приступим к основному контенту страницы. Списку преимуществ обнуляем внешние и внутренние отступы. Убедитесь что сброшены дефолтные стили для списка.

10.Задаем преимуществам ширину.

11.Сделаем список преимуществ флекс-контейнером, чтобы расположить дочерние элементы как на макете.

12.Распределим элементы списка равномерно используя свойство justify-content: space-between.

13.Зададим разделу преимуществ нижний отступ, чтобы разделы не

слипались.

14.Приступим к блоку index-columns, который содержит разделы новости, фотогаллерея. Добавляем index-columns внутренние отступы со всех сторон.

15.Галерее и новостям задаем фиксированную ширину.

16.Делаем index-columns флекс-контейнером и задаем равномерное распределение элементов вдоль главной оси.

17.Для контактов и формы записи также задаем фиксированную

ширину.

18.Добавляем index-columns внешний нижний отступ, чтобы создать расстояние между разделами.

19.Приступим к оформлению сетки подвала.

20.Задаем разделу верхний внешний отступ от основного контента

страницы.

21.Для раздела с контактами и копирайтом сбрасываем внешние

отступы.

22.Задаем родительскому элементу (main-footer) внутренние отступы до содержимого.

23.Чтобы расположить элементы, как в макете, необходимо добавить обертку, которая будет служить контейнером для разделов контактов, социальных сетей и копирайта.

24.Задаем каждому разделу фиксированную ширину.

25.Сделаем обертку флекс-контейнером.

26.Зададим внешний отступ справа разделу с контактами, а разделу копирайта зададим автоматический внешний отступ слева.

На этом оформление крупных смысловых блоков завершено. Далее ваша задача самостоятельно создать сетки внутренней страницы сайта «Графомания».