CSS样式ul与li标签属性与布局技巧

配合div与css ，ul 、li 可以创建无表格布局，li 代码的格式化：

<1> 运用CSS格式化列表符：

 

以下为引用内容： ul li{ list-style-type:none; }

 

<2> 将列表符换成图标：

 

以下为引用内容： ul li{ list-style-type:none; list-style-image: url(images/icon.gif); }

 

<3> 左边对齐：

 

以下为引用内容： ul{ list-style-type:none; margin:0px; }

 

<4> 添加背景色：

 

以下为引用内容： ul{ list-style-type: none; margin:0px; } ul li{ background:#CCC; }

 

<5> mouseover背景变色：

 

以下为引用内容： ul{ list-style-type: none; margin:0px; } ul li a{ display:block; width: 100%; background:#CCC; } ul li a:hover{ background:#F5F5F5; }

 

[注] display:block 不能少，这样才能块状显示。

<6> li 中的元素水平排列,关键 float : left：

 

以下为引用内容： ul{ list-style-type:none; width:100%; } ul li{ width:80px; float:left; }