100％点击区的滑动门（2）
作者：blank 来源：怿飞's Blog 发布时间：2007-06-14 22:00:00
让我们把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;
}
查看效果：
运行代码框
方法二：添加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;
}
查看效果：
运行代码框
参考文章：
http://www.w3cn.org/article/translate/2005/112.html
http://alistapart.com/articles/slidingdoors2/
http://www.zishu.cn/blogview.asp?logID=579
0
投稿猜你喜欢
- XmlDocume
- 今天我升级MYSQL到5.1的时候遇到的。写出来共享以下。1、[root@localhost mysql]# scripts/mysql_i
- 无意中看到百度的页面代码，想到了一种声明写法，需要的朋友可以参考下。<!DOCTYPE html> <!--[if IE]
前一段时间，一个流行的东方系列mv 《bad apple》 带来一股奇怪的风潮： 各种技术狂人纷纷把这段mv在一些匪夷- 速查表是帮你记住东西的有效工具。Web设计师和开发者经常使用的快捷键简表会使他们在网上的工作效率大大提高。事实上，速查表就是来帮助我们把日常
- 事物绝非十全十美总有强差人意的一面，之前针对浮动分析了其引起文本重影的怪异问题，而作为浮动布局的最佳搭档定位布局也存在一定的缺陷。围绕着定位
- 先装 MYSQL 的 ODBC 驱动然后'connect to MySQL server&n
- function chinese2unicode(Str) &nbs
- 基于很多原因，有不少朋友的空间不支持FSO，当大量的页面生成静态页面时，占用大量的空间，修改样式时，不方便，所以动态页面还是有动态页面的好处
- 字符串的IndexOf()方法搜索在该字符串上是否出现了作为参数传递的字符串,如果找到字符串,则返回字符的起始位置 (0表示第一个字符,1表
- 不知道您是否留意了，浏览本站时，浏览器右下角有一个标着top的黑色直角三角形，可以点击它返回到正在浏览的网页页眉。当滚动网页时，它的位置一直
- 一般的网站会有很多页面，面包屑导航可以大大改善用户寻找他们的路径的方法。就可用性而言，面包屑可以减少一个网站的用户返回上一级页面的操作次数，
- 我们今天主要描述的是php和MySQL转义字符，我们大家都知道php和MySQL转义字符的实际应用比例还是占为多数的，如果你对这一技术，心存
- 这可能是一个非常简单的问题，但是今天花一点点时间把这个简单的问题在说清晰一点，相信大家对ＣＳＳ的学习和认识会很有帮助，强化一些概念的东西，对
- 利用图标工具（有很多）制作图标文件（favicon.ico）上传到网站所在的服务器的根目录下，这个文件必须是16*16大小的图标文件。当然，
- 为了庆祝自己的博客重新开放，我在这里放一个自己刚刚写的jquery日期插件, 也许人们会说：日期选取插件已
- 这个收藏本站、设为首页代码相信每个网站都会用到，这么常用的代码，网络上流行的一般是很多年前的代码版本，只有兼容IE，对其它浏览器没有考虑，下
- 1、使用索引来更快地遍历表。缺省情况下建立的索引是非群集索引，但有时它并不是最佳的。在非群集索引下，数据在物理上随机存放在数据页上。合理的索
- 写在前面的话关于《交互设计实用指南》，我们最近收到很多朋友的反馈，有支持的也有批评的，在此一并感谢了，有你们的关注，我们才能走得更远。《交互
- 以下的文章主要介绍的是MySQL 查询缓存的实际应用代码以及查看MySQL 查询缓存的大小 ，碎片整理，清除缓存以及监视MySQL 查询缓存
