CSS入門教程——列表(list)

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(http://images.cnblogs.com/list.gif);} </style>       …… <ul class="xing" > <li>無序清單項目1</li> <li>無序清單項目2</li> <li>無序清單項目3</li> </ul>       ……