网页设计特效之DIV+CSS实例5则.docVIP

网页设计特效之DIV+CSS实例5则 1. DIV+CSS实例：斜角滑动门导航条 斜角导航条看上去立体感比较强，但实现起来比较麻烦;这是前几天写的一个测试代码，实现时，本来想用简单的图片加负数来实现;但GIF图片对半透明的效果无法有很好的支持;所以一边写代码，一边在改图，图片改的比较乱，CSS也没有优化; 但效果出来了; 写出来和大家分享一下; 首先说一下，要实现的目标： 滑动门，要兼容每个TAB可能出现的宽度(字数)不统一的问题; 后台程序实现起来简单，主要是标记TAB是否被选中; 浏览器的兼容以及放在较粗糙的代码环境中，有很好的表现; 开始作了，我先用FW画了一个有点立体感的导航条，基本就是要实现的目标 从后向前写布局 class = one 部分作为第一个TAB的特殊处理; class = on 作为选中状态; 开写CSS部分： 由于比较简单，我就不写注释了; 用到的图片： 代码： 转载请注明出处： 2. DIV+CSS实例：实现页面垂直居中的方法 在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”，其实水平居中实现还是比较简单的，反而垂直居中有点麻烦，因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结