Условие
В index.html соберите два списка: нумерованный под заголовком «Маршруты» с пунктами «Пирс А», «Пирс Б», «Пирс В» и маркированный под «Сервисы» с пунктами «Карта», «Касса», «Кафе». Внутри списков - только пункты списка. CSS уже готов. Ориентир - вкладка «Результат».
Что нужно сделать
- Добавьте заголовок «Маршруты» и нумерованный список из трёх пирсов (3 пункта).
- Добавьте заголовок «Сервисы» и маркированный список из трёх сервисов (3 пункта).
- Проверьте, что внутри списков только пункты списка.
Подсказка для новичка
Пишите код под комментарием «Пишите код здесь». Чем нумерованный список отличается от маркированного - в Дополнительной информации и во вкладке «Результат».
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Три пирса и три пункта меню
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Теги и свойства этой задачи
<!DOCTYPE html>- документ HTML5.<html lang="ru">- корень страницы;lang="ru"- язык русский.<head>- служебная часть: кодировка,<title>, подключение CSS.<meta charset="UTF-8" />- кодировка текста.<title>- текст на вкладке («ListDock»).<link rel="stylesheet" href="style.css" />- подключениеstyle.css.<body>- видимое содержимое; сюда пишете заголовки и списки.<h2>- заголовок секции. Тексты: «Маршруты» и «Сервисы».<ol>- упорядоченный (нумерованный) список. Пункты: Пирс А, Пирс Б, Пирс В (3 пункта).<ul>- неупорядоченный список (маркеры). Пункты: Карта, Касса, Кафе (3 пункта).<li>- пункт списка. Внутриolиulиспользуйте толькоli.font-family,margin,background,color,font-size,padding-left- уже есть в стартовом CSS.
Слева два файла: index.html (здесь решаете задание) и style.css (готовые стили, менять не нужно). Ниже - разбор стилей и списков.
Файл style.css - что уже написано
В стартовом
style.css
четыре блока правил:
body { ... },
h2 { ... },
ol, ul { ... }
и
li { ... }.
CSS менять не нужно - он уже оформляет заголовки и списки, которые вы добавите в HTML.
Правило body
-
font-family: Arial, sans-serif- шрифт текста: сначала Arial, если его нет - любой рубленый (sans-serif). -
margin: 16px- внешний отступ со всех сторон у страницы: 16 пикселей (чтобы контент не прилипал к краю). -
background: #f8fafc- цвет фона страницы: светло-серый (#f8fafcв формате HEX). -
color: #0f172a- цвет текста по умолчанию: тёмно-синий (#0f172a).
Правило h2
-
margin: 0 0 8px- внешний отступ: сверху и по бокам 0, снизу 8px (зазор перед списком). -
font-size: 18px- размер шрифта заголовка секции: 18 пикселей.
Правило ol, ul
-
margin: 0 0 16px- внешний отступ снизу 16px между блоками списков. -
padding-left: 24px- внутренний отступ слева: место под номера и маркеры пунктов.
Правило li
-
margin-bottom: 4px- небольшой зазор между пунктами списка (4 пикселя снизу у каждогоli).
Списки - зачем это нужно
Списки помогают оформить однотипные пункты: маршруты по порядку или сервисы без нумерации.
Браузер сам рисует номера у
ol
и маркеры у
ul.
-
<ol>- когда важен порядок (1, 2, 3): «Пирс А», «Пирс Б», «Пирс В». -
<ul>- когда порядок не важен: «Карта», «Касса», «Кафе». -
Внутри списка только
<li>- не вставляйте туда обычный текст без пункта. -
Перед каждым списком поставьте
<h2>с названием секции.
Коротко:
в
index.html
добавьте
h2
«Маршруты» +
ol
и
h2
«Сервисы» +
ul
с нужными
li.
CSS уже готов:
body
задаёт шрифт, отступ и фон,
h2
- размер заголовка,
ol /
ul
- отступы списков,
li
- зазор между пунктами. Сверьте вид с вкладкой
«Результат».