斜角导航条看上去立体感比较强,但实现起来比较麻烦;这是前几天写的一个测试代码,实现时,本来想用简单的图片加负数来实现;但GIF图片对半透明的效果无法有很好的支持;所以一边写代码,一边在改图,图片改的比较乱,CSS也没有优化; 但效果出来了; 写出来和大家分享一下;
首先说一下,要实现的目标:
- 滑动门,要兼容每个TAB可能出现的宽度(字数)不统一的问题;
- 后台程序实现起来简单,主要是标记TAB是否被选中;
- 浏览器的兼容以及放在较粗糙的代码环境中,有很好的表现;
开始作了,我先用FW画了一个有点立体感的导航条,基本就是要实现的目标
![]()
从后向前写布局
class = one 部分作为第一个TAB的特殊处理;
class = on 作为选中状态;
开写CSS部分:
由于比较简单,我就不写注释了;
用到的图片:

效果:
运行代码框

收藏到QQ书签