В этой статье узнаем, как произвести установку картинки или изображение вместо маркера списка. И для того, чтоб прописать изображение рисунка, чтоб списки выглядели красиво и оригинально, то здесь нужно задействовать свойством list-style-image, которое нужно прописать к заданному селектору, где идет обозначение ul или li.
И после всего нужно найти картинку, что может быть яркой или даже тематической, где прописываем прямую ссылку на снимок или значок.
Вариант №1. Картинка вместо маркеров
HTML
Код
<ul>
<li>Первый список</li>
<li>Второй список</li>
<li>Тритий список</li>
</ul>
CSS
Код
ul {
list-style-image: url(http://zornet.ru/design_43/f_ico/lastpost.gif); /* Изображение маркера */
}
Нужно учитывать размер картинки, если в первом варианте мы изначально задаем ширину от списка, то здесь все делается в CSS.
Вариант №2. Фоновый рисунок
HTML
Код
<ul>
<li>Первый список</li>
<li>Второй список</li>
<li>Тритий список</li>
</ul>
CSS
Код
li {
list-style: none; /* Убираем исходные маркеры */
background: url(http://zornet.ru/niz_ik2/thread.gif) no-repeat 0 50%; /* Параметры фона */
padding-left: 35px; /* Смещаем текст вправо */
}
Здесь задействовали свойство background, что позволяет поставить изображение как фоновый рисунок.
