Разметка текста / Многоуровневый список [5/17]
×

Многоуровневый список [5/17]

Создать многоуровневый список достаточно просто.

Сначала нужно создать список первого уровня, а затем внутрь любого элемента этого списка, между тегами <li> и </li>, добавить список второго уровня. При этом необходимо аккуратно закрывать все теги.

Пример правильного кода:
<ul>
  <li>1
    <ul>
      <li>1.1</li>
      <li>1.2</li>
    </ul>
  </li>
  <li>2</li>
</ul>
Пример кода с ошибкой:
<ul>
  <li>1</li>
  <ul>
    <li>1.1</li>
    <li>1.2</li>
  </ul>
  <li>2</li>
</ul>

В примере с ошибкой вложенный список вставлен не внутрь элемента списка, а между элементами, что недопустимо.

Количество уровней в списках не ограничено. В многоуровневом списке можно использовать как упорядоченные, так и неупорядоченные списки.

В этом задании мы потренируемся работать с многоуровневыми списками.

Хотите верстать адаптивно, использовать БЭМ и LESS? Тогда записывайтесь на наш продвинутый интенсив.

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Многоуровневый список</title> </head> <body> <h1>Разделы курса</h1> <ol> <li> Теги заголовков <ol> <li>h1</li> <li>h2</li> <!-- добавьте элементы вложенного списка для первой цели сюда --> </ol> </li> <li> Теги списков <!-- добавьте вложенный список для второй цели сюда --> </li> <li>Теги форм</li> </ol> </body> </html>
CSS
HTML Academy
  1. Добавьте ещё два пункта во вложенный список «Теги заголовков».
  2. Добавьте в пункт «Теги списков» неупорядоченный вложенный список из двух пунктов.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.