Список OL индивидуального стиля с использованием CSS

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Как известно, тег <OL> принимает участие в создании нумерованных списков. По умолчанию создается обычная ничем не приметная нумерация. Но, с помощью CSS и без использования изображений можно создать весьма привлекательную картину. Список будет смотреться совершенно по-новому. В демо-примере показано три уровня (относительно родительского) с разнообразными стилями.

Демо-пример

Список №1
Список №1
1. Список №2
2. Список №2
  1. Список №3
  2. Список №3
  3. Список №3
  4. Список №3
3. Список №2
4. Список №2
Список №1
Список №1
Список №1

Установка на сайт

1. Код в таблице внизу вставить в раздел head или файл стилей сайта:

Для выделения текста сделайте щелчок мышью.
Для увеличения окна, «подцепите» мышью правый нижний угол.


<style type="text/css">
ol{
	list-style: none;
	counter-reset: li; /* reset counter for ol (li is just arbitrary identifier) */
}

ol li{
	position:relative;
	margin-bottom: 10px; /* bottom spacing between lis */
	padding: 4px 10px;
}

ol ol{
	margin-top: 1em; /* for nested ols, add top and bottom spacing */
	margin-bottom: -10px;
}

ol > li:before{ /* pseudo element for custom counter */
	content:counter(li); /* set its content to CSS generated counter, using the "li" counter defined above */
	counter-increment:li; /* increment the li counter each time, assumed starting index is 0 */
	text-align: center;
	display:block;
	position:absolute;
	width: 27px; /* width of counter */
	height: 27px; /* height of counter */
	line-height: 27px; /* set this to same as height value */
	font-weight: bold;
	top: 0;
	left: -30px; /* shift counter to the left */
	background: #452b06; /* background of counter */
	color: white;
	/*z-index: -1;*/
	-moz-box-shadow: 2px 2px 4px gray; /* CSS3 shadows */
	-webkit-shadow: 2px 2px 4px gray;
	box-shadow: 2px 2px 4px gray;
}

ol ol > li:before{ /* 2nd level custom counter specific style */
	background: darkred;
	border-radius: 8px;
}

ol ol ol > li:before{ /* 3rd level custom counter specific style */
	background: red;
	border-radius: 27px;
}

</style>

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

2. А этот код скопируйте и расположите в разделе body в том месте, где желаете видеть список:


<ol>
<li>Список №1</li>
<li>Список №1
	<ol>
	<li>Список №2</li>
	<li>Список №2
		<ol>
		<li>Список №3</li>
		<li>Список №3</li>	
		<li>Список №3</li>	
		<li>Список №3</li>	
		</ol>
	</li>
	<li>Список №2</li>
	<li>Список №2</li>
	</ol>
</li>
<li>Список №1</li>
<li>Список №1</li>
<li>Список №1</li>
</ol>

Спасибо за внимание. Посещайте мой сайт. Пока! L.M.

Ваше мнение по материалу, изложенному на сайте

Служба поддержки