实践用CSS制作框架页效果

　2008-03-09 11:32:34　来源：WEB开发网　　　

核心提示： 在很多人眼里，CSS只能用来设置文字的字体、颜色，实践用CSS制作框架页效果，好像功能一般，其实CSS如果和JavaScript结合使用可以制作出非常出色的页面效果，至少要有这样两个Class:* tab-on：导航按钮打开时的显示效果* tab-off：导航按钮关闭时的显示效果例如：.tab-on { c

在很多人眼里，CSS只能用来设置文字的字体、颜色，好像功能一般。其实CSS如果和JavaScript结合使用可以制作出非常出色的页面效果。大家知道，要想制作出条理清晰的网站，使用框架页是一种简便的方法，可是框架页的制作相当繁琐，而且在对齐上经常有些困难。本文将介绍如何使用CSS实现框架页效果。

A、介绍原理

使用CSS制作框架页的基本原理是将多个页面的内容集合到一个文件中，每个页面的内容占据一个表格，再建立一个表格作导航栏，然后通过CSS控制表格的显示/隐藏来实现框架页效果。对于小网站而言，这种框架效果可以大大简化维护工作。

图1 页面在编辑状态

图 1就是页面在编辑状态下的示意图，在编辑状态下，我们将“页面A内容”所在的表格的显示/隐藏属性设置为“显示”，而其他几个表格的显示/隐藏属性设置为“隐藏”。然后为顶部的导航栏添加JavaScript代码，使其在被单击时对表格作相应的显示/隐藏操作，从而实现框架页效果。比如，用户单击了导航栏上的“页面B”这个链接，那么JavaScript代码会将“页面B内容”所在的表格设置为“显示”，而将其他几个表格设置为“隐藏”，如图 2。

图2 表格设置

B、制作过程

新建一个HTML文件，建立CSS并加入若干个表格，其中第一个用作导航栏，后面的每个表格对应一个页面，具体步骤是：
1、建立CSS
CSS是这个效果中最关键的，至少要有这样两个Class:
* tab-on：导航按钮打开时的显示效果
* tab-off：导航按钮关闭时的显示效果
例如：
.tab-on {
　　 cursor: hand;
　　 background-color: #FFFFFF;
　　 width: 120px;
　　 border: 1px solid;
}

.tab-off {
　　 background-color: #CEE8FF;
　　 cursor: hand;
　　 width: 120px;
　　 border: 1px solid;

}