Списки внутри списка
Итак, вы поняли, как работают нумерованные и маркированные
списки. Отличная работа!
Но что делать, если у вас есть нумерованный список каждый элемент,
которого содержит маркированный список, вложенный в него? Т.е. под каждым
пунктом нумерованного списка имеется маркированный список. В редакторе есть
небольшой пример. Нажмите запустить, чтобы увидеть результат.
Помните: мы уже говорили о вложении тегов. Главное помнить,
что последний открытый тег должен закрываться первым. Например:
<ul><li>
Тако!</li></ul>
задание
1. В строке 21 создайте маркированный список
2. Ваш маркированный список должен содержать два пункта “Любимые мужские имена” и “Любимые женские имена”
3. Под каждым пунктом маркированного списка создайте нумерованный список и укажите по три любимых имени мальчика и девочки. Используйте пример вложения тегов выше чтобы это сделать.
подсказка
Попробуйте сохранить отступы аккуратными и опрятными как в примере. Это поможет вам не запутаться в вашем html коде.
a. начните с создания <ul> и </ul> тегов
b. затем используйте теги <li> для создания маркированных пунктов связанных с любимыми именами мальчиков и девочек
c. потом под каждым из пунктов создайте нумерованные списки под соответствующими тегами <li> при помощи тега <ol>. Примечание: не следуюет закрывать <li> перед тем как закрывать и открывать <ol>
Вот пример:
<ul>
<li></li>
<ol>
<li></li>
</ol>
<li></li>
<ol>
<li></li>
<li></li>
</ol>
<li></li>
</ul>
решение
<!DOCTYPE html>
<html>
<head>
<title>Nested lists</title>
</head>
<body>
<ol>
<li>Dad's interests
<ul>
<li>football</li>
<li>knitting</li>
</ul>
</li>
<li>Mom's interests
<ul>
<li>hating football</li>
<li>skydiving</li>
</ul>
</li>
</ol>
<ul>
<li>Любимые мужские имена</li>
<ol>
<li>Вася</li>
<li>Петя</li>
<li>Жора</li>
</ol>
<li>Любимые женские имена</li>
<ol>
<li>Оля</li>
<li>Юля</li>
<li>Ира</li>
</ol>
</ul>
</body>
</html>
Комментариев нет :
Отправить комментарий