10.8 制作大视图模式

需要说明的是，本案例要求不修改HTML结构。在此前提下，大视图模式无法在IE浏览器中实现，除非使用JavaScript动态修改DOM结构，而这和修改HTML结构就没有本质区别了，因此实现大视图模式页面仪作为帮助读者理解CSS的核心思想的一个案例。

一、通过display属性改变盒子的类型

仍然使用原有的HTML结构。要实现这个大模式的日历，最困难的一点是，在原本的HTML中，表格是一个二维结构，而在大模式中，希望它成为一维的线性结构，所有单元格从上向下依次排列。

从某种角度来说，这个要求已经改变了HTML本身的语义。因此，这实际上也是一个不经常遇到的要求，但是从CSS规范的角度来说，是可以做到的。

在讲解盒子模型的第4章最后一节中，增加讲到过，任何元素都有display属性，它经常用的值是none、inline和block。将一个元素的display属性设置为none，它就被隐藏起来了。inline则是行内元素，例如a标记等。而将一个原本是行内元素，例如a标记，设置为block，就成为一个块级元素了。

实际上，display属性的值还远不只这些。在使用具有代码提示功能的软件（如Expression Web）时，输入冒号以后，就会出现一个下拉列表，提示用户某个属性可能的属性值有哪些，display的候选属性就有很多。lodidance.com

每一种值都代表着一定的排版行为，例如inline-block就表示该元素占据一定的矩形空间，但是又像行内元素一样排列，等等。具体含义可以查看CSS的规范，里面有详细的定义。

在表格中，各种表格元素（比如单元格、行等）都有自己的displsy属性值，它们的表现也各不相同a如果强制转换某个元素的display属性，就会随之改变它的表现行为。例如，把td的display属性转换为block．它就会像一个在标准流中的block-样，宽度默认会自动伸展，依次竖直排列，而这正是我们希望在大视图模式中显示的效果。

因此我们在中模式的基础上，在CSS部分增加如下代码：

折叠展开CSS 代码复制内容到剪贴板

1. .month td{
2. display:block;
3. }
4. .month th{
5. display:none;
6. }

这样两个设置，首先把单元格的display属性转换为block，然后把星期一到星期日的表头行隐藏起来，因为它已经没有意义了。

可以看到此时效果所有的单元格已经被成功地“拉直”成为一竖排了。

注意：这个效果在IE 6和IE 7中都是无效的。

二、设置日程安排项目

现在的缺陷是每个日程安排信息的位置还是太小了，而仅让各个活动信息的宽度适应整个表格的宽度，又显得长了一些，因此希望每行显示两个活动。

首先，把每个活动安排信息的宽度变宽，并修改背景图像。当然可以使用前面的案例中学到的方法，通过“滑动门”技术以及背景图片的定位，用一个图片来实现需要，但是这不是本案例的天键问题．因此这里就为大模式准备两个相应的图片就可以了。

问题的关键是，如何让原来排在下面的li移动到右边。我们很自然会想到用浮动的方法，设置float属性，代码如下。

折叠展开CSS 代码复制内容到剪贴板

1. .month li{
2. width:370px;
3. background:transparent url(level-2-long.gif) no-repeat;
4. float:left;
5. }
6. .month td li.important{
7. background:transparent url(level-1-long.gif) no-repeat;
8. }

这样设置之后，原来的竖排一定可以变成横排。如果还是竖排，就是因为li的宽度设置得太宽了，以至于浮动方式下，一行中放不下两个活动。

请读者在这里停止阅读，先不要着急看结果，思考一下，用这种方法得到的并排效果存在什么问题？

这个问题的答案实际上在本书最开始讲解盒子模型的时候已经提到过，当一个盒子内部只有浮动对象的时候．这个盒子本身的高度为o，也就是说，此时活动安排信息的盒子已经脱离标准流了。

也就是td不会向下伸展，这显然不是希望的效果。要怎么解决这个问题呢？答案还是使用diplay属性，去掉float属性，然后增加一条代码：

折叠展开CSS 代码复制内容到剪贴板

1. display:table-cell;

现在的效果这正是我们需要的效果。“display:table-cell;”的作用就是把li元素的表现行为转换为表格单元格的行为。因此它就依次横排了。

这个方法也不是完美的，例如，如果再增加一个安排，这时的效果将变成增加到表项后，效果产生纰漏。

3个项目会共同分享整个宽度，因此在完全不改变HTML结构的情况下，要得到非常完美的效果是比较困难的。或者说，在编写HTML的时候．就要充分考虑到在不同模式下的控制问题，就好像为了在小视图模式能够隐藏“星期”两字，事先就在HTML中设置了span钩
子一样。

通过这个例子，最重要的一点是，希望读者可以更深刻地理解display属性的重要作用。lodidance.com

在IE 6和IE 7中都不支持display属性从单元格到普通块级元素的转换，因此这种方法不可能应用于IE浏览器。如果读者有兴趣继续探索，找到变通或者更有趣的方法，欢迎来网页学习网探讨。

目前能够想到的，既可以适应3种浏览器，又可以不改变HTML结构，实现这个日历效果的方式就是根本不用table表格标记，而改用ul列表标记。因为ul本身是一个线性结构，只要按照一定宽度换行，就可以形成二维结构，这不存在无法克服的障碍；而反过来把二维结构显示为线形结构，“IE目前不支持”的障碍似乎是无法克服的。

本章重点

本章中针对表格的CSS样式的设置进行了深入的探讨。主要包括3个方面。

● 关于表格的HTML结构及其相应的css属性设置。

● 使用JavaScript实现对:hove伪类别的模拟。

● 通过3种模式的“日历”这个案例，深入综合地实践CSS样式设计的多个技术要点，希望读者能够认真把这个案例彻底吃透。

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