(译)用CSS设计日历
[这个贴子最后由番茄红了在 2005/09/29 00:44pm 第 1 次编辑]
最近发现自己的皮肤日历都做得不太好，于是上网搜索了一下关日历设计的信息。以下内容来自wx2.org
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个不同背景,用了几个样式定义了日历月份导航以及当前日期.
[url=*查看CSS]http://www.wx2.org/article/calendar/styles.css[/url]
[url=**查看日历]http://www.wx2.org/article/calendar/index.html[/url]
添加更多有亲和力的代码
有些tables中的元素能够帮助用屏幕阅读机的读者更容易的阅读,比如在代码中添加属性摘要.想了解更多表格亲和力的文章首选 Roger Johansson 的 "深入表格(Bring on the tables)"
在我的日历中添加了一些为屏幕阅读机阅读所必须的缩写属性(abbr),来解释周日的"S",周一的"M",周二的"T"等等.但我搞不懂,缩写属性(abbr)是对内容的缩略写法,而我用在日历中却恰恰相反(译者注:作者用abbr="Sunday"属性解释了"S"的意思).所以我想知道我这么做是否正确.如果你知道正确的写法请告诉我,谢谢;-)
![[PJblog^3]技术支持论坛 - PJBLOG SUPPORT FORUM](images/phpwind/logo.gif){kind=logo}
