css学习之日历的制作


<!DOCTYPE html>
<html>
<head>
    <title>日历</title>
    <meta charset="utf-8">
    <style type="text/css">
        table{
            margin:0;
            padding: 0;
            border-collapse: collapse;
            color: #333;
        }
        table td,table th{
            margin:0;
            padding:0.3em;
        }
        table caption{
            font-weight: bold;
            font-size: 1.25em;
            padding-top: 0.2em;
            padding-bottom: 0.2em;
            background-color: #d4dde6;
        }
        table caption[rel="prev"]{
            float: left;
            margin-left: 0.2em;
        }
        table caption[rel="next"]{
            float: right;
            margin-right: 0.2em;
        }
        table caption a:link,table caption a:visited{
            text-decoration: none;
            color: #333;
            padding: 0 0.2em;
        }
        table caption a:hover,table caption a:active,table caption a:focus{
            background-color: #6d8ab7;
        }
        table thead th{
            background-color: #d4dde6;
            border-bottom: 1px solid #a9bacd;
            font-size: 0.873em;
        }
        table tbody{
            background-color: #d0d9e2;
            text-shadow: 1px 1px 1px white;
            color: #a4a4a4;
        }
        table tbody td{
            background-color:#a7afb2;
            color: #000; 
            border-top: 1px solid #e0e0e1;
            border-right: 1px solid #9f9fa1;
            border-bottom: 1px solid #acacad;
            border-left: 1px solid #dfdfe0;
            text-align: center;
        }
        table tbody td:hover,table tbody td.selected{
            background-color: #464b4d;
        }
        .no-effect{
            background-color: #d4dde6;
            text-shadow: 1px 1px 1px white;
            color: #a4a4a4;
        }
    </style>
</head>
<body>
<table cellspacing="0">
    <caption><a href="#" rel="prev">&lt</a>January 2008<a href="#" rel="next">&gt</a></caption>
    <thead>
    <tr>
        <th scope="col">Sun</th>
        <th scope="col">Mon</th>
        <th scope="col">Tue</th>
        <th scope="col">Wed</th>
        <th scope="col">Tur</th>
        <th scope="col">Fri</th>
        <th scope="col">Sat</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="no-effect">30</td>
        <td class="no-effect">31</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td>17</td>
        <td>18</td>
        <td>19</td>
    </tr>
    <tr>
        <td>20</td>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>25</td>
        <td>26</td>
    </tr>
    <tr>
        <td>27</td>
        <td>28</td>
        <td>29</td>
        <td>30</td>
        <td>31</td>
        <td class="no-effect">1</td>
        <td class="no-effect">2</td>
    </tr>
    </tbody>
</table>
</body>
</html>

1.caption用于添加表格标题，summary属性用于描述表格的内容，和img标签的alt作用类似

2.用thead，tbody，tfoot可以把表格划分为几个逻辑部分，一个表格中只能使用一个thead和tfoot元素，但是可以使用多个tbody元素将复杂的表格划分

3.scope属性，定义将表头单元与数据单元相关联的方法（http://www.w3school.com.cn/tags/att_td_scope.asp）

4.col和colgroup标签用于管理列（col：http://www.w3school.com.cn/tags/tag_col.asp，colgroup：http://www.w3school.com.cn/tags/tag_colgroup.asp）

5.css规范中有两个表格边盒模型：单独的和叠加的。在单独模型中，各个单元格周围都有边框，在叠加模型中，单元格共享边框。用属性border-collapse（http://www.w3school.com.cn/cssref/pr_tab_border-collapse.asp）

秒客网

css学习之日历的制作

相关文章