Вёрстка по макету из олимпиады. Часть 2
Это вторая часть курса про вёрстку макета из студенческой олимпиады по фронтенду от HTML Academy и Яндекса. В ней мы построим сетку шапки и проверим её на переполнение в соответсвии с макетом. Вот графический макет компонента.
В первой части мы сделали разметку и базовую стилизацию шапки. Продолжаем с этого состояния.
Обнулим внешние отступы для body
. Так мы переопределим браузерные стили и прижмём элементы внутри body
к краям окна браузера.
Установим минимальное значение для ширины шапки header
, чтобы на узких экранах сетка «не ломалась» и не возникал эффект обрезания фона. Значение 1440px
мы взяли из макета.
Кстати, вы можете установить масштаб x0.5
в мини-браузере, чтобы удобнее видеть изменения на странице.
Добавим внутренние отступы для header
. Значения для полей мы также получили из макета.
Сейчас и далее рекомендуем вам открыть графический макет и искать там значения, которые мы переносим в код. Это будет максимально полезно.
Есть два основных подхода к вёрстке. Олдскульный подход — верстать с box-sizing: content-box
(его используют суровые профессионалы). Молодёжный подход — верстать с box-sizing: border-box
.
В этой реализации мы используем подоход с box-sizing: border-box
. Ведь олимпиада-то студенческая!
Добавим правило для обёртки .header__wrap
. Установим ограничение по ширине. Значение ширины элемента явно не указано в макете, но его можно вычислить, например, из ширины шапки вычесть размеры полей слева и справа (1440 - 75 - 75 = 1290
).
Добавим выравнивание по центру с помощью автоматических внешних отступов.
Чтобы разместить элементы внутри обёртки .header__wrap
, используем гриды. Определим три колонки шириной 275 пикселей
, 740 пикселей
и 275 пикселей
.
Добавим выравнивание внутри грида.
Поработаем с элементами внутри шапки. Зададим ширину и высоту для логотипа. Для этого создадим правило с селектором .header__logo-link
.
Для изображения установим CSS-свойство display
в значение block
, чтобы убрать лишнее пространство под картинкой.
Сбросим стили по умолчанию для списка header__list
. Сразу установим нужные значения для CSS-свойства padding
. По макету сверху и снизу у списка поля по 10 пикселей, по бокам — 30 и 42 пикселя. Помним, что у нас есть ограничение для ширины списка — 740px
. Можно поле справа немного уменьшить и указать равным полю слева. Получим, что padding
равен 10px 30px
.
Чтобы выстроить элементы внутри списка используем флекс. Разрешим перенос элементов на следующую строку.
Добавим расстояния между элементами списка. По макету между элементами 30 пикселей, между рядами — 20 пикселей. Установим gap
равным 20px 30px
.
Зададим выравнивание внутри флекс-контейнера.
Элементы списка также сделаем флекс-контейнерами. Это нам упростит стилизацию ссылок.
Сбросим внешние отступы у элемента .header__phone
.
На финальном шаге проверим сетку на переполнение. Добавим элементы в список с главной навигацией, дополним текст для ссылки с номером телефона.
Сетка прошла испытание на переполнение. Сетка шапки готова.