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;
}