Оформление маркированного списка в HTML картинками с помощью CSS

Здравствуйте, друзья. Иногда полезно возвращаться к основам HTML, чтобы освежить память и проверить не забыли ли что-нибудь. И в этой статье речь пойдет про оформление маркированного списка, а если более конкретно, то попробуем сделать маркеры списка картинками. Да, именно так. Все эти кружочки и квадратики нас вовсе не интересуют, будем оформлять свои списки красиво. И для этого есть 3 способа оформления. Начнем по порядку. Для начала вспомним, как же пишутся маркированные списки на HTML. А пишутся они вот так:

1
2
3
4
5
6
7

<ul>
	<li>Пункт 1</li>
	<li>Пункт 2</li>
	<li>Пункт 3</li>
	<li>Пункт 4</li>
	<li>Пункт 5</li>
</ul>

То есть по умолчанию, без какого либо оформления, список будет выглядеть так, только кружочки маркера будут полностью черными:

• Пункт 1
• Пункт 2
• Пункт 3
• Пункт 4
• Пункт 5

Итак, давайте поменяем эти черные кружочки на картинку. Я использовал в примере изображение зеленой галочки. Вы же можете подобрать другую картинку, звездочки, сердечки, что угодно. Только желательно, чтобы размер этой картинки был небольшим, а лучше всего 16×16 пикселей. Надеюсь, что вы знаете, как изменить размер изображения. Все, что нужно это в CSS свойстве прописать путь до картинки.

1
2
3

ul {
    list-style:url("list.png");
}

И давайте посмотрим, что у нас из этого получилось.
Демо

По большому счету все получилось как надо, наш список стал намного симпатичнее и не нуждается в дальнейшей коррекции. Однако я говорил о трех способах и теперь перейдем ко второму, который тоже нужно знать.

1
2
3
4
5
6
7

ul {
    list-style: none; // Убираем маркеры
}
 li {
    background: url("list.png")no-repeat left center; // Картинка слева по центру
    padding-left: 20px; // Отступ слева от маркера
}

Выглядеть будет это так же, как и в первом примере, но лишь слегка будет отличатся положением самой картинки. Для наглядности я сделал вторую страницу. Посмотрите и сравните оба варианта оформления маркированных списков.

Демо

И наконец третий способ и он достаточно гибкий. В нем мы используем псевдокласс before. То есть мы укажем в CSS, что будет выводится перед каждым пунктом списка. Посмотрим на код:

1
2
3
4
5
6
7
8

ul {
    list-style:none;
}
li:before {
    content: url(list.png);
    position: relative;
    left: -5px;
}

В дополнение ко всему мы используем в этом примере относительное позиционирование, что позволяет нам размещать наши маркеры так, как нам удобно и располагать их в любом месте. Посмотрите пример. Он практически не отличается от второго варианта.

Демо

Это способы оформления маркированных списков картинками, о которых нужно знать. Но чтобы особо не мудрить и не нагромождать кучу лишнего кода, лучше подготовить картинку подходящего размера и использовать для оформления списков самый первый вариант. Надеюсь, что эта статья была вам чем-то полезна.