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

时间：2014-07-14 22:14:04 阅读：286 评论：0 收藏：0 [点我收藏+]

<!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>

CSS美化Calendar日历的雏形，并无日历功能,布布扣,bubuko.com

标签：style blog http color for io

原文地址：http://www.cnblogs.com/youtianxia/p/3842450.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行