Html нумерованный список – HTML списки и виды списков в HTML: маркированный HTML список, нумерованный HTML список, многоуровневые списки в HTML

Нумерованный и маркированный список | 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 с помощью 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 кода на экран получаем стандартный вывод нумерованного списка HTML, в котором все вложенные списки начинаются с 1

На рисунке выше то, что представлено в начале элементов списка (не жирным текстом) — это автоматическая нумерация списка <ol> HTML. Правда неудобно?

Правильная нумерация списков HTML (как в договорах) с помощью CSS

Для того, чтобы нумерация была правильной, интуитивно понятной, нужно чтобы каждый вложенный список начинался с цифры, обозначающий его уровень вложенности. И это можно сделать достаточно просто применив CSS:

ol {
  list-style: none;
  counter-reset: li;
}
li:before {
  counter-increment: li; 
  content: counters(li,".") ". ";
}

Применив этот CSS-код к тегам <ol> и <li> нумерованного списка получим то что нужно: правильно пронумерованный вложенный нумерованный список HTML:

правильно пронумерованный вложенный нумерованный список 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 для всех элементов нумерованного списка ol.

Таким образом, изменив четыре свойства 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.Пункт 1
  2. 2.Пункт 2
  3. 3.Пункт 3

Итак, как видите, все довольно просто. Вам остается только взять эти заготовки HTML-кода и CSS-стили, и немного подправив, вы можете свободно использовать их на своем сайте.

А на этом у меня, пожалуй, на сегодня все. Надеюсь, показанный в данной статье код для стилизации маркированных списков будут для вас полезны. Если данная статья вам понравилась, обязательно поделитесь ею в социальных сетях и оставьте свой комментарий.

До встречи в следующих статьях!

С уважением Юлия Гусарь

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *