HTML: маркируем разными картинками разные элементы списка

Тема в целом раскрыта вот здесь, но предлагается ставить одну картинку для всех элементов списка, а часто нужно разные. Сделать такое тоже очень легко.

1. В стиле, подключаемом к странице или непосредственно в коде разметки странице определим нужное количество классов для элемента списка <li>, каждому классу соответствует своя картинка, например:

<style type="text/css">
 li.void { list-style-image: url(img/void.png); }
 li.php { list-style-image: url(img/php.png); }
 li.js { list-style-image: url(img/js.png); }
</style>

Здесь предполагается, что маркирующие элементы списков картинки сохранены во вложенной папке с именем img.

2. При описании элементов маркированного списка <ul> просто указываем нужный класс:

<ul>
<li class="void">Элемент 1
<li class="php">Элемент 2
<li class="js">Элемент 3
</ul>

Легко применить классы и для тега нумерованного списка <ol>, но нет смысла. Без указания классов вид списков, разумеется, останется по умолчанию - круглые маркеры для <ul> и номера элементов для <ol>.

Можно посмотреть что вышло, например, в оглавлении папки моих скриптов, на момент написания заметки там использованы указанные 3 иконки.

24.02.2016, 11:46 [10406 просмотров]