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(../../images/list.gif);}
 </style>
       ……
 <ul class="xing" >
 <li>无序列表项目1</li>
 <li>无序列表项目2</li>
 <li>无序列表项目3</li>
 </ul>
       …… 	    

进入下一节：div和span