实践用CSS制作框架页效果
2008-03-09 11:32:34 来源:WEB开发网
在很多人眼里,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;
}
注意使两者的外观有明显区别便于用户识别即可。
2、 建立HTML页面并添加导航表格
第一个表格的制作比较简单,典型的形式比如(这里我们去掉了一些不太重要的语句,完整的HTML源代码请参见示例文件):
页面A | 页面B |