(译)用CSS设计日历

　2008-03-09 11:37:52　来源：WEB开发网　　　

核心提示：table元素如果你已经看过我的代码，就会发现我的日历是用table做的，(译)用CSS设计日历，不错，因为日历中显示的是表列数据，我给table定义了一个左边框，给每个td定义了一个右边框和下边框，所以这样说来用table布局是合理的，而用table定位制作整个网站是不合适的

table元素

如果你已经看过我的代码，就会发现我的日历是用table做的。不错，因为日历中显示的是表列数据，所以这样说来用table布局是合理的。而用table定位制作整个网站是不合适的，但我们完全可以有针对性的将table用在列表数据当中。像日历，程序表，图表，时间表我们都可以用table制作。此外试想一下，如果没有引用CSS，那些用CSS控制的浮动对象和绝对定位的对象会把页面变得一团糟。事实上，在我处于用CSS布局狂热的状态下，曾经试着不用table制作日历。相信我，这到最后会非常的头疼，因为你要考虑到所有不同的浏览器的兼容性并进行调试。这纯粹是浪费时间，还好我走过来了;-)

Molly Holzschlag写了一篇很好的文章“语义的意义”("The Meaning of Semantics")

设计日历

每个人都有自己习惯的设计步骤，我则先用Photoshop设计页面。在确定了颜色样式以后，用CSSEdit和BBEdit编辑代码。在这个日历当中只用一个gif图片，XTHML和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;
}

我们用ID选择器给日历命名，并且制定必要的属性比如width,padding,...等等。如果整页只有一个talbe的话，也可以写在table标签中。

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标签进行定义。我给table定义了一个左边框，给每个td定义了一个右边框和下边框。当然除了这么定义以外肯定还有其他的方法.

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;
}

日历中只有一个图片，在CSS中定义背景的图片的三种不同位置来3个不同背景,用了几个样式定义了日历月份导航以及当前日期.

*查看CSS

*查看日历

添加更多有亲和力的代码

有些tables中的元素能够帮助用屏幕阅读机的读者更容易的阅读,比如在代码中添加属性摘要.想了解更多表格亲和力的文章首选Roger Johansson的"深入表格(Bring on the tables)"

在我的日历中添加了一些为屏幕阅读机阅读所必须的缩写属性(abbr),来解释周日的"S",周一的"M",周二的"T"等等.但我搞不懂,缩写属性(abbr)是对内容的缩略写法,而我用在日历中却恰恰相反(译者注:作者用abbr="Sunday"属性解释了"S"的意思).所以我想知道我这么做是否正确.如果你知道正确的写法请告诉我,谢谢;-)

原文地址：Veerle's blog翻译：wx2.org