CSS с использованием изображений вместо маркеров

Question

Я хочу использовать три разных изображения вместо маркеров для создания списка> t

Пример:

<ul>
    <li>The dog is big</li>
    <li>The dog is small</li>
    <li>The dog is medium sized</li>
</ul>

Таким образом, вместо маркеров перед каждой из приведенных выше фраз будетдругое изображение перед каждым.

Answer 1

Демонстрация в реальном времени

Используется свойство CSS list-style-image.

HTML:

<ul>
    <li class="b1">The dog is big</li>
    <li class="b2">The dog is small</li>
    <li class="b3">The dog is medium sized</li>
</ul>

CSS:

ul {
    margin: 0 0 0 32px;
    line-height: 1.5
}
.b1 {
    list-style-image: url(http://upload.wikimedia.org/wikipedia/commons/1/19/Icons-mini-icon_attachment.gif);
}
.b2 {
    list-style-image: url(http://upload.wikimedia.org/wikipedia/commons/6/61/Icons-mini-icon_security.gif);
}
.b3 {
    list-style-image: url(http://upload.wikimedia.org/wikipedia/commons/a/ab/Icons-mini-icon_clock.gif);
}

Answer 2

Использовать list-style-image: url (imagename);заменить пули целиком на изображения.Недостатком этого метода является то, что каждый браузер размещает изображения по-разному.CSS фоновые изображения для списка маркеров - более последовательный метод.

из http://css.maxdesign.com.au/listamatic/vertical04.htm

Answer 3

вы можете использовать свойство list-style-image .

ul.dogbig
{
  list-style-image:url("/images/dogbig.gif");
}

Answer 4

Есть такое свойство CSS, но я думаю, что оно не работает для каждого отдельного элемента <li>:

ul
{
list-style-image:url("/images/blueball.gif");
list-style-type:square;
}

Я надеюсь, что это поможет вам