10.5 多视图模式日历案例概述

日历是日常生活中随处可见的工具。计算机出现后，产生了很多供人们记录日程安排的备忘录软件。随着互联网的普及，将日历存储在互联网上就更方便了，无论走到哪里，只要能够登录互联网，就可以随时查询和登记各种日程信息。

Google推出了功能非常强大的日历软件，它不但具有普通日历的功能，还和移动通信相结合，用户可以和手机绑定，到达设定的时间时，用户就会收到一条提示短信。“Google日历”是完全基于Web的应用程序，所有操作都在浏览器中完成。

关于谷歌日历的更多介绍，请点击http://baike.baidu.com/view/1051365.htm#sub1051365

可以看到．Google日历提供了几种不同的视图模式，有的非常详细，可以查看每个小时的日程信息，而在比较粗略的月视图中，则可以查看整个月的安排情况。读者如果有兴趣，可以亲自试验一下Google日历的功能。lodidance.com

在这章中，我们也来实现一个日历的页面。为了更好地体现CSS的优点，在本案例中将通过不同的CSS设定对相同的日历表格实现3种显示模式，适于不同详细程度和大小的页面空间，三者之间可以方便地切换。为了便于讲解，把这3种模式分别称为小视图模式，中视图模式和大视图模式。中视图模式的效果如图1所示。

顶部显示年份和月份，并可以在3种视图模式之间切换。下面的表格中每个单元格放置一天的日程安排信息，同时可以设定每一个安排的重要性。普通的安排显示为橙色背景，重要安排显示为紫色背景。

当切换到小视图模式时，所有的详细安排信息都被隐藏起来，如图2左图所示，这样就可以非常节约空间。当鼠标指针经过某个放置了日程安排的单元格时，会在鼠标指针右下方出现一个方框，显示这一天的日程安排，如图2右图所示。

图1 中视图模式显示的日历

图2 小视图模式下显示日历

在中模式中，每条日程信息只显示前面的若干文字，后面的会被隐藏起来，而在大模式中可以显示更多的文字。

点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表