让我们把CSS代码整理优化一下:
#header li { background:url("right.gif") no-repeat right top; margin:0 0 0 9px; } #header a { position:relative; left:-9px; margin-right:-9px; width:.1em; background:url("left.gif") no-repeat left top; padding:5px 15px 4px; } #header > ul a {width:auto;}
#header #current { background-image:url("right_on.gif"); } #header #current a { background-image:url("left_on.gif"); padding-bottom:5px; }
查看效果:
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
方法二:添加span标签
这个方法只能说是练习,实验用,真正布局的时候不推荐使用(仅是不推荐使用),毕竟添加了无语义的的span标签。
首先在结构代码中添加<span>标签
<div id="header"> <ul> <li><a href="#"><span>Home</span></a></li> <li id="current"><a href="#"><span>News</span></a></li> <li><a href="#"><span>Products</span></a></li> <li><a href="#"><span>About</span></a></li> <li><a href="#"><span>Contact</span></a></li> </ul> </div>
有朋友或许问为什么要添加<span>元素呢,其实理由很简单,我们通过a和span来模拟滑动门技术,而不是例子中的li和a,好处嘛,可以避免9px的盲点区域,因为<span>元素是包含在<a>元素里的。这样处理100%点击就相对容易很多。
由于使用a和span模拟,所以对于li我们不需要额外定义
#header li{ float:left; margin:0; padding:0; }
而原本对li设置的部分,我们转移到a中设置,设置a的背景为left图片,不重复,左上对齐。并给a设置左内边距9px(left图片的宽度),即span的显示不遮挡left图片。
#header a { background:url("left.gif") no-repeat left top; padding-left:9px; }
对于span,将显示原例子中a中的设置,设置span的背景为right图片,不重复,右上对齐。并在span的左内边距减去a设置的9px左内边距,即span的左内边距为6px。同样为了一致性,我们要解决IE5/Mac的问题。
#header span { float:left; padding:5px 15px 4px 6px; display:block; background:url("right.gif") no-repeat right top; }
/* Commented Backslash Hack hides rule from IE5-Mac \*/ #header span {float:none;} /* End IE5-Mac hack */
在此方法中我们依旧会碰到上例中碰到的在IE中链接的区域为文字区域而不是按钮区域问题。如何解决呢,当然你也可以用上例中的方法解决。不过我们还可以,给a浮动来触发IE下的layout。
#header a { float:left; }
相对应的,对于current选择器里的图片位置也要做一点调整:
#header #current a { background-image:url("left_on.gif"); color:#333; } #header #current span{ background-image:url("right_on.gif"); padding-bottom:5px; }
让我们把CSS代码整理优化一下:
#header li{ float:left; margin:0; padding:0; } #header a { float:left; display:block; background:url("left.gif") no-repeat left top; padding-left:9px; } #header span { float:left; padding:5px 15px 4px 6px; display:block; background:url("right.gif") no-repeat right top; }
/* Commented Backslash Hack hides rule from IE5-Mac \*/ #header span {float:none;} /* End IE5-Mac hack */
#header #current a { background-image:url("left_on.gif"); color:#333; } #header #current span{ background-image:url("right_on.gif"); padding-bottom:5px; }
查看效果:
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
参考文章: http://www.w3cn.org/article/translate/2005/112.html http://alistapart.com/articles/slidingdoors2/ http://www.zishu.cn/blogview.asp?logID=579
经典论坛讨论: http://bbs.blueidea.com/thread-2720514-1-1.html
本文链接:http://www.blueidea.com/tech/web/2007/4495.asp
出处:蓝色理想
责任编辑:blue
上一页 100%点击区的滑动门 [1] 下一页
◎进入论坛网页制作、网站综合版块参加讨论
|