欢迎光临
我们一直在努力

实践用CSS制作框架页效果(1)-网页设计,HTML/CSS

建站超值云服务器,限时71元/月

 

[本站原创]

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

a、介绍原理

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

实践用CSS制作框架页效果(1)-网页设计,HTML/CSS
图1 页面在编辑状态

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

实践用CSS制作框架页效果(1)-网页设计,HTML/CSS

图2 表格设置

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » 实践用CSS制作框架页效果(1)-网页设计,HTML/CSS
分享到: 更多 (0)