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>
A CSS styled calendar
80酷酷网 80kuku.com