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"：