实践用CSS制作框架页效果_瑞达网,华玉生活

实践用CSS制作框架页效果

2011/1/9 佚名点击：来源：网络

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" OnMouseOver="switchCell(0)"> 页面A</td>
          <td class="tab-off" id="navcell" OnMouseOver="switchCell(1)"> 页面B</td>
          <td class="tab-off" id="navcell" OnMouseOver="switchCell(2)"> 页面C</td>
          <td class="tab-off" id="navcell" OnMouseOver="switchCell(3)"> 页面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>