Вёрстка по макету из олимпиады. Часть 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.
На финальном шаге проверим сетку на переполнение. Добавим элементы в список с главной навигацией, дополним текст для ссылки с номером телефона.
Сетка прошла испытание на переполнение. Сетка шапки готова.
