【CSS3】表格、列表 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <link rel="stylesheet" type="text/css" href="style.css">
 7 </head>
 8 <body>
 9     <table border=""><!--border属性只要设置，值为空也能显示边框-->
10         <caption>我的表格</caption>
11         <tr><td>单元格单元格单元格单元格单元格单元格</td><td>单元格</td><td>单元格</td></tr>
12         <tr><td>单元格</td><td></td><td>单元格</td></tr>
13         <tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
14     </table>
15     <ul>
16         <li>无序列表项1</li>
17         <li>无序列表项2</li>
18         <li>无序列表项3</li>
19     </ul>
20     <ol>
21         <li>有序列表项1</li>
22         <li>有序列表项2</li>
23         <li>有序列表项3</li>
24     </ol>
25 </body>
26 </html>
 1 table{
 2     width: 200px;
 3     border-collapse:;/*默认值separate双边框；collapse单一边框。*/
 4     border-spacing: 2px;/*默认值2px；当border-collapse为collapse时此设置有效果，双边框的间距*/
 5     caption-side: bottom;/*默认值top表格之上，bottom表格之下。*/
 6     empty-cells:hide;/*默认值show显示空单元格；hide隐藏空单元格，此时需要border-collapse设置为separate才能看到效果*/
 7     table-layout: ;/*默认值auto；fixed列宽由表格宽度和列宽设定*/
 8 }
 9 ul{
10     list-style-type:upper-alpha;/*none无标记；disc默认实心圆；circle空心圆；square实心方块；list-style-type属性值在ul和ol上通用。*/
11     list-style-position: ;/*标志位置，默认outside，可设inside*/
12     /*list-style-image: url("img/鸟1.jpg");*//*默认值none*/
13 }
14 ol{
15     list-style-type:upper-alpha;/*默认decimal数字；decimal-leading-zero以01开头的数字；lower-roman小写罗马数字；upper-roman大写罗马数字；lower-alpha小写字母；upper-alpha大写字母；日文、拉丁文……等其他字符，可查CSS手册。*/
16     list-style-position: ;
17     /*list-style-image: url("img/鸟1.jpg");*/
18     list-style: circle inside;/*此属性可同时设置其他三个属性值*/
19 }

 

posted @ 2017-04-24 19:25  xiongjiawei  阅读(1009)  评论(0)    收藏  举报