(译)用CSS设计日历 - 网易学院·教程

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

落叶秋客 [返回首页]