CSS使用图像而不是子弹

Question

我想使用三个不同的图像而不是子弹来创建一个lisli> 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