一，效果图。
二，代码。
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>CSS 样式列表(url)</title> <style> ul.a { list-style: circle; } ul.b { list-style: square; } ol.c { list-style: upper-roman; } ol.d { list-style: lower-alpha; } ul { list-style: none; padding: 0px; margin: 0px; } ul li { background-image: url(sqpurple.gif); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px; } </style> </head> <body> <p>example of unordered</p> <ul class="a"> <li>coffee</li> <li>tea</li> <li>coca coca</li> </ul> <ul class="b"> <li>coffee</li> <li>tea</li> <li>coca coca</li> </ul> <p>example of ordered lists:</p> <ol class="c"> <li>coffee</li> <li>tea</li> <li>coco coco</li> </ol> <ol class="d"> <li>coffee</li> <li>tea</li> <li>cocoa cocoa</li> </ol> <ul> </ul> </body> </html>
参考资料:《菜鸟教程》
一，效果图。
二，代码。
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>CSS 样式列表(url)</title> <style> ul.a { list-style: circle; } ul.b { list-style: square; } ol.c { list-style: upper-roman; } ol.d { list-style: lower-alpha; } ul { list-style: none; padding: 0px; margin: 0px; } ul li { background-image: url(sqpurple.gif); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px; } </style> </head> <body> <p>example of unordered</p> <ul class="a"> <li>coffee</li> <li>tea</li> <li>coca coca</li> </ul> <ul class="b"> <li>coffee</li> <li>tea</li> <li>coca coca</li> </ul> <p>example of ordered lists:</p> <ol class="c"> <li>coffee</li> <li>tea</li> <li>coco coco</li> </ol> <ol class="d"> <li>coffee</li> <li>tea</li> <li>cocoa cocoa</li> </ol> <ul> </ul> </body> </html>
参考资料:《菜鸟教程》