|
声明:(通过IE,FireFox测试)
(1)所谓的 滑动门，可以这样理解，菜单的 背景图(圆角，直角，其它等)会根据文字的多少而自动变长(变短)，这好象一个可滑动的门一样
这样的背景图一般由两部分组成。
一般，都有其中之一在大，所谓大，就是说，你的导航链接内文字的最长长度,(还有一种方法，可以用无限长的文字，需要三张背景图，左右边框各一张，中间图一张，你们可以想想怎样来实现)
(2)
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为图片总高的一半
实现代码和效果代码如下:
----------------------------------------------------------------------------------------------------------------------------------
DHTML:
<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;}
|