日期组件
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"><</a>Januarary 13 <a href="#" rel="next">></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 }
