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>

       ……