HTML文档中使用的列表主要有无序列表(ul)、排序列表(ol)、目录列表(dir)、菜单列表(menu)、描述性列表(dl)五种类型。
例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<p style="color:red;">这个是<ul><li>无序列表</p>
<ul>
<li>这是第1行</li>
<li>这是第2行</li>
<li>这是第3行</li>
<li>这是第4行</li>
</ul>
<hr />
<p style="color:red;">这个是<ol><li>排序列表</p>
<ol>
<li>这是第1行</li>
<li>这是第2行</li>
<li>这是第3行</li>
<li>这是第4行</li>
</ol>
<p style="color:red;">这个是<ol><li>排序列表+start属性值（start=“9”）</p>
<ol start="9">
<li>这是第9行</li>
<li>这是第10行</li>
</ol>
<hr />
<p style="color:red;">这个是<dir><li>目录列表</p>
<dir>
<li>这是第1行目录</li>
<li>这是第2行目录</li>
<li>这是第3行目录</li>
<li>这是第4行目录</li>
</dir>
<hr />
<p style="color:red;">这个是<menu><li>菜单列表</p>
<menu>
<li>这是第1行菜单</li>
<li>这是第2行菜单</li>
<li>这是第3行菜单</li>
<li>这是第4行菜单</li>
</menu>
<hr />
<p style="color:red;">这个是<dl><dt dd>描述性列表</p>
<dl>
<dt>师范学院</dt>
<dd>包括数学专业，物理专业，外语专业，心理教育专业等等</dd>
<dt>计算机科学与技术</dt>
<dd>计算机软件理论</dd>
<dd>硬件专业</dd>
<dd>应用专业</dd>
</dl>
</body>
</html>
很多人容易忽略 dl dt dd的用法:
dl 内容块
dt 内容块的标题
dd 内容
可以这么写：
标题
内容1
内容2
dt 和dd中可以再加入 ol ul li和p,理解这些以后，在使用div布局的时候，会方便很多，w3c提供了很多元素辅助布局。
LI代码的格式化:
A).运用CSS格式化列表符：
以下是引用片段：
ul li{
list-style-type:none;
}
B).如果你想将列表符换成图像，则：
以下是引用片段：
ul li{
list-style-type:none;
list-style-image: url(/blog/images/icon.gif);
}
C).为了左对齐，可以用如下代码：
以下是引用片段：
ul{
list-style-type:none;
margin:0px;
}
D).如果想给列表加背景色，可以用如下代码：
以下是引用片段：
ul{
list-style-type: none;
margin:0px;
}
ul li{
background:#CCC;
}
E).如果想给列表加MOUSEOVER背景变色效果，可以用如下代码：
以下是引用片段：
ul{ list-style-type: none; margin:0px; }
ul li a{ display:block; width: 100%; background:#ccc; }
ul li a:hover{ background:#999; }说明：display:block;这一行必须要加的，这样才能块状显示！
F).LI中的元素水平排列,关键FLOAT:LEFT：
以下是引用片段：
ul{
list-style-type:none;
width:100%;
}
ul li{
width:80px;
float:left;
}
3212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
