我想使用三个不同的图像而不是子弹来创建lisli> t
示例:
<ul>
<li>The dog is big</li>
<li>The dog is small</li>
<li>The dog is medium sized</li>
</ul>
因此,在上述每个短语之前,不是子弹,而是会有不同的图像 在每个之前。
答案 0 :(得分:10)
这使用了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);
}
答案 1 :(得分:6)
使用list-style-image:url(imagename);用图像完全替换子弹。这种方法的缺点是每个浏览器以不同的方式定位图像。列表项目符号的CSS背景图像是一种更加一致的方法。
答案 2 :(得分:1)
您可以使用 list-style-image 属性。
ul.dogbig
{
list-style-image:url("/images/dogbig.gif");
}
答案 3 :(得分:0)
CSS有这样的属性,但我认为它不适用于每个不同的<li>
元素:
ul
{
list-style-image:url("/images/blueball.gif");
list-style-type:square;
}
我希望它可以帮到你