CSS:css滑动门技术

　　背景:

　　从我的理解来讲,css滑动门是被刺激出来的,因为很多人认为css并不能做出漂亮的网页,但是事实上恰恰相反,css不仅能做出相当漂亮的网页,还可以很好得把内容和表现分开,给设计师和开发人员更大的空间去发挥;

　　定义:

　　滑动门技术就是:当点击页面上的导航按钮后这个导航按钮的CSS特性发生变化，从而区别于该组的其他导航按钮，提示给操作者，当前浏览的内容就是这个CSS特性发生变化的按钮所指向的内容。这种效果的一大好处在于，在多导航的页面上能够清晰地反映当前浏览内容隶属于哪个栏目或者哪个类，同时给人以美观、清晰、明了的视觉感受。滑动门技术的主角是被操作的对象，也就是这里被点击的对象，其CSS特性主要是指该导航按钮包括其中的其它元素的属性发生变化，当然，这个按钮的形式可以是BUTTON、A、TD甚至可以是P或者DIV这样的闭合元素，它们的属性主要是指这个元素的边框、背景、字体的颜色、大小、粗细以及外间距和内间距等等，总之，其一切可以把自身的“地位”区别于其它属主的属性都可以被应用起来使用在滑动门技术上。

　　应用范围:

　　网站导航菜单

　　技术要点:

　　1.用无序列表ul和li组成菜单结构

　　2.给li设置背景(如果有圆角,则设置为右置或左置,背景图片远远超过该子菜单的长度)

　　3.设置li中的a的display为block,并给a加背景属性(如果有圆角,则设置为右置或左置,背景图片只要是一个圆角的宽度就可以了)

　　4.设置当前菜单a的属性(padding-bottom加n个像素,覆盖整个菜单的底边,n根据具体效果决定)

　　5.用js控制鼠标点击以后的效果(先来一个循环把所有的按钮背景重置,然后把改变当前按钮样式) 

今天的文章CSS:css滑动门技术分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。