Многоуровневый список с автоматической нумерацией (CSS)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Вложенный список</title>
<style type="text/CSS">
LI { list-style-type: none; } /* Убираем исходную нумерацию */
OL { counter-reset: list1; } /* Инициируем счетчик */
OL LI:before {
counter-increment: list1; /* Увеличиваем значение счетчика */
content: counter(list1) ". "; /* Выводим значение */
}
OL OL { counter-reset: list2; } /* Инициируем счетчик вложенного списка */
OL OL LI:before {
counter-increment: list2; /* Увеличиваем значение счетчика */
content: counter(list1) "." counter(list2) ". "; /* Выводим значение типа 2.1, 2.2,... */
}
</style>
</head>
<body>
<ol>
<li>Пункт
<ol>
<li>Подпункт</li>
<li>Подпункт</li>
<li>Подпункт</li>
</ol>
</li>
<li>Пункт
<ol>
<li>Подпункт</li>
<li>Подпункт</li>
</ol>
</li>
</ol>
</body>
</html>
Модифицируйте вышеприведенный фрагмент для создания следующего списка:
1 Пункт
1.1 Подпункт
1.2 Подпункт
1.2.1 Еще один уровень
1.2.2 Еще один уровень
1.3 Подпункт
2 Пункт
3 Пункт
3.1 Подпункт
3.1.1 Еще один уровень
3.1.2 Еще один уровень
4 Пункт
