使用无序列表:即UL 看一个最简单的例子: 双击代码全选1 2 3 4 5 6 | < ul >
< li >Item 1</ li >
< li >Item 2</ li >
< li >Item 3</ li >
< li >Item 4</ li >
</ ul >
| 这是一个未加修饰的纵向列表 1:设置列表的边界 双击代码全选1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | #base {
border: 1px solid #000;
margin: 2em;
width: 10em;
padding: 5px;
}
html中这样写,就会呈现一个带边框的无序列表
< div id = "base" >
< ul >
< li >Item 1</ li >
< li >Item 2</ li >
< li >Item 3</ li >
< li >Item 4</ li >
</ ul >
</ div >
| 2:设定列表的图像 可以设定列表的样式为左边带一个图像,样式如下: 双击代码全选1 2 3 4 5 | ul {
list-style-type: disc;
list-style-image: url(bullet.gif);
list-style-position: inside;
}
| disc表示实心的圆,list-style-image表示列表用到的小图像,如果这个图像的url 不正确时,disc才会起作用,inside表示列表是在区块内部的。 3:如何在段落中使用列表 样式如下: 双击代码全选1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | #inline-list {
border: 1px solid #000;
margin: 2em;
width: 80%;
padding: 5px;
font-family: Verdana, sans-serif;
}
#inline-list p {
display: inline;
}
#inline-list ul, #inline-list li {
display: inline;
margin: 0;
padding: 0;
color: #339;
font-weight: bold;
}
| 4:水平导航双击代码全选1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | #h-contain {
padding: 5px;
border: 1px solid #000;
margin-bottom: 25px;
}
#pipe ul {
margin-left: 0;
padding-left: 0;
display: inline;
}
#pipe ul li {
margin-left: 0;
padding: 3px 15px;
border-left: 1px solid #000;
list-style: none;
display: inline;
}
#pipe ul li.first {
margin-left: 0;
border-left: none;
list-style: none;
display: inline;
}
| #h-contain定一个一个边界为1的区块,水平导航用的也是inline方式,li.first定义第一个 列表元素没有左边那个象素为1的border。 下面的样式是tab方式的水平导航: 双击代码全选1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | #tabs ul {
margin-left: 0;
padding-left: 0;
display: inline;
}
#tabs ul li {
margin-left: 0;
margin-bottom: 0;
padding: 2px 15px 5px;
border: 1px solid #000;
list-style: none;
display: inline;
}
#tabs ul li.here {
border-bottom: 1px solid #ffc;
list-style: none;
display: inline;
}
| li的class如果为here,则是选中的。
|