html lists - CSS using images instead of bullets -
i want use 3 different images instead of bullets create lisli>t
example:
<ul> <li>the dog big</li> <li>the dog small</li> <li>the dog medium sized</li> </ul>
so instead of bullets before each of above phrases there different image before each.
this makes use of css property list-style-image
.
html:
<ul> <li class="b1">the dog big</li> <li class="b2">the dog small</li> <li class="b3">the dog 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); }
Comments
Post a Comment