单页日历

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>doris</title>
<link href="c.css" type="text/css" rel="stylesheet" />
</head>


<body>
  <table>
    <caption>2016年8月</caption>
<colgroup span="1" class="weekend"></colgroup>
<colgroup span="5" class="weekday"></colgroup>
<colgroup span="1" class="weekend"></colgroup>
<tr id="days">
 <th>日 SUN</th>
 <th>一 MON</th>
 <th>二 TUE</th>
 <th>三 WED</th>
 <th>四 THU</th>
 <th>五 FRI</th>
 <th>六 SAT</th>
</tr>
<tr>
 <td></td>
 <td>
   <div class="date"><a href="#">1</a><span>廿九</span></div>
<div class="memo"></div>
 </td>
 <td>
   <div class="date"><a href="#">2</a><span>卅</span></div>
<div class="memo"></div>
 </td>
 <td>
   <div class="date"><a href="#">3</a><span>七月</span></div>
<div class="memo"></div>
 </td>
 <td>
   <div class="date"><a href="#">4</a><span>初二</span></div>
<div class="memo"></div>
 </td>
 <td id="today">
   <div class="date"><a href="#">5</a><span>初三</span></div>
<div class="memo"></div>
 </td>
 <td>
   <div class="date"><a href="#">6</a><span>初四</span></div>
<div class="memo"></div>
 </td><!--第一行结束-->
</tr>
<tr>
 <td>
   <div class="date"><a href="#">7</a><span>立秋</span></div>
<div class="memo"></div>
 </td>
 <td>
   <div class="date"><a href="#">8</a><span>初六</span></div>
<div class="memo"></div>
 </td>
 <td>
   <div class="date"><a href="#">9</a><span>七夕节</span></div>
<div class="memo"></div>
 </td>
 <td>
   <div class="date"><a href="#">10</a><span>初八</span></div>
<div class="memo"></div>
 </td>
 <td>
   <div class="date"><a href="#">11</a><span>初九</span></div>
<div class="memo"></div>
 </td>
 <td>
   <div class="date"><a href="#">12</a><span>初十</span></div>
<div class="memo"></div>
 </td>
 <td>
   <div class="date"><a href="#">13</a><span>十一</span></div>
<div class="memo"></div>
 </td>
</tr><!--第二行结束-->
<tr>
 <td>
   <div class="date"><a href="#">14</a><span>十二</span></div>
<div class="memo"></div>
 </td>
 <td>
   <div class="date"><a href="#">15</a><span>十三</span></div>
<div class="memo"></div>
 </td>
 <td>
   <div class="date"><a href="#">16</a><span>十四</span></div>
<div class="memo">家庭聚餐</div>
 </td>
 <td>
   <div class="date"><a href="#">17</a><span>十五</span></div>
<div class="memo"></div>
 </td>
 <td>
   <div class="date"><a href="#">18</a><span>十六</span></div>
<div class="memo"></div>
 </td>
 <td>
   <div class="date"><a href="#">19</a><span>十七</span></div>
<div class="memo"></div>
 </td>
 <td>
   <div class="date"><a href="#">20</a><span>十八</span></div>
<div class="memo"></div>
 </td>
</tr><!--第三行结束-->
<tr>
 <td>
   <div class="date"><a href="#">21</a><span>十九</span></div>
<div class="memo"></div>
 </td>
 <td>
   <div class="date"><a href="#">22</a><span>廿</span></div>
<div class="memo"></div>
 </td>
 <td>
   <div class="date"><a href="#">23</a><span>处暑</span></div>
<div class="memo"></div>
 </td>
 <td>
   <div class="date"><a href="#">24</a><span>廿二</span></div>
<div class="memo"></div>
 </td>
 <td>
   <div class="date"><a href="#">25</a><span>廿三</span></div>
<div class="memo"></div>
 </td>
 <td>
   <div class="date"><a href="#">26</a><span>廿四</span></div>
<div class="memo"></div>
 </td>
 <td>
   <div class="date"><a href="#">27</a><span>廿五</span></div>
<div class="memo"></div>
 </td>
</tr><!--第四行结束-->
<tr>
 <td>
   <div class="date"><a href="#">28</a><span>廿六</span></div>
<div class="memo"></div>
 </td>
 <td>
   <div class="date"><a href="#">29</a><span>廿七</span></div>
<div class="memo"></div>
 </td>
 <td>
   <div class="date"><a href="#">30</a><span>廿八</span></div>
<div class="memo"></div>
 </td>
 <td>
   <div class="date"><a href="#">31</a><span>廿九</span></div>
<div class="memo"></div>
 </td>
 <td></td>
 <td></td>
 <td></td>
</tr>
 

  </table>
</body>
</html>





css部分


/* CSS Document */
*{
  margin:0;
  padding:0;
  font-size:12px;
}
body{
  background-color:#fcfcfc;
}
table{
  width:777px;
  border-collapse:collapse;
  font-size:1px;
  border:1px solid gray;
  table-layout:fixed;
}
caption{
  font-size:20px;
  font-family:Georgia, sans-serif;
  padding-bottom:6px;
}
th{
  font-family:Tahoma,"宋体",sans-serif;
  background:#fff49b;
  padding:3px;
}
td{
  height:110px;
  vertical-align:top;
  padding:0 0 0 3px;
  border:1px solid gray;
}
colgroup.weekend{
  background:#ffe1de;
}
div.date a{
  width:28px;
  display:block;
  float:left;
  font-size:22px;
  font-family:Georgia,sans-serif;
  text-decoration:none;


  
}
div.date span{
  color:gray;
  float:left;
  padding-top:8px;
}
div.memo{
  clear:both;
  margin-top:5px;
}
td#today{
  border:2px solid black;
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值