CSS样式ul与li标签属性与布局技巧_黑衣教主

个人资料

微博

正文字体大小：大中小

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

(2010-10-02 16:43:34)

标签：

分类： Css

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

阅读┊ 收藏 ┊ 喜欢 ▼ ┊打印┊举报/Report

前一篇：ASCII码