CSS美化Calendar日历的雏形，并无日历功能，因为这个例子重点是介绍CSS，用CSS修饰一个日历的外表，没有加入真正的JavaScript日历代码。 演示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <title>Mini Calendar</title><br /> <style><br /> body {<br /> background-color: #ffffff;<br /> color: #000000;<br /> font-size: 90%;<br /> }<br /> .clmonth {<br /> border-collapse: collapse;<br /> }<br /> .clmonth caption {<br /> text-align: left;<br /> font: bold 110% Georgia, "Times New Roman", Times, serif;<br /> padding-bottom: 6px;<br /> }<br /> .clmonth th {<br /> border: 1px solid #AAAAAA;<br /> border-bottom: none;<br /> padding: 2px 8px 2px 8px;<br /> background-color: #CCCCCC;<br /> color: #3F3F3F;<br /> font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;<br /> }<br /> .clmonth td {<br /> border: 1px solid #EAEAEA;<br /> font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;<br /> padding: 2px 4px 2px 4px;<br /> vertical-align: top;<br /> }<br /> .clmonth td.previous, .clmonth td.next {<br /> background-color: #F6F6F6;<br /> color: #C6C6C6;<br /> }<br /> .clmonth td.active {<br /> background-color: #B1CBE1;<br /> color: #2B5070;<br /> border: 2px solid #4682B4;<br /> }<br /> </style><br /> </head><br /> <body><br /> <table class="clmonth" summary="Calendar for June 2004"><br /> <caption>June 2004</caption><br /> <tr><br /> <th scope="col">M</th><br /> <th scope="col">T</th><br /> <th scope="col">W</th><br /> <th scope="col">T</th><br /> <th scope="col">F</th><br /> <th scope="col">S</th><br /> <th scope="col">S</th><br /> </tr><br /> <tr><br /> <td class="previous">31</td><br /> <td class="active">1</td><br /> <td>2</td><br /> <td>3</td><br /> <td>4</td><br /> <td>5</td><br /> <td>6</td><br /> </tr><br /> <tr><br /> <td class="active">7</td><br /> <td>8</td><br /> <td>9</td><br /> <td>10</td><br /> <td>11</td><br /> <td>12</td><br /> <td>13</td><br /> </tr><br /> <tr><br /> <td>14</td><br /> <td>15</td><br /> <td>16</td><br /> <td class="active">17</td><br /> <td class="active">18</td><br /> <td>19</td><br /> <td>20</td><br /> </tr><br /> <tr><br /> <td>21</td><br /> <td>22</td><br /> <td>23</td><br /> <td class="active">24</td><br /> <td>25</td><br /> <td>26</td><br /> <td>27</td><br /> </tr><br /> <tr><br /> <td>28</td><br /> <td>29</td><br /> <td class="active">30</td><br /> <td class="next">1</td><br /> <td class="next">2</td><br /> <td class="next">3</td><br /> <td class="next">4</td><br /> </tr><br /> </table><br /> </body><br /> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>提示：可修改后代码再运行! 文章导航 广西大学生用AI解放工人双眼，百度深度学习平台全方位助力Css中inline的用法：按钮和文本框Input水平
