css网站元素设计-列表元素的使用
1、列表形式由于展示形式整齐直观，在网站设计中占有很大的比重。早期的列表都是由表格实现的，在代码上过于繁杂，设计和可读性较差。这一节我们重点探讨无序列表ul及有序列表ol元素的使用。
看XHTML代码很简单：
程序代码
以上对比效果见图左：
2、针对ul的项目列表符号有以下几种：
程序代码
针对ol的项目列表符号有以下几种：none（没有）;decimal（实心圆点，默认的）;circle（空心圆点），square（小方块）；
程序代码
3、使用图片自定义项目符号
程序代码
其中：list-style-position:inside;的意义是设置列表项位置位于内部，inside与outside是这一句的属性值，对比效果如上图右侧。
其实用过这种方法的朋友会发现，使用这种方法固然简单，但定位起来比较麻烦，而且在效果上也有很大的局限性，下面我们采用背景图片的方法来实现项目列表样式：
css代码如下：
程序代码
4、使列表变为段落
在以前的教程中，我们接触了display:block;的属性定义，而display的可用值中除了这个外，还有一个inline;详细见下：
程序代码
以下做一对比：
程序代码
看XHTML代码很简单：
程序代码<ul>
<li>布局概述</li>
<li>页面元素入门</li>
<li>高级技巧</li>
<li>高级技巧</li>
</ul>
<ol>
<li>布局概述</li>
<li>页面元素入门</li>
<li>高级技巧</li>
<li>高级技巧</li>
</ol>
<li>布局概述</li>
<li>页面元素入门</li>
<li>高级技巧</li>
<li>高级技巧</li>
</ul>
<ol>
<li>布局概述</li>
<li>页面元素入门</li>
<li>高级技巧</li>
<li>高级技巧</li>
</ol>
以上对比效果见图左：
2、针对ul的项目列表符号有以下几种：
程序代码ul{list-style-type:none} /*不显示项目符号*/
ul{list-style-type:disc} /*实心圆点，默认的*/
ul{list-style-type:ncircle} /*空心圆点*/
ul{list-style-type:square} /*实心方块*/
ul{list-style-type:disc} /*实心圆点，默认的*/
ul{list-style-type:ncircle} /*空心圆点*/
ul{list-style-type:square} /*实心方块*/
针对ol的项目列表符号有以下几种：none（没有）;decimal（实心圆点，默认的）;circle（空心圆点），square（小方块）；
程序代码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} /*大写英文字母*/
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、使用图片自定义项目符号
程序代码ul{list-style-image:url(arrow.gif);border:1px #33ccff solid;list-style-position:inside;}
其中：list-style-position:inside;的意义是设置列表项位置位于内部，inside与outside是这一句的属性值，对比效果如上图右侧。
其实用过这种方法的朋友会发现，使用这种方法固然简单，但定位起来比较麻烦，而且在效果上也有很大的局限性，下面我们采用背景图片的方法来实现项目列表样式：
css代码如下：
程序代码ul{list-style-type:none;}/*去掉项目符号*/
li{background:url(arrow.gif) no-repeat 0px 3px;
padding-left:20px;}
li{background:url(arrow.gif) no-repeat 0px 3px;
padding-left:20px;}
4、使列表变为段落
在以前的教程中，我们接触了display:block;的属性定义，而display的可用值中除了这个外，还有一个inline;详细见下：
程序代码display:block;//将对象显示为块状或叫做盒状，后一个对象换行显示。
display:none;//隐藏，不显示对象；
display:inline;//行间内联样式，对象排列在一行中，后一个对象继续连接此对象显示；
display:inline-block;//对象显示为块状，但能呈现内联样式。
display:list-item;//将对象作为列表项显示；
display:none;//隐藏，不显示对象；
display:inline;//行间内联样式，对象排列在一行中，后一个对象继续连接此对象显示；
display:inline-block;//对象显示为块状，但能呈现内联样式。
display:list-item;//将对象作为列表项显示；
以下做一对比：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>步步为营，实战div+css系列教程</title>
</head>
<style tpye="text/css">
<!--
ul{list-style-type:none;display:inline;padding:0px;margin-left:0px;}/*去掉项目符号*/
li{display:inline}
h1{display:inline;font-size:16px;font-weight:normal}
-->
</style>
<body>
<h1>这一节我们重点讲解列表元素的应用：</h1>
<ul>
<li>改变列表项目符号</li>
<li>使列表变为段落</li>
<li>列表的缩进排版</li>
<li>复杂列表的排版</li>
</ul>
<h1>在排版的过程中，应用一些图文混排技术，可以实现更好的效果。</h1>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>步步为营，实战div+css系列教程</title>
</head>
<style tpye="text/css">
<!--
ul{list-style-type:none;display:inline;padding:0px;margin-left:0px;}/*去掉项目符号*/
li{display:inline}
h1{display:inline;font-size:16px;font-weight:normal}
-->
</style>
<body>
<h1>这一节我们重点讲解列表元素的应用：</h1>
<ul>
<li>改变列表项目符号</li>
<li>使列表变为段落</li>
<li>列表的缩进排版</li>
<li>复杂列表的排版</li>
</ul>
<h1>在排版的过程中，应用一些图文混排技术，可以实现更好的效果。</h1>
</body>
</html>
效果如图：
把ul对象，li对象,h1对象都设置为内联属性，便形成一段落，再控制好左边距及内边距，就如图右部分所示。
下面我们继续对代码改进，设置其首行缩进：
首行缩进代码：
程序代码text-indent:32px;//可以用固定值，
text-indent:50%; //也可以用其它值如：50%，0.5em.还可以用负值。
text-indent:50%; //也可以用其它值如：50%，0.5em.还可以用负值。
小结：这一节主要认识了有序列表ol与无序列表ul，并且常用的属性参数。下一节我们将综合这方面内容实现较复杂的列表布局。
