• 【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 }
  • 相关阅读:
    数列大小比较
    C的输入&输出
    PHP常用函数大全
    选择成就不一样的周末
    美图上市,跟我有关系?
    专心跑步
    越走窄的道路,谁能带我飞
    赶上了双12的末班车
    难道只要期待
    未达到的大梁、二梁,有希望便不会累
  • 原文地址:https://www.cnblogs.com/xiongjiawei/p/6758509.html
Copyright © 2020-2023  润新知