通过CSS我们可以对无序列表、有序列表的项目符号进行更改。
1.无序列表项目样式属性(list-style-type)
…… <style type="text/css"> .w1 { list-style-type:circle;} .w2 { list-style-type:square;} .w3 { list-style-type:disc ;} </style> …… <ul class="w1"> <li>无序列表项目1</li> <li>无序列表项目2</li> <li>无序列表项目3</li> </ul> <ul class="w2"> <li >无序列表项目1</li> <li >无序列表项目2</li> <li >无序列表项目3</li> </ul> <ul class="w3"> <li >无序列表项目1</li> <li >无序列表项目2</li> <li >无序列表项目3</li> </ul> ……2.有序列表项目样式属性
…… <style type="text/css"> .y1 { list-style-type:decimal ;} .y2 {list-style-type:upper-roman ;} .y3 {list-style-type:lower-roman ;} </style> …… <ol class="y1"> <li>有序列表项目1</li> <li>有序列表项目1</li> <li>有序列表项目1</li> </ol> <ol class="y2"> <li>有序列表项目1</li> <li>有序列表项目1</li> <li>有序列表项目1</li> </ol> <ol class="y3"> <li>有序列表项目1</li> <li>有序列表项目1</li> <li>有序列表项目1</li> </ol> ……3.用图片做列表项目符号(list-style-image)
…… <style type="text/css"> .xing { list-style-image:url(../../images/list.gif);} </style> …… <ul class="xing" > <li>无序列表项目1</li> <li>无序列表项目2</li> <li>无序列表项目3</li> </ul> ……