10.7 制作小视图模式

下面在中模式的基础上，制作小视图模式的效果，效果如图1所示。小视图模式的日历实例文件位于网页学习网CSS教程资源中的“第1O章\03\calendar-small.htm”。

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

为了便于读者理解在中模式的基础上修了哪些CSS设置，这里将完全保持现有的CSS和HTML不变，然后增加若干条CSS样式，实现小模式的效果。HTML部分仅在caption部分的3种模式切换的链接做了修改，与日历本身的所有代码不做任何修改。

一、整体设置

① 首先将整个表格的宽度设置为245像素，将宽度变窄，代码如下。lodidance.com

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

.month {
width:245px;
}

② 把需要隐藏的内容都隐藏起来。代码如下，即把每列的列头单元格中的“星期”两字隐藏，以及把每天的活动安排信息列表隐藏。“星期”两个字在一开始的时候，都已经放置在span中了，现在将这些span隐藏起来即可。

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

.month th span ,
.month ul {
display:none;
}

至此小视图模式的外观已经做好了。但是仪做成这样还体现不出足够的“技术含量”，我们还希望鼠标指针经过某个单元格的时候，能够把活动安排的信息内容以弹出框的形式显示出来。

二、为IE 8和Firefox制作鼠标指针经过时弹出的信息框

Firefox和IE 8都支持td的“:hover”伪类，也就是可以设鬣“td:hover”的样式，那么显示弹出信息框这个任务就可以完全依靠CSS来完成了。

注意：如果要使IE 8能够支持“td:hover”，必须正确设置DOCTYPE，设置成xhtml l.0 transitional即可。如果没有设置DOCTYPE，在IE 8中的表现会和IE 6中一样。

① 首先实现鼠标指针经过有活动安排的单元格时，使单元格变色。这个要求比较容易实现，具体代码如下。

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

.month td.active:hover{
background:aqua;
}

② 设置显示活动安排。摹奉思路是把隐藏的ul再显示出来，但是需要对样式做一些调整。假设先仅仅显示该列表。而不做任何其他调整，代码为：

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

.month td.active:hover ul{
display:block;
}

这时效果由于显示了活动信息所在的ul，因此导致表格单元格的高度发生了变化，这不是希望的效果。

③ 这提示我们，为了显示活动安排信息后，不影响日历表格本身的单元格，必须使ul脱离标准流，因此必须使用绝对定位。这里将设置改为：

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

.month td.active:hover ul{
display:block;
position:absolute;
}

这时的效果可以看到已经相当接近目标了。

④ 设置背景色和边框。背景色使用和日历上的active单元格相同的背景色即可，边框用什么颜色好呢？由于这个边框会和底下的表格重叠，因此用任何颜色都有可能显得比较杂乱，这里用白色是一个比较好的选择，它可以使弹出的信息和背景上的表格有一定的隔离效果。代码如下：

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

.month td.active:hover ul{
border:3px #FFF solid;
background:#bde;
display:block;
position:absolute;
}

⑤ 设置margin和padding，使这个矩形内的排版更美观一些。和前面相似，增加下面两行设置。

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

margin:10px 0 0;
padding:7px 2px 0 5px;

这两行代码的设置含义是，通过padding使信息文字摆放到中间位置，通过margin把这个矩形框整体向下移动一些，否则距离鼠标指针距离位置有些太近了。

注意：为了把这个矩形框整体向下移动一定距离，使用的是margin属性，而不是通常对绝对定位元素使用的top属性。这是因为，如果使用top属性，就必须使鼠标指针经过的单元格成为这个矩形框（本质是一个ul列表）的定位基准，而td的display属性默认值是一种特殊的类型，不是普通的block，一旦将td的display转换成block，整个表格的结构就会被破坏，因此这不是可行的方法。如果不使用top属性，绝对定位的元素仍然在它原来的位置上，这时通过设定margin就可以方便地移动它。这也是一个很有用的技巧，在本教程第4章，专题讲解定位属性的时靛，提到过这个性质。

至此，在Fire fox和IE 8中已经完全实现了小视图模式的目标。

三、为IE 6制作鼠标指针经过时弹出的信息框

上面一小节介绍的方法对于IE和Firefox是有效的，而对于超过80%的访问者使用的IE 6该怎么办呢？答案只能有一个，那就是JavaScript。

首先用类别来代替伪类，将上面两段代码分别增加一个选择器，如下所示。

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

.month td.active:hover,
.month td.hover {
background:aqua;
}
.month td.active:hover ul ,
.month td.hover ul{
margin:10px 0 0;
border:3px #FFF solid;
padding:7px 2px 0 5px;
background:#bde;
display:block;
position:absolute;
}

为了先检验一下这两个类别是否起作用，可以窿HTML中任意找一个有活动安排的单元格，例如7日这天的单元格，代码如下。

折叠XML/HTML 代码复制内容到剪贴板

<td class="active">7
<ul>
<li>检查案例实施进度</li>
</ul>
</td>

将它修改为：

折叠XML/HTML 代码复制内容到剪贴板

<td class="active" onMouseOver="className=‘active hover‘;" onMouseOut="className=‘active‘;">7
<ul>
<li>检查案例实施进度</li>
</ul>
</td>

这时这个单元格在鼠标指针经过时，动态地把类别由class="active"改为class="active hover"。同理，当鼠标指针离开的时候，再把类别动态地改回class="active"。当鼠标指针经过“7日”这个单元格时，就出现了弹出的矩形框，而在其他单元格上都没有，这就证明了上面的方法是可行的。

如果读者不会使用JavaScript，就可以为每一个有活动安排的单元格，逐一添加这两句相同的代码。如果读者有一定的JavaScript和DOM编程的基础，则可以写一小段JavaScript代码来完成手工的工作。方法是在整个表格的HTML结束以后，即在</table>之后，添加如下一段代码。

折叠JavaScript 代码复制内容到剪贴板

<script language="javascript">
var days = document.getElementsByTagName(‘td‘);
for (var i=0;i<days.length;i++)
if(days[i].className == ‘active‘)
{days[i].onmouseover = function(){ //鼠标在行上面的时候
this.className = ‘active hover‘;
}
days[i].onmouseout = function(){ //鼠标离开时
this.className = ‘active‘;
}
}
</script>

下面简单讲解一下这段代码的原理。首先通过“document.getElementsByTagName(‘td‘);”取得整个文档的DOM树中的所有td节点，并以数组的形式存储在“days”变量中，然后通过一个循环语句，依次检查每一个td节点。如果某个节点的类别被设置为active，就为该节点的onmouseover事件句柄设置一个函数。在函数中把该函数的类别增加一个hover类别，然后把该节点的onmouseout事件句柄设置为恢复类别的函数。lodidance.com

这段代码将在表格装载完成以后执行一次，就相当于手工为每个active单元格添加代码。这样，在IE 6中，也可以实现鼠标指针经过时弹出提示信息的功能了。

此时在浏览器中可以看到，矩形框的绝对定位在IE中和在Firefox中还是有细微区别的。如果要求严格相同的话，可以用前面介绍过的条件注释的功能，针对IE稍微调整一下margin和padding的值，就可以取得完全相同的效果了。

至此，已经实现了中视图模式和小视图模式，并且都保证了可以在IE 6、IE 7/8和Firefox浏览器中正确显示。

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

编辑：网页学习网

本文地址:http://www.lodidance.com/css/jc/747.html