我要评论让我们把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 全选 注:如需引入外部js需刷新才能执行]
方法二：添加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 全选 注:如需引入外部js需刷新才能执行]
参考文章：
http://www.w3cn.org/article/translate/2005/112.html
http://alistapart.com/articles/slidingdoors2/
http://www.zishu.cn/blogview.asp?logid=579
2
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论