(译)用CSS设计日历

2016-01-29 12:32 2 1 收藏

(译)用CSS设计日历,(译)用CSS设计日历

【 tulaoshi.com - Html 】

pic

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/html/)

table元素

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

Molly Holzschlag写了一篇很好的文章的方法.

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

pic

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

*查看CSS

*查看日历

添加更多有亲和力的代码

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

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

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/html/)

来源:https://www.tulaoshi.com/n/20160129/1486482.html

延伸阅读
讯飞输入法随声译怎么用?   讯飞输入法随声译怎么用?随声译支持中译英、英译中同声传译。用户只要说出内容,就能将中/英文实时翻译成文字。接下来小编就教大家讯飞输入法随声译怎么用? 1)点击任意编辑框跳出讯飞输入法,接着点击上方功能栏图标,接着点击右边。 2)选择你要的识别模式,如中译英,接着对着话筒说...
标签: Web开发
初步介绍 当然,我知道现在有成千上万个关于 用CSS处理圆角 的教程,但不管怎么说,我仍然想把这篇文章展示给您。也希望您会发现这篇文章会非常有用。需要重点指出的是,这篇教程彻底地应用高级CSS技术,但是,我会尽力使初学者看起来简单。 CSS3 在这里还没有得到完全的应用,所以,知道现在,我会保持W3C验证的有效。 看一下演示 ...
怎么用360小清新日历替代系统日历 系统日历不仅界面看久了枯燥乏味而且功能单一,有时我们想查看一下农历或者节日都没有显示,最近小编在使用360安全卫士的时候发现在功能选项里自带了一个小清新日历,界面精致,而且功能强大,可以完全替代系统日历。不需要安装专业的日历软件,小清新日历已经完全可以满足我们的日常需求了。 小...

经验教程

658

收藏

49
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部