十二、CSS列表和表格相关属性

一、列表相关属性

问题：
1、html中什么是列表标签？
有序列表：<ol><li></li></ol>
无序列表：<ul><li></li></ul>

css为列表元素提供了相关的属性来进行操作，常用的属性如下：

属性	值	说明
list-sytle		在一个声明中设置
list-style-image		将图象设置为列表项目标记。主要有URL值
list-style-position		将图象设置为列表项票房的放置，主要有outside和inside两个值
list-style-type		设置列表项目标记的类型。主要有disc、circle、square、decimal、decimal-leading-zero、lower-roman、upper-roman、lower-greek、lower-latin、upper-latin、armenian、georgin、none

更多列表属性请参考：
http://www.runoob.com/css/css-list.html

上课案例1用列表属性实现：
html代码

<ul class="a">
        <li>aaaaaa</li>
        <li>bbbbbb</li>
        <li>cccccc</li>
        <li>dddddd</li>
    </ul>

    <ul class="b">
        <li>aaaaaa</li>
        <li>bbbbbb</li>
        <li>cccccc</li>
        <li>dddddd</li>
    </ul>

样式

<style type="text/css">
        ul.a{
            list-style-image: url('icon.png');
            list-style-position: outside;
        }
        ul.a li{
            border:1px solid #ffcc00;
        }

        ul.b{

            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
        ul.b li{
            background-image: url("icon.png");
            background-repeat: no-repeat;
            border:1px solid #ffcc00;
            padding-left:25px; 
        }
    </style>

效果：

效果

坑点

list-style-image跟 list-style-type两属性是冲突的两个不能同时使用

二、css表格相关属性

css为表格元素提供了相关的属性来进行操作，常用的属性如下:

属性	值	说明
border-collapse	collapse	设置是否把表格边框合并为单一的边框
border-spacing		设置分隔单元格边框的距离
caption-side		设置表格标题的位置
empty-cells		设置是否显示表格中的空单元格,值有hide show

注意坑点

border-collapse和 border-spacing和两属性是相冲的，设置了一个就是能设置另一个

案例：
html代码

<table id="customers">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>001</td>
            <td>小明</td>
            <td>男</td>
        </tr>
        <tr class="alt">
            <td>002</td>
            <td>小萌</td>
            <td>男</td>
        </tr>
        <tr>
            <td>003</td>
            <td>小红</td>
            <td>女</td>
        </tr>
        <tr class="alt">
            <td>004</td>
            <td>小蓝</td>
            <td>女</td>
        </tr>
    </table>

css代码

<style type="text/css">
        #customers{
            font-family: 黑体;
            width: 100%;
            border-collapse: collapse;
        }

        #customers td,#customers th{
            font-size: 13px;
            border:1px solid #98bf21;
        }
        #customers th{
            font-size: 14px;
            text-align: center;
            color: #ffffff;
            background-color: #A7c942;
        }

        #customers tr.alt td{
            color: #000000;
            background-color: #EAF2D3;
        }
    </style>

效果

效果图

最后编辑于：2017.11.24 09:17:50