HTML列表标签 UL/OL LI 结合CSS的运用

列表标签是HTML中重要的一个环节，因为它在DIV+CSS布局中作用非常大，合理使用会使网页结构清晰，减少垃圾代码。
列表标签有：
<ol> <ul> <li>
<dl> <dt> <dd>
<menu> <dir>

我们这里来看看平时用的比较多的<ol><ul><li>标签。

<ol>的英文全称是Ordered List，即顺序列表标签，<ul>的英文全称是Unordered List ，为无序列表标签。<li>的英文全称是List Item ，则是显示列表的标签项目。查看更多HTML标签的英文全称
顺序列表就是在每一项前面加上 1,2,3... 等数目，又称编号清单。
无序列表就是在每一项前面加上 圆点、方点 等符号，所以又叫符号清单。

例：
<ul>
<li>Cnblogs</li>
<li>MSDN</li>
<li>CSDN</li>
</ul>
<ol>标签的用法类同，所有的列表标签都必须要在DIV标签内才能实现布局的意义。

A).运用CSS格式化列表符： ul li{
list-style-type:none;
}

B).如果你想将列表符换成图像，则： ul li{
list-style-type:none;
list-style-image: url(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;
}

li 标签有一个type属性，只适用于非顺序清单，用于设定符号款式，其值有三种，默认为 type="disc"：