A CSS styled calendar

80酷酷网    80kuku.com

  calendar|css 原文:http://veerle.duoh.com/comments.php?id=312_0_2_0_C15
作者:Veerle

这篇文章很早以前就被王小二翻译传播到国内,我就不翻译了,给出效果了代码。那是国内的设计师还持着css能做出漂亮的叶子来吗?
不知道什么原因小二的站不能访问了? 预览效果

配色


唯一使用的图片



主要
#calendar {
 width: 141px;
 padding: 0;
 margin: 0;
 border-left: 1px solid #A2ADBC;
 font: normal 12px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 color: #616B76;
 text-align: center;
 background-color: #fff;
}

td {
 border-right: 1px solid #A2ADBC;
 border-bottom: 1px solid #A2ADBC;
 width: 20px;
 height: 20px;
 text-align: center;
 background: url(images/bg_calendar.gif) no-repeat right bottom;
}

td a:link, td a:visited {
 color: #608194;
 background: url(images/bg_calendar.gif) no-repeat;
}

td a:hover, td a:active {
 color: #6aa3ae;
 background: url(images/bg_calendar.gif) no-repeat right top;
}
xhtml
<table id="calendar" cellspacing="0" cellpadding="0" summary="This month's calendar">
<caption><a href="#" title="previous month" class="nav">«</a> March <a href="#" title="next month" class="nav">»</a></caption>

 <tr>
  <th scope="col" abbr="Sunday" title="Sunday">S</th>
  <th scope="col" abbr="Monday" title="Monday">M</th>
....
  <th scope="col" abbr="Saturday" title="Saturday">S</th>
 </tr>
 <tr>
  <td> </td>
  <td> </td>
  <td>1</td>

  <td>2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td>
 </tr>
....
</table>

分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: