Нумерованный и маркированный список | htmlbook.ru
Создайте список, как показано на рис. 1. Ссылки не обязательно должны работать (т.е. вести на какие-то существующие файлы), главное сохранить указанный вид и валидность кода.
Рис. 1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Вложенные списки</title> </head> <body> <h2>Ключевые слова</h2> <ol type="I"> <li><b>A</b> <ul type="disc"> <li><a href="#">abstract</a></li> </ul> </li> <li><b>B</b> <ul type="disc"> <li><a href="#">boolean</a></li> <li><a href="#">break</a></li> <li><a href="#">byte</a></li> </ul> </li> <li><b>C</b> <ul type="disc"> <li><a href="#">case</a></li> <li><a href="#">catch</a></li> <li><a href="#">char</a></li> <li><a href="#">class</a></li> <li><a href="#">const</a></li> <li><a href="#">continue</a></li> </ul> </li> </ol> </body> </html>
Статьи по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Как сделать, чтобы нумерованный список начинался с определенного числа?
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Начать нумерованный список с заданного числа.
Решение
Добавьте к первому элементу <li>, входящему в контейнер <ol>, атрибут value с числом в качестве значения. С него и будет нумероваться дальнейший список (пример 1).
Пример 1. Использование атрибута value
HTML5IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Список, начинающийся со ста</title> </head> <body> <p>Следующая сотня победителей нашего рейтинга</p> <ol> <li value="100">Трансформатор IV</li> <li>Титаник 2</li> <li>Рембо 2013</li> <li>Иго-го: история нашествия татаро-монгол</li> </ol> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Список, начинающийся с числа 100
Допускается использовать в списке несколько атрибутов value, тогда можно получить прерывающуюся нумерацию, вроде: 100, 101, 1, 2. Также начальный номер списка устанавливается с помощью атрибута start тега <ol> (пример 2).
Пример 2. Использование атрибута start
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Список, начинающийся с шести</title>
</head>
<body>
<ol start="6">
<li>дюймов - 15,24 мм</li>
<li>дюймов - 17,78 мм</li>
<li>дюймов - 20,32 мм</li>
</ol>
</body>
</html>Правильная нумерация во вложенных нумерованных списках HTML с помощью CSS
Стандарт языка HTML поддерживает два вида списков: нумерованные и ненумерованные. Первые используются для упорядоченного перечисления элементов, вторые — для создания списка равнозначных элементов. Есть ещё списки определений, которые используются для создания блоков определение-описание но, по моему опыту, используются крайне редко. О том, как работать с этими списками есть видео для новичков, где подробно показано, как работать с этими списками.
Проблема нумерации во вложенных нумерованных списках HTML
Поработав со стандартными вложенными нумерованными списками HTML, каждый рано или поздно столкнётся с проблемой её несовершенства. Дело в том, что при вложении списка, нумерация вложенного списка снова и снова начинается с единицы. И при уровне вложенности от трёх и при длине списка более десяти начинаются проблемы с восприятием того, какой вложенный элемент, к какому родительскому элементу относится.
Рассмотрим эту задачу на простом примере. В коде ниже элементы состоят из того, что бы хотелось видеть:
<ol>
<li><b>1.</b></li>
<li><b>2.</b>
<ol>
<li><b>2.1.</b></li>
<li><b>2.2.</b></li>
<ol>
<li><b>2.2.1.</b></li>
<ol>
<li><b>2.2.1.1.</b></li>
<li><b>2.2.1.2.</b></li>
</ol>
<li><b>2.2.2.</b></li>
</ol>
<li><b>2.3.</b></li>
<li><b>2.4.</b></li>
</ol>
</li>
<li><b>3.</b></li>
<li><b>4.</b>
<ol>
<li><b>4.1.</b></li>
<li><b>4.2.</b></li>
<ol>
<li><b>4.2.1.</b></li>
<ol>
<li><b>4.2.1.1.</b></li>
<li><b>4.2.1.2.</b></li>
</ol>
<li><b>4.2.2.</b></li>
</ol>
<li><b>4.3.</b></li>
<li><b>4.4.</b></li>
</ol>
</li>
</ol>
Однако, при выводе такого HTML кода на экран получаем стандартный вывод нумерованного списка HTML, в котором все вложенные списки начинаются с 1.
На рисунке выше то, что представлено в начале элементов списка (не жирным текстом) — это автоматическая нумерация списка
Правильная нумерация списков HTML (как в договорах) с помощью CSS
Для того, чтобы нумерация была правильной, интуитивно понятной, нужно чтобы каждый вложенный список начинался с цифры, обозначающий его уровень вложенности. И это можно сделать достаточно просто применив CSS:
ol {
list-style: none;
counter-reset: li;
}
li:before {
counter-increment: li;
content: counters(li,".") ". ";
}Применив этот CSS-код к тегам <ol> и <li> нумерованного списка получим то что нужно: правильно пронумерованный вложенный нумерованный список HTML:
Формирование правильной нумерации во вложенном нумерованном списке HTML с помощью CSS
Рассмотрим подробнее свойства элементов нумерованного списка HTML, которые можно модифицировать с помощью CSS.
list-style: none;- отменим все стили списка для элементов
ol(если они вдруг были ранее назначены) с помощью свойстваlist-style
- отменим все стили списка для элементов
counter-reset: li;- назначим идентификатор
li, в котором будет храниться счётчик отображений элементаolс помощью свойстваcounter-reset
- назначим идентификатор
counter-increment: li;- обозначим идентификатор
liкак счётчик, который будет подсчитывать количество отображений элементовolна странице и будет выводиться с помощью свойстваcontentи псевдоэлемента:beforeдляli
- обозначим идентификатор
content: counters(li,".") ". ";- зададим последовательность вывода счётчика
liдля всех элементов нумерованного списка
- зададим последовательность вывода счётчика
Таким образом, изменив четыре свойства css двух элементов ol и li нумерованного списка можно получить красивый нумерованный список HTML, который легко воспринимается и более привычен нам, так как в нём наглядно прослеживается вложенность элементов и принадлежность к родительским элементам списка.
HTML и CSS код нумерованного списка с правильной нумерацией
Для того, чтобы проще было разобраться и применить описанные выше сведения, привожу полностью рабочий HTML и CSS код нумерованного списка с правильной нумерацией вложенных элементов:
<html> <head> <title>Правильная нумерация вложенных пунктов нумерованного списка в HTML с помощью css</title> </head> <body> <style> ol { list-style: none; counter-reset: li; } li:before { counter-increment: li; content: counters(li,".") ". "; color: red; } </style> <ol> <li><b>1.</b></li> <li><b>2.</b> <ol> <li><b>2.1.</b></li> <li><b>2.2.</b></li> <ol> <li><b>2.2.1.</b></li> <ol> <li><b>2.2.1.1.</b></li> <li><b>2.2.1.2.</b></li> </ol> <li><b>2.2.2.</b></li> </ol> <li><b>2.3.</b></li> <li><b>2.4.</b></li> </ol> </li> <li><b>3.</b></li> <li><b>4.</b> <ol> <li><b>4.1.</b></li> <li><b>4.2.</b></li> <ol> <li><b>4.2.1.</b></li> <ol> <li><b>4.2.1.1.</b></li> <li><b>4.2.1.2.</b></li> </ol> <li><b>4.2.2.</b></li> </ol> <li><b>4.3.</b></li> <li><b>4.4.</b></li> </ol> </li> </ol> <body> </html>
Спасибо за внимание! =D
P.S. О том, как создать правильную нумерация в смешанных нумерованных и маркированных списках HTML с помощью CSS, можно прочитать в → этой статье. Приведено универсальное решение по созданию css-свойств для различных типов HTML-списков.
Заберите ссылку на статью к себе, чтобы потом легко её найти 😉
Выберите, то, чем пользуетесь чаще всего:
Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )
Как сделать красивый нумерованный список HTML?
Приветствую вас, дорогие друзья, на сайте Impuls-Web!
В этой статье я хотела бы вам показать, как можно сделать красивый нумерованный список HTML, который позволит вам украсить контент, и добавит некоторой индивидуальности для вашего сайта.
Навигация по статье:
Как будет выглядеть такой нумерованный список HTML, вы могли вдеть в большинстве моих статей. Так как я уже давно пользуюсь таким способом стилизации списков, и считаю, что такой вариант оформления намного интереснее, чем обычные серые цифры.
Код нумерованного списка HTML
Итак, суть данного способа заключается в том, что для начала мы создаем заготовку кода c нумерованным списком HTML, в котором задаем нумерацию самостоятельно. А далее, при помощи CSS-стилей делаем стилизацию цифр, подгоняя его оформление под дизайн нашего сайта.
Вот как выглядит код для измененного нумерованного списка HTML:
<ol> <li><span>1.</span>Текст</li> <li><span>2.</span>Текст</li> …. </ol>
<ol> <li><span>1.</span>Текст</li> <li><span>2.</span>Текст</li> …. </ol> |
Вы можете использовать данную заготовку HTML-кода, и css-стили, которые я покажу ниже, и использовать их у себя на сайте.
Перечисление может быть бесконечно длинным. Все, что вам нужно, это продублировать строки списка нужное количество раз, и исправить нумерацию, а так же добавить свой текст для пунктов.
CSS-стили нумерованного списка HTML
Далее нам нужно открыть в текстовом редакторе файл стилей нашего сайта и в самом конце дописать следующие стили:
.num-list li { margin-bottom: 15px; margin-top: 10px; list-style: none; } .num-list li span{ background: #05A4E8; /*фон */ color: #FFF; /* цвет цифр */ margin-right: 10px; /* правый отступ */ padding: 3px 6px; /* внутренние отступы */ font-weight: bold; /*жирность цифр */ font-size:16px; /*размер шрифта */ border-radius:12px; /*скругление углов */ }
.num-list li { margin-bottom: 15px; margin-top: 10px; list-style: none; }
.num-list li span{ background: #05A4E8; /*фон */ color: #FFF; /* цвет цифр */ margin-right: 10px; /* правый отступ */ padding: 3px 6px; /* внутренние отступы */ font-weight: bold; /*жирность цифр */ font-size:16px; /*размер шрифта */ border-radius:12px; /*скругление углов */ } |
В первом фрагменте стилей с селектором .num-list li мы добавляем верхний и нижний отступ для пунктов, и убираем стандартную нумерацию.
Во втором фрагменте мы добавляем стилизацию для нашей нумерации. В частности, задаем фон, цвет цифр, внутренние отступы, задаем шрифт и радиус скругления углов для тега span.
Вот что у нас получилось:
- 1.Пункт 1
- 2.Пункт 2
- 3.Пункт 3
Итак, как видите, все довольно просто. Вам остается только взять эти заготовки HTML-кода и CSS-стили, и немного подправив, вы можете свободно использовать их на своем сайте.
А на этом у меня, пожалуй, на сегодня все. Надеюсь, показанный в данной статье код для стилизации маркированных списков будут для вас полезны. Если данная статья вам понравилась, обязательно поделитесь ею в социальных сетях и оставьте свой комментарий.
До встречи в следующих статьях!
С уважением Юлия Гусарь