当前位置:首页>>网页设计>>CSS教程>>正文

CSS网页实例:斜角滑动门导航条

文章出处:zishu.cn 作者:佚名 发布时间:2008-07-27 收藏到QQ书签

斜角导航条看上去立体感比较强,但实现起来比较麻烦;这是前几天写的一个测试代码,实现时,本来想用简单的图片加负数来实现;但GIF图片对半透明的效果无法有很好的支持;所以一边写代码,一边在改图,图片改的比较乱,CSS也没有优化; 但效果出来了; 写出来和大家分享一下;

首先说一下,要实现的目标:

  1. 滑动门,要兼容每个TAB可能出现的宽度(字数)不统一的问题;
  2. 后台程序实现起来简单,主要是标记TAB是否被选中;
  3. 浏览器的兼容以及放在较粗糙的代码环境中,有很好的表现;

开始作了,我先用FW画了一个有点立体感的导航条,基本就是要实现的目标

从后向前写布局

class = one 部分作为第一个TAB的特殊处理;
class = on 作为选中状态;

开写CSS部分:

由于比较简单,我就不写注释了;

用到的图片:

效果:

运行代码框