实践用CSS制作框架页效果

最新推荐文章于 2021-08-03 22:44:52 发布

ColorPaper

最新推荐文章于 2021-08-03 22:44:52 发布

阅读量567

点赞数

分类专栏： HTML 文章标签：框架 css javascript class border html

HTML 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

源自：http://www.cngr.cn/article/55/93/2006/2006072254414_2.shtml

在很多人眼里，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源代码请参见示例文件）：
<table>
     <tr>
          <td class="tab-on" id="navcell" > 页面A</td>
          <td class="tab-off" id="navcell" > 页面B</td>
          <td class="tab-off" id="navcell" > 页面C</td>
          <td class="tab-off" id="navcell" > 页面D</td>
     </tr>
</table>

这个表格中的列有统一的id，即navcell，在后面的代码中将会用到。第一个列的class被设置为tab-on，也就是使其处于选中状态，其他几个列则处于不选中状态。这里通过OnMouseOver事件调用switchCell()函数，也就是说通过鼠标悬停来实现页面之间的切换，如果将其换成OnClick就可以实现单击切换页面的效果。

3、建立用于存放页面内容的表格

每个表格对应一个页面，这些表格都只能有一个列，例如：
<table id="tb" >
     <tr>
          <Td >页面A的内容</td>
     </tr>
</table>
<table id="tb" >
     <tr>
          <Td style="display:none" >页面B的内容</td>
     </tr>
</table>
<table id="tb" >
     <tr>
          <Td style="display:none">页面C的内容</td>
     </tr>
</table>
<table id="tb" >
     <tr>
          <Td style="display:none" >页面D的内容</td>
     </tr>
</table>

这几个表格的id相同，这样在后面代码中可以通过数组分别对其进行引用，另外要特别注意，后面几个表格具有“display:none”样。也就是说用户打开这个页面的时候，后面几个表格式不显示的，只有第一个表格显示出来。从用户的角度看，他只看到了一个“页面”。

4、建立显示/隐藏表格的JavaScript函数

在页面的<Head>标记内部建立一个JavaScript函数，这个函数的作用就是根据用户在导航表格中选择的链接来对其他表格进行显示隐藏操作。我们将这个函数命名为switchCell()：
function switchCell(n) {
for(i=0;i<navcell.length;i++){
navcell[i].className="tab-off";

tb[i].style.display="none";

      }
     navcell[n].className="tab-on";
     tb[n].style.display="block";
}

witchCell()函数被调用时将会收到一个参数n，这个参数就是用户打开的链接的索引号（从0开始编号），后面的代码将会根据这个索引号显示相应的表格并隐藏其他的表格。

例如当用户打开“页面B”链接时将会调用函数switchCell(1)。switchCell()接受到参数1后，首先利用一个循环对navcell[]和ta[]这两个数组进行遍历：设置所有navcell[]中元素的className为tab-off，也就是将所有导航栏中的链接设置为关闭状态；设置所有tb[]中元素的style.display为none，也就是隐藏所有含有页面内容的表格。最后navcell[1]的className被设置为tab-on，而tb[1].style.display被设置为block，也就是将导航栏中的链接设置为打开状态，并显示页面B内容所在的表格。

总而言之，这种用CSS实现框架页效果的方法技巧性比较强，大家可以多揣摩，进行优化的余地还很大，而且将表格作为数组来操作的方法在页面设计中很值得借鉴。