使用无序列表:即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 > |
可以设定列表的样式为左边带一个图像,样式如下:
1 2 3 4 5 | ul { list-style-type: disc; list-style-image: url(bullet.gif); list-style-position: inside; } |
不正确时,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; } |
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; } |
列表元素没有左边那个象素为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; } |
联系客服