<html>
<head>
<title>Calendar</title>
<style>
.month {
border-collapse: collapse; /*合并边框*/
table-layout:fixed; /*固定宽度的布局方式*/
width:780px;
}
.month caption {
text-align: left;
font-family: 宋体, arial;
font-size:20px;
font-weight:normal;
padding-bottom: 6px;
font-weight:bold;
}
.month th {
border: 1px solid #999;
border-bottom: none;
padding: 3px 2px 2px;
margin:0;
background-color: #ADD;
color: #333;
font: 80% 宋体;
}
.month td {
border: 1px solid #AAA;
font: 12px 宋体;
padding: 2px 2px;
margin:0;
vertical-align: top;
}
.month td.previous, .month td.next {
background-color: #eee;
color: #A6A6A6;
}
.month td.active {
background-color: #B1CBE1;
border: 2px solid #4682B4;
}
.month ul {
list-style-type: none; /*清除事件前的小圆点*/
margin: 3px;
padding:0;
}
.month li {
color:#FFF;
padding:2px;
margin-bottom: 6px;
height:34px;
overflow:hidden; /*溢出设置为隐藏*/
width:100px;
border:1px #C00 solid;
background-color:#C66;
}
.month td li.important{
border:1px #FFF solid;
background-color:#F00;
}
</style>
</head>
<body>
<table class="month">
<caption>2014年8月</caption>
<tr>
<th>星期日</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
</tr>
<tr>
<td class="previous">27</td> /*表示上个月的日期*/
<td class="previous">28</td>
<td class="previous">29</td>
<td class="previous">30</td>
<td class="previous">31</td>
<td>1</td>
<td class="active">2
<ul>
<li class="important">完成书稿第3部分</li>
<li>查jQuery相关资料</li>
</ul></td>
</tr>
<tr>
<td class="active">3
<ul>
<li>网站改版</li>
</ul></td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td class="active">9 /*表示有具体安排的日子*/
<ul>
<li class="important">案例分析</li> /*有重要的日程安排*/
<li>回复读者邮件</li>
</ul>
</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td class="active">13<ul>
<li>网站改版策略</li>
</ul></td>
<td class="active">14
<ul>
<li class="important">录制jQuery视频教程</li>
<li>其他视频教程策划</li>
</ul>
</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>18</td>
<td>19
<td>20</td>
<td>21</td>
<td class="active">22
<ul>
<li>研讨会</li>
</ul>
</td>
<td class="active">23
<ul>
<li>学习编译原理</li>
<li>锻炼</li>
</ul>
</td>
</tr>
<tr>
<td>24</td>
<td class="active">25
<ul>
<li>准备资料</li>
<li class="important">学习编译原理</li>
</ul>
</td>
<td>26</td>
<td class="active">27
<ul>
<li class="important">准备资料</li>
<li>整理硬盘文件</li>
<li>检查全书</li>
</ul>
</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
<tr>
<td class="active">31
<ul>
<li class="important">准备资料</li>
<li>整理硬盘文件</li>
</ul>
</td>
<td class="previous">1</td>
<td class="previous">2</td>
<td class="previous">3</td>
<td class="previous">4</td>
<td class="previous">5</td>
<td class="previous">6</td>
</tr>
</table>
</body>
</html>效果图如下：
时间： 2024-10-12 13:47:28