列表是HTML里一种很有用的显示方式，可以把相关的并列内容整齐地垂直排列，使网页显得整洁专业，并让浏览者有一目了然的感觉。
列表是HTML里一种很有用的显示方式，可以把相关的并列内容整齐地垂直排列，使网页显得整洁专业，并让浏览者有一目了然的感觉。
样式表为列表增加了一些功能，控制列表的样式包括列表样式、图形符号、列表位置三个部分。
1．列表符号
列表符号是指显示于每一个列表项目前的符号标识。
基本格式如下：
list-style-type：参数
参数取值范围：
·disc：圆形
·circle：空心圆
·square：方块
·decimal：十进制数字
·lower-roman：小写罗马数字
·upper-roman：大写罗马数字
·lower-alpha：小写希腊字母
·upper-alpha：大写希腊字母
·none：无符号显示
参数中的disc是默认选项。
2．图形符号
图形符号指原来列表的项目符号将可以使用图形来代替。
基本格式如下：
list-style-image：URL
URL是用来代替项目符号的图形文件的地址，可以使用相对地址或绝对地址。
3．列表位置
列表位置描述列表在何处显示。
基本格式如下：
list-style-position：参数
参数取值范围：
·inside：在BOX模型内部显示
·outside：在BOX模型外部显示
这里又出现了一个新的概念：BOX模型。BOX是指一种容器，包含了应用样式规则的对象，具体介绍将在后文中给出。========================================================================================
使用无序列表：即UL
看一个最简单的例子：
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
这是一个未加修饰的纵向列表
1：设置列表的边界
#base {
border: 1px solid #000;
margin: 2em;
width: 10em;
padding: 5px;
}
html中这样写，就会呈现一个带边框的无序列表
<div id="base">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
2：设定列表的图像
可以设定列表的样式为左边带一个图像，样式如下：
ul {
list-style-type: disc;
list-style-image: url(bullet.gif);
list-style-position: inside;
}
disc表示实心的圆，list-style-image表示列表用到的小图像，如果这个图像的url
不正确时，disc才会起作用，inside表示列表是在区块内部的。
3：如何在段落中使用列表
样式如下：
#inline-list {
border: 1px solid #000;
margin: 2em;
width: 80%;
padding: 5px;
font-family: Verdana, sans-serif;
}
#inline-list p {
display: inline;
}
#inline-list ul, #inline-list li {
display: inline;
margin: 0;
padding: 0;
color: #339;
font-weight: bold;
}
4：水平导航
#h-contain {
padding: 5px;
border: 1px solid #000;
margin-bottom: 25px;
}
#pipe ul {
margin-left: 0;
padding-left: 0;
display: inline;
}
#pipe ul li {
margin-left: 0;
padding: 3px 15px;
border-left: 1px solid #000;
list-style: none;
display: inline;
}
#pipe ul li.first {
margin-left: 0;
border-left: none;
list-style: none;
display: inline;
}
#h-contain定一个一个边界为1的区块，水平导航用的也是inline方式，li.first定义第一个
列表元素没有左边那个象素为1的border。
下面的样式是tab方式的水平导航：
#tabs ul {
margin-left: 0;
padding-left: 0;
display: inline;
}
#tabs ul li {
margin-left: 0;
margin-bottom: 0;
padding: 2px 15px 5px;
border: 1px solid #000;
list-style: none;
display: inline;
}
#tabs ul li.here {
border-bottom: 1px solid #ffc;
list-style: none;
display: inline;
}
li的class如果为here，则是选中的
本文转自寒意博客园博客，原文链接：http://www.cnblogs.com/hnyei/archive/2011/10/19/2217358.html，如需转载请自行联系原作者
