日期组件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="test1.css">
 7 </head>
 8 <body>
 9 <div id="box">
10     <table>
11         <caption>
12             <a href="#" rel="prev">&lt;</a>Januarary
13             <a href="#" rel="next">&gt;</a>
14         </caption>
15         <thead>
16         <tr>
17             <th scope="col">Sun</th>
18             <th scope="col">Mon</th>
19             <th scope="col">Tue</th>
20             <th scope="col">Wed</th>
21             <th scope="col">Tur</th>
22             <th scope="col">Fri</th>
23             <th scope="col">Sat</th>
24         </tr>
25         </thead>
26         <tbody>
27         <tr>
28             <td><a href="">30</a></td>
29             <td><a href="">31</a></td>
30             <td><a href="">1</a></td>
31             <td><a href="">2</a></td>
32             <td><a href="">3</a></td>
33             <td><a href="">4</a></td>
34             <td><a href="">5</a></td>
35         </tr>
36         <tr>
37             <td><a href="">6</a></td>
38             <td><a href="">7</a></td>
39             <td><a href="">8</a></td>
40             <td><a href="">9</a></td>
41             <td><a href="">10</a></td>
42             <td><a href="">11</a></td>
43             <td><a href="">12</a></td>
44         </tr>
45         <tr>
46             <td><a href="">13</a></td>
47             <td><a href="">14</a></td>
48             <td><a href="">15</a></td>
49             <td><a href="">16</a></td>
50             <td><a href="">17</a></td>
51             <td><a href="">18</a></td>
52             <td><a href="">19</a></td>
53         </tr>
54         <tr>
55             <td><a href="">20</a></td>
56             <td><a href="">21</a></td>
57             <td><a href="">22</a></td>
58             <td><a href="">23</a></td>
59             <td><a href="">24</a></td>
60             <td><a href="">25</a></td>
61             <td><a href="">26</a></td>
62         </tr>
63         </tbody>
64     </table>
65 </div>
66 </body>
67 </html>

css

 1 table{
 2     border-collapse: separate;
 3     border-spacing: 0;
 4 
 5 }
 6 table th,table td{
 7     margin:0;
 8     padding:0;
 9 }
10 table caption{
11     font-size:1.25em;
12     padding-top:0.692em;
13     padding-bottom: 0.692em;
14     background: #d4dde6;
15 }
16 table caption [rel="prev"]{
17     float:left;
18     margin-left:0.2em;
19 }
20 table caption [rel="next"]{
21     float:right;
22     margin-right:0.2em;
23 }
24 table caption a{
25     text-decoration: none;
26     color:#333;
27     padding:0 0.2em;
28 }
29 table caption a:hover{
30     background: #6d8ab7;
31 }
32 table thead th{
33     background: #d4dde6;
34     border-bottom:1px solid #a9bacb;
35 }
36 table tbody{
37     color:#a4a4a4;
38     text-shadow:1px 1px 1px white;
39     background: #d0d9e2;
40 }
41 table tbody td{
42     border-top:1px solid #e0e0e1;
43     border-right: 1px solid #9f9fa1;
44     border-bottom:1px solid #acacad;
45     border-left:1px solid #dfdfe0;
46 }
47 table tbody a{
48     text-decoration: none;
49     display: block;
50     color:#333;
51     background: #c0c8d2;
52     font-weight:bold;
53     padding:0.385em 0.692em 0.308em 0.692em;
54 }
55 table tbody a:hover,
56 table tbody a:focus,
57 table tbody a:active,
58 table tbody .selected a:link,
59 table tbody .selected a:visited,
60 table tbody .selected a:hover,
61 table tbody .selected a:focus,
62 table tbody .selected a:active
63 {
64     color:white;
65     text-shadow: 1px 1px 2px #22456b;
66 }
67 table tbody td:hover{
68     border-top:1px solid #2a3647;
69     border-right:1px solid #465977;
70     border-bottom:1px solid #576e92;
71     border-left:1px solid #466080;
72 }