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
投稿猜你喜欢
vue Print.js打印页面样式不出现解决方案加上这句就好了！完美！vue-print-nb打印问题总结1、表格的列缺失（element- 本文实例讲述了Python计算程序运行时间的方法。分享给大家供大家参考。具体实现方法如下：import timedef start_slee
- 正则表达式的介绍1)在实际开发过程中经常会有查找符合某些复杂规则的字符串的需要，比如:邮箱、手机号码等，这时候想匹配或者查找符合某些规则的字
- 我们都知道数据是无价，如果不对数据进行备份，相当是让数据在裸跑，一旦服务器出问题，只有哭的份了。下面将介绍mysql数据库的自动备份，大家可
- 本文实例讲述了Python实现的微信好友数据分析功能。分享给大家供大家参考，具体如下：这里主要利用python对个人微信好友进行分析并把结果
- 在实际应用过程中，只要保证选项卡模块结构代码的完整性，就可以任意添加N个同类选项卡，不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的
- 如下所示：colum = ['性别','年龄','M','样本类型'] +
- 用pycharm写Scrapy框架的时候发现无法引用items.py里的类且自己写的工具类也无法被应用难受了我快一天了，下面我捋一捋我的解决
- Scrapy中Spider的用法Spider类定义了如何爬取某个(或某些)网站。包括了爬取的动作(例如:是否跟进链接)以及如何从网页的内容中
- 目的：此次实验目的是为了zabbix服务端能够实时监控某服务器上oracle实例能否正常连接环境：1、zabbix_server2、zabb
- 本文实例讲述了Python数据分析之双色球统计单个红和蓝球哪个比例高的方法。分享给大家供大家参考，具体如下：统计单个红球和蓝球，哪个组合最多
- 对有自增长字段的表导入数据注意事项： 1、把自增长字段暂时设置成非自增长的；导入数据成功后，再设置成自增长字段。 2、导出、导入数据时，注意
- 介绍我编写了一个快速且带有斑点的python脚本，以可视化nmap和masscan的结果。它通过解析来自扫描的XML日志并生成所扫描IP范围
- 由于项目是thinkPHP做后端框架，一直以来都是多页面的后端路由，想使用火热的webpack有点无从下手（原谅我太菜，而且推广vue只有我
- 1、注册时验证数据库用户名是否存在。 2、输入密码时提示密码强度和验证2次密码输入是否一样。 3、注册时验证数据库联系邮箱是否存在。 4、注
- 本文实例为大家分享了python3使用QQ邮箱发邮件的具体代码，供大家参考，具体内容如下直接上代码import smtplibfrom em
- asp如何获知页面上的图象的实际尺寸大小？见下面的两个asp文件：<!--#include virtual="/i
- 1.获取当前时间var myDate = new Date();2.获取时间中的年月日时分秒myDate.getYear();
- FileSystemObject、Folder 和 File 对象的一些方法都与通过 TextStream 对象创建、读取或写入文件有关。虽
- 源码解读Bootstrap按钮按钮组按钮组和下拉菜单组件一样，需要依赖于bootstrap.js。使用“btn-group”的容器，把多个按
