XML/HTML代码
<ul>   
    <li>布局概述</li>   
    <li>页面元素入门</li>   
    <li>高级技巧</li>   
    <li>高级技巧</li>   
</ul>   
<ol>   
    <li>布局概述</li>   
    <li>页面元素入门</li>   
    <li>高级技巧</li>   
    <li>高级技巧</li>   
</ol>   

以上对比效果见图左：


2、针对ul的项目列表符号有以下几种：

CSS代码
ul{list-style-type:none} /*不显示项目符号*/       
ul{list-style-type:disc} /*实心圆点，默认的*/       
ul{list-style-type:ncircle} /*空心圆点*/       
ul{list-style-type:square} /*实心方块*/     

针对ol的项目列表符号有以下几种：none（没有）;decimal（实心圆点，默认的）;circle（空心圆点），square（小方块）； 

CSS代码
ol{list-style-type:none} /*不显示项目符号*/       
ol{list-style-type:decimal} /*阿拉伯数字*/       
ol{list-style-type:lower-roman} /*小写罗马数字*/       
ol{list-style-type:upper-roman} /*大写罗马数字*/       
ol{list-style-type:lower-alpha} /*小写英文字母*/       
ol{list-style-type:upper-alpha} /*大写英文字母*/     

3、使用图片自定义项目符号

CSS代码
ul{list-style-image:url(arrow.gif);border:1px #33ccff solid;list-style-position:inside;}   

其中：list-style-position:inside;的意义是设置列表项位置位于内部，inside与outside是这一句的属性值，对比效果如上图右侧。
其实用过这种方法的朋友会发现，使用这种方法固然简单，但定位起来比较麻烦，而且在效果上也有很大的局限性，下面我们采用背景图片的方法来实现项目列表样式：
css代码如下：

CSS代码
ul{list-style-type:none;}/*去掉项目符号*/   
li{background:url(arrow.gif) no-repeat 0px 3px;    
    padding-left:20px;}   

4、使列表变为段落
在以前的教程中，我们接触了display:block;的属性定义，而display的可用值中除了这个外，还有一个inline;详细见下：

CSS代码
display:block;//将对象显示为块状或叫做盒状，后一个对象换行显示。    
display:none;//隐藏，不显示对象；    
display:inline;//行间内联样式，对象排列在一行中，后一个对象继续连接此对象显示；    
display:inline-block;//对象显示为块状，但能呈现内联样式。    
display:list-item;//将对象作为列表项显示；