Условие
В style.css оформите шапку .header: логотип слева, меню по центру, кнопка справа. Пункты меню стоят в ряд с отступом между ними. У вас должно получиться так же, как во вкладке «Результат» - смотрите там конкретный итог задания.
Что в HTML — какой класс отвечает за что
Разметка уже готова во вкладке index.html. Менять её не нужно — только стили. Какой класс отвечает за шапку, Logo, меню и кнопку:
-
.headerвся шапка (горизонтальный ряд) -
.logoлоготип Logo слева -
.menuменю («О нас», «Контакты») по центру -
.btnкнопка Войти справа
Что нужно сделать
- Сделайте шапку
.headerгоризонтальным рядом элементов. - Поставьте меню по центру между логотипом и кнопкой.
- Прижмите кнопку к правому краю шапки.
Подсказка для новичка
Меню должно занять свободное место и центрировать свои ссылки; кнопка уезжает вправо отдельно. Имена свойств - в «Дополнительной информации».
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Logo · меню по центру · кнопка справа
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Свойства этой задачи
<!DOCTYPE html>- документ HTML5.<html lang="ru">- корень;lang="ru"- язык русский.<head>/<meta charset="UTF-8" />/<title>/<link rel="stylesheet" href="style.css" />- шапка и стили.<body>- видимое содержимое.<div class="header">- шапка: логотип, меню, кнопка.<div class="logo">- текст Logo слева.<nav class="menu">- навигация; внутри<span>«О нас» и «Контакты».<button class="btn" type="button">- кнопка «Войти»; атрибутtype="button".display: flex,align-items,justify-content,gap,flex: 1,margin-left: auto- раскладка шапки.
Слева два файла: style.css (здесь решаете задание) и index.html (готовая разметка, менять не нужно). Ниже - разбор стилей и важных деталей задачи.
Файл style.css - что уже написано
В старте стилизованы
.header,
общий размер шрифта для
.logo, .menu span, .btn,
цвет пунктов
.menu span
и вид кнопки
.btn.
Flex-раскладки ещё нет - элементы идут обычным потоком.
Правило .header
-
width: 480px/height: 64px- размер шапки. -
background: #1e293b/border: 2px solid #0f172a- тёмный фон и рамка. -
color: #fff,font-family: Arial, sans-serif,font-weight: 700- белый жирный текст. -
В решении добавляют:
display: flex,align-items: center(вертикальный центр),padding: 0 16px(отступы слева/справа),gap: 12px(зазор между logo, menu и btn).
Правила .logo, .menu, .btn
-
.logo, .menu span, .btn { font-size: 14px }- одинаковый размер шрифта. -
.menu span { color: #cbd5e1 }- светло-серый цвет пунктов меню. -
.btnуже имеетpadding: 8px 12px,background: #2563eb,color: #fff,border: none. -
Для меню в решении создают правило
.menu:display: flex,gap: 16px(между «О нас» и «Контакты»),flex: 1(занять свободное место между логотипом и кнопкой),justify-content: center(пункты по центру этой растянутой зоны). -
У
.btnдобавляютmargin-left: auto- прижать кнопку к правому краю flex-ряда.
Идея раскладки
Шапка - горизонтальный flex. Меню с
flex: 1
растягивается и центрирует пункты внутри себя. Кнопка с
margin-left: auto
уезжает вправо. Итог: Logo слева, меню по центру шапки, «Войти» справа.
Коротко:
flex у
.header
и
.menu,
у меню -
flex: 1
+
justify-content: center
+
gap: 16px,
у кнопки -
margin-left: auto.
Сверьте с вкладкой
«Результат».