收藏{$PageTitle}
模板263 网站模板案例
网站帮助
韩国花纹图库全集 AI/PSD格式
您现在的位置: 模板263 >> 网页设计 >> CSS教程 >> 正文
实践用CSS制作框架页效果
作 者:佚名   文章来源:IT.com.cn

 

[本站原创]


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

A、介绍原理

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


图1 页面在编辑状态

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


图2 表格设置


[1] [2] [3] 下一页

本文仅代表作者观点,并不代表本站立场…… 如需转载,请注明出处,感谢您的支持
网友评论
  姓 名:
  评 分:1分 2分 3分 4分 5分
  
韩国花纹图库全集 AI/PSD格式
PSD图库全集
设计素材合集
设计源文件
矢量素材
VI资源全集
欧美模板全集
韩国模板全集
Flash源文件
美国POP手绘
  • Copyright 2004- © WWW.MB263.com
  • 中华人民共和国信息产业部备案序列号:辽ICP备05000069
  • 模板交流群:17691258 业务咨询:QQ① 74035 点击这里给我发消息 QQ②: 768580 点击这里给我发消息
  • 电话:(024)86432963 (0)13504183399 传真:(024)86432963 Email:Mb263#126.com(请将#换为@)