css 滑动门技术的介绍及实例分享滑动门技术的介绍及实例分享
"如果你是一个css高手的话,那你就来详细介绍一下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为图片总高的一半
请看如下实例代码：
html代码:
复制代码代码如下:
<div id=”menu”>
<ul>
<li><a href=”index.html”><span>Home</span></a></li>
<li><a href=”index.html”><span>News</span></a></li>
<li><a href=”index.html”><span>Downloads</span></a></li>
<li><a href=”index.html”><span>Services</span></a></li>
<li><a href=”index.html”><span>Support</span></a></li>
<li><a href=”index.html”><span>About</span></a></li>
</ul>
</div>
CSS样式代码如下:
复制代码代码如下:
a{ text-decoration:none; color:#FFFFFF;}
#menu ul{ margin:0px; padding:0px; list-style:none;}
#menu li{ display:inline;}
#menu a{ float:left; background:url(tableft.gif) left top no-repeat; padding-left:4px;}
#menu span{ display:block; background:url(tabright.gif) right top no-repeat; padding:4px 10px 4px 6px;}
#menu a:hover{ background:url(tableft.gif) left -42px no-repeat;}
#menu a:hover span{ background:url(tabright.gif) right -42px no-repeat;}
weixin_38600017
- 粉丝: 3
- 资源: 970
评论0