Loading





Форекс с Альпари

eTXT




Анкетка


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

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


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


Демо-пример

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


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

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

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


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

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.


Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка