CSS美化Calendar日历的雏形，并无日历功能

发布时间：2018-08-25 09:12:09 所属栏目：专访来源：站长网

导读：CSS美化Calendar日历的雏形，并无日历功能，因为这个例子重点是介绍CSS，用CSS修饰一个日历的外表，没有加入真正的 Java Script日历代码。演示： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-tr

　　CSS美化Calendar日历的雏形，并无日历功能，因为这个例子重点是介绍CSS，用CSS修饰一个日历的外表，没有加入真正的JavaScript日历代码。

　　演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mini Calendar</title> <style> body { background-color: #ffffff; color: #000000; font-size: 90%; } .clmonth { border-collapse: collapse; } .clmonth caption { text-align: left; font: bold 110% Georgia, "Times New Roman", Times, serif; padding-bottom: 6px; } .clmonth th { border: 1px solid #AAAAAA; border-bottom: none; padding: 2px 8px 2px 8px; background-color: #CCCCCC; color: #3F3F3F; font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif; } .clmonth td { border: 1px solid #EAEAEA; font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif; padding: 2px 4px 2px 4px; vertical-align: top; } .clmonth td.previous, .clmonth td.next { background-color: #F6F6F6; color: #C6C6C6; } .clmonth td.active { background-color: #B1CBE1; color: #2B5070; border: 2px solid #4682B4; } </style> </head> <body> <table class="clmonth" summary="Calendar for June 2004"> <caption>June 2004</caption> <tr> <th scope="col">M</th> <th scope="col">T</th> <th scope="col">W</th> <th scope="col">T</th> <th scope="col">F</th> <th scope="col">S</th> <th scope="col">S</th> </tr> <tr> <td class="previous">31</td> <td class="active">1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td class="active">7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> </tr> <tr> <td>14</td> <td>15</td> <td>16</td> <td class="active">17</td> <td class="active">18</td> <td>19</td> <td>20</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td class="active">24</td> <td>25</td> <td>26</td> <td>27</td> </tr> <tr> <td>28</td> <td>29</td> <td class="active">30</td> <td class="next">1</td> <td class="next">2</td> <td class="next">3</td> <td class="next">4</td> </tr> </table> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!