CSS中列表的使用

浏览数：23 / 时间：2015年06月09日

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>CSS中列表的使用</title>
 6 <style type="text/css">
 7 ul li{
 8     list-style-type:decimal;
 9     list-style-position:inside;
10 }
11 </style>
12 </head>
13 <!--
14 设置列表符号的样式：list-style-type
15         none                         无符号
16         disc                         实体的小圆点。(默认)
17         circle                         空心的小圆点。
18         square                         实心的小方块。
19         decimal                     1,2,3...
20         lower-roman                 i,ii,iii...
21         upper-roman                 I,II,III...
22         lower-alpha                 a,b,c,d,e...
23         upper-alpha                 A,B,C,D,E...
24         
25 设置清单项目左右移：list-style-position
26         inside                         清单项目较往右移。
27         outside                     清单项目正常显示(默认的属性)。
28         
29 设置列表符号的样式用图片（这种方法很少用）：list-style-image
30         URL                         list-style-image:url(lmk.gif)
31         none                         不会显示任何图象
32         
33 清单的简化设置：list-style:circle inside url("bullet.gif")
34 -->
35 <body>
36 <ul>
37   <li>  站在岁月的岸边，向自己的过往打个水漂吧……</li>  
38   <li>2011我娶你，2012我保护你，2013爱你一生，2014爱你一世！</li> 
39   <li>人生就像一场旅行，在乎的不是目的地。而是沿途的"SB"，以及对付"SB"时的心情！</li>  
40   <li>臭男人都喜欢骚女人。</li>  
41   <li>系好安全带，前方也许有场爱情正等着你。</li>  
42   <li>枕着打印机睡，就能打印出一整夜的梦吧？</li>
43 </ul>
44 </body>
45 </html>