当前位置：首页 -> 网页设计 -> HTML/CSS -> 实践用CSS制作框架页效果

实践用CSS制作框架页效果

时间： 2021-07-31 作者：daque

[本站原创]

在很多人眼底，css只能用来树立笔墨的字体、脸色，犹如功效普遍。本来css即使和javascript贯串运用不妨创造出特殊精巧的页面功效。大师领会，要想创造出层次明显的网站，运用框架页是一种简单的本领，然而框架页的创造十分烦琐，并且在对齐上常常有些艰巨。正文将引见怎样运用css实行框架页功效。

a、引见道理

运用css创造框架页的基础道理是将多个页面包车型的士实质汇合到一个文献中，每个页面包车型的士实质吞噬一个表格，再创造一个表格作导航栏，而后经过css遏制表格的表露/湮没来实行框架页功效。对于小网站而言，这种框架功效不妨大大简化保护处事。

图1 页面在编纂状况

图 1即是页面在编纂状况下的表示图，在编纂状况下，咱们将“页面a实质”地方的表格的表露/湮没属性树立为“表露”，而其余几个表格的表露/湮没属性树立为“湮没”。而后为顶部的导航栏增添javascript代码，使其在被单击时对表格作相映的表露/湮没操纵，进而实行框架页功效。比方，用户单击了导航栏上的“页面b”这个链接，那么javascript代码会将“页面b实质”地方的表格树立为“表露”，而将其余几个表格树立为“湮没”，如图 2。

图2 表格树立

b、创造进程

兴建一个html文献，创造css并介入几何个表格，个中第一个用作导航栏，反面的每个表格对应一个页面，简直办法是：1、创造csscss是这个功效中最要害的，起码要有如许两个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;}

实践用css制作框架页效果图1

提防使两者的表面有鲜明辨别便于用户辨别即可。

2、创造html页面并增添导航表格

实践用css制作框架页效果图2

第一个表格的创造比拟大略，典范的情势比方（这边咱们去掉了少许不太要害的语句，完备的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>

这几个表格的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实行框架页功效的本领本领性比拟强，大师不妨多猜测，举行优化的余步还很大，并且将表格动作数组来操纵的本领在页面安排中很犯得着模仿。

实践用CSS制作框架页效果

相关推荐

推荐下载

热门阅览

最新排行