Пятница, 16 Ноября 2012 12:40

Нумерованные списки. Необычная нумерация

Written by 
Оцени эту запись
(2 Голоса)

В данной статье мы рассмотрим создание нумерованных списков ol с необычной нумерацией, сделанной при помощи CSS. В частности, рассмотрим реализацию нумерованных списков с общей нумерацией (во втором списке нумерация начинается в индекса окончания первого списка), вывод нумерации списка со скобочками (вместо точек) и начало нумерации списка с определенного номера. 

 

 

Рассмотрим для начала 2 списка, у которых будет общая нумерация.

 

Нумерованные списки с общей нумерацией

 

 

<ol>
             <li>Пункт 1</li>
             <li>Пункт 2</li>
             <li>Пункт 3</li>
             <li>Пункт 4</li>
             <li>Пункт 5</li>
</ol>
<ol>
             <li>Пункт 6</li>
             <li>Пункт 7</li>
             <li>Пункт 8</li>
             <li>Пункт 9</li>
             <li>Пункт 10</li>
</ol>
 
По умолчанию у каждого из них нумерация пойдет с 1. После номера будет стоять точка. Именно эти стандарты мы будем менять в данной статье. Точнее зададим свой значения нумерации.
 
Для этого отменяем стандартную нумерацию:
 
 
ol {list-style-type: none}
 
 
И будем использовать для элементов списка li псевдоэлемент before (подробнее о псевдоэлементе before в статье Псевдоэлементы before и after):
 
 
li:before {
content: counter(index_list)' ';
counter-increment: index_list;
}
 

Где counter задает счетчик index_list, а counter-increment увеличивает его на единичку.

 

 

  1. Пункт 1
  2. Пункт 2
  3. Пункт 3
  4. Пункт 4
  5. Пункт 5
  1. Пункт 6
  2. Пункт 7
  3. Пункт 8
  4. Пункт 9
  5. Пункт 10

 

Полностью стили для этих списков выглядят так:

 

 

.ol1 {
             counter-reset: index_list;
}
.ol1 ol {
              list-style-type: none;
 }
 .ol1 ol li:before {
             content: counter(index_list)' ';
             counter-increment: index_list;
 }

 

Где ol1 - класс родительского блока.

 

Нумерация списка со скобочками

 

Здесь идея будет та же, но реализация с двумя отличиями. Мы обнулим счетчик index_list для каждого списка при помощи counter-reset, чтобы с следующем нумерация начиналась с 1. И к выводу счетчика добавим скобку:

 

content: counter(index_list)') ';

 

Полный вид стилей такой:

 

 

.ol2 ol {
             list-style-type: none;
             counter-reset: index_list;
}
.ol2 ol li:before {
             content: counter(index_list)') ';
             counter-increment: index_list;
}
 
 
Результат:
 
 
  1. Пункт 1
  2. Пункт 2
  3. Пункт 3
  4. Пункт 4
  5. Пункт 5
 
 
И последний пункт - начало нумерации не с единицы.
 
 

Нумерация списка с определенного номера

 
 
Для этого нужно всего навсего при обнулении счетчика добавить к нему еще один параметр, который и отвечает за начальное значение нумерации:
 
 
counter-reset: index_list 12;
 
 
В начем случае начинаем с 12)) Все остальные стили аналогичны второму случаю.
 
 
Результат:
 
 
  1. Пункт 1
  2. Пункт 2
  3. Пункт 3
  4. Пункт 4
  5. Пункт 5
 
 
 
 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов