首页 >> 读书频道 >> 电脑 >> (译)用CSS设计日历
 
· CSS滤镜属性详解
· target="
· 弹出网页窗口设计全攻略
· 捷足先登学用CSS:HT
· 4天学会 NoahWeb
· 4天学会 NoahWeb
· CSS入门教程之CSS的
· 用CSS来控制网页背景
· CSS基础教程集 CSS
· CSS基础教程集 从基础
· CSS基础教程集 从基础
· CSS基础教程集 从基础
 
· 电视剧《刁蛮公主》下载和
· 美容养颜手册
· 加油金顺剧情分集介绍完整
· 红楼梦:120回全本[清
· 素质教育在美国
· 全唐诗卷四十六
· 韩剧《布拉格恋人》剧情介
· 夜航船[作者:明·张岱]
· 局外人[作者:韩·可爱淘
· 现场流行病学
· 源氏物语[日本:紫式部]
· 武林寓言故事
 
· (出租)中动商场部分及写
· (出租)中动动漫基地&#
· 喜剧学院
· 《善德女王》剧情介绍
· 魔女18号 剧情
· 丑女无敌剧情介绍
· 魔女幼熙剧情介绍
· 龙游天下剧情介绍
· 震撼世界的七日剧情介绍
· 静静的白桦林剧情介绍
· 心情日记—老公今天我想对
· 旗舰剧情介绍
欢迎来到月影社区!如果您觉得这里不错,请推荐给您的朋友们。月影社区:http://wf66.com/

(译)用CSS设计日历


查看有无更新版本

关键字:CSS/HTML 2006-9-16

 

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"的意思).所以我想知道我这么做是否正确.如果你知道正确的写法请告诉我,谢谢;-)

(译)用CSS设计日历

[ 1 ]
(译)用CSS设计日历 num

打印本页 关闭

关于我们版权声明本站导航友情连结作品演示 TOP↑