"如果你是一个css高手的话,那你就来详细介绍一下css滑动门技术".看了这句话不得不学习一下这个所谓的css滑动门技术.我也想当高手啊.当时在百度知道里回答问题的时候发现有很多有问相关css滑动门技术的文章。当时真是不知道css里还有个滑动门技术.所谓的滑动门，可以这样理解，菜单的 背景图(圆角，直角，其它等)会根据文字的多少而自动变长(变短)，这好象一个可滑动的门一样.
可以这样说css滑动门技术是被刺激出来的,因为很多人认为css并不能做出漂亮的网页,但是事实上恰恰相反,css不仅能做出相当漂亮的网页,还可以很好得把内容和表现分开,给设计师和开发人员更大的空间去发挥;
css滑动门技术的定义
滑动门技术就是:当点击页面上的导航按钮后这个导航按钮的CSS特性发生变化，从而区别于该组的其他导航按钮，提示给操作者，当前浏览的内容就是这个CSS特性发生变化的按钮所指向的内容。这种效果的一大好处在于，在多导航的页面上能够清晰地反映当前浏览内容隶属于哪个栏目或者哪个类，同时给人以美观、清晰、明了的视觉感受。滑动门技术的主角是被操作的对象，也就是这里被点击的对象，其CSS特性主要是指该导航按钮包括其中的其它元素的属性发生变化，当然，这个按钮的形式可以是BUTTON、A、TD甚至可以是P或者DIV这样的闭合元素，它们的属性主要是指这个元素的边框、背景、字体的颜色、大小、粗细以及外间距和内间距等等，总之，其一切可以把自身的“地位”区别于其它属主的属性都可以被应用起来使用在滑动门技术上。
css滑动门技术的应用范围:
网站导航菜单
总结几个技术要点:
A:由于我们只用css来实现，且代码要尽可能的少，那么ul和li标签就是我们的首先了，
B:ui有默认的标属性，我们要用margin:0px;padding:0px;list-style:none;来通用它
C:li默认是竖着排列的，我们要用display:inline;来让它在单行中显示
D:a默认是 行内元素，我们要设置它float:left来让它靠左边
E:span默认也是 行内元素，我们常用它来调菜单的高度，所以要设置display:block;
F:由于span在a标签内，如果span高度被拉高了，那么a中的背景图也会自动拉高
G:由于span背景图在a背景图内，如果不设置a标签的padding-left:4px(它恰好为左背景图的宽);左边(a标签的)的背景图会被右边(span标签内的)的背景图完全覆盖
H:图片的定位是由
background:url(tableft.gif) left top no-repeat;和
background:url(tableft.gif) left -42px no-repeat;
来实现的，一定要设置no-repeat,-42为图片总高的一半
比如这样：
对于这样的标题，如果标题宽度是固定的，那么就很简单，可以制作一个固定的背景图像，作为h1标记的background-image就可以了。
而如果标题宽度不固定，需要变化宽度，而同时保证花纹在左右两端，就麻烦一些，需要使用一种称为“滑动门”（Slide Door）的技术。例如下面的这个标题和上面的例子,宽度变化了，但是左右两端的花纹依然保持正确的效果。
这就是通过滑动门技术来实现的。所谓“滑动门”，就是两个嵌套的元素，各自使用一个背景图像，二者中间部分重叠，两端不重叠，这样，左右两端的花纹 就可以都被显示出来，中间部分的宽度可以自动适应，因此宽度变化时，依然可以保证左右两端的图案不变。“滑动门”这个名称很形象地描述了这种方法的本质， 两个图像就像两扇门，二者可以滑动，当宽度小的时候，就多重叠一些，宽度大的时候，就少重叠一些。
|
|
||
|
相关热词搜索： |
||
| 收藏到网摘： | ||
|
{ php echo runhook('glogal_footer')}