首页 > web前端 > css教程 > 正文

100%点击区的滑动门代码

PHP中文网
发布: 2016-05-16 12:08:41
原创
1776人浏览过

学习标准的朋友,一般都会在学习的过程中接触到css滑动门技术,或许大家也都看过这篇文章《css中的滑动门技术》,如果你还没接触过或还没看过上文或有点忘记内容,也没关系,可以点击上面的文章链接,先了解或温习一遍。

在《CSS中的滑动门技术》一文中的滑动门例子,大家仔细实验,或许已经发现,链接区有9像素的盲点无法点击,而且在IE下,只能点击文字部分大小,不能点击整个按钮区块。而我们或许期望的是整个按钮区块都可以点击,并且不允许有盲点存在。

那我们又该如何去实现呢?下面我们一起来探讨一些解决方法:

首先为了方便我们先把《CSS中的滑动门技术》中的代码移过来:
XHTML部分: 

<div id="header">  
  <ul>  
    <li><a href="#">Home</a></li>  
    <li id="current"><a href="#">News</a></li>  
    <li><a href="#">Products</a></li>  
    <li><a href="#">About</a></li>  
    <li><a href="#">Contact</a></li>  
  </ul>  
</div>
登录后复制

CSS部分:

#header {  
  float:left;  
  width:100%;  
  background:#DAE0D2 url("bg.gif") repeat-x bottom;  
  font-size:93%;  
  line-height:normal;  
}  
#header ul {  
  margin:0;  
  padding:10px 10px 0;  
  list-style:none;  
}  
#header li {  
  float:left;  
  background:url("left.gif") no-repeat left top;  
  margin:0;  
  padding:0 0 0 9px;  
}  
#header a {  
  float:left;  
  display:block;  
  background:url("right.gif") no-repeat right top;  
  padding:5px 15px 4px 6px;  
  text-decoration:none;  
  font-weight:bold;  
  color:#765;  
}  
/* Commented Backslash Hack  
   hides rule from IE5-Mac \*/  
#header a {float:none;}  
/* End IE5-Mac hack */  
#header a:hover {  
  color:#333;  
}  
#header #current {  
  background-image:url("left_on.gif");  
}  
#header #current a {  
  background-image:url("right_on.gif");  
  color:#333;  
  padding-bottom:5px;  
}
登录后复制
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号