100%点击区的滑动门代码第1/2页

ttx9n · 发表于 2007-3-7 00:00:00

BLOG地址：http://www.planabc.net/article.asp?id=107

学习标准的朋友，一般都会在学习的过程中接触到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;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <base href='http://www.blueidea.com' /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS中滑动门技术</title> <style type="text/css" media="screen"> body { background:#fff; margin:0; padding:0; color:#000; font:x-small/1.5em Georgia,Serif; voice-family: "\"}\""; voice-family:inherit; font-size:small; } html>body {font-size:small;} #header { float:left; width:100%; background:#DAE0D2 url("/articleimg/2007/02/4495/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("/articleimg/2007/02/4495/left.gif") no-repeat left top; margin:0; padding:0 0 0 9px; } #header a { float:left; display:block; background:url("/articleimg/2007/02/4495/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("/articleimg/2007/02/4495/left_on.gif"); } #header #current a { background-image:url("/articleimg/2007/02/4495/right_on.gif"); color:#333; padding-bottom:5px; } </style> </head> <body> <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> </body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
方法一：使用相对位置负外边距

为了消除滑动门的9px的盲点区域，设置li的外边距为9px（9px为left图片的宽度大小），li的背景为right图片，不重复，右上对齐。

#header li {
  background:url("right.gif") no-repeat right top;
  margin-left:9px;
}
然后让a向左移动9px，覆盖掉盲点区域，如何移动呢？可对a使用相对位置（position:relative;），用负值移动9px（left:-9px;）。由于li的宽度等于a的宽度，所以当a位置相对左移9px时，li的右边就会多出9px的盲区，如何解决呢？我们使用a的负外边距来解决（margin-right:-9px;）。

#header a {
  position:relative;
  left:-9px;
  margin-right:-9px;
}
设置left图片为a的背景，不重复，左上对齐，并设置文字的内边距，注意现在a的区域为整个按钮的区域，所以padding-left和padding-right的值都应为15px。

#header a {
  background:url("left.gif") no-repeat left top;
  padding:5px 15px 4px;
}
另注意一个细节：在IE中链接的区域为文字区域而不是按钮区域，而在其他对标准支持比较好的浏览器里是按钮区域。为了解决这个问题，我们给IE中的a指定个固定宽度来触发IE的layout（可以选用.1em，1px，1%等值），但这样一来a在其他对标准支持比较好的浏览器里则会识别这个宽度，我们选用对标准支持比较好的浏览器识别而IE6不识别的子选择器来让a的宽度变为auto。

#header a {width:.1em;}
#header > ul a {width:auto;}
相对应的，对于current选择器里的图片位置也要做一点调整：

#header #current {
  background-image:url("right_on.gif");
}
#header #current a {
  background-image:url("left_on.gif");
  padding-bottom:5px;
}

a971560 · 发表于 2022-11-5 02:04:57

刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷

rveqwdpw5 · 发表于 2023-1-23 21:16:58

还可以不错

xf9hlg1 · 发表于 2023-10-18 12:58:16

还有什么好东西没

q215357618 · 发表于 2023-11-2 22:17:12

刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷

溪谷小兵 · 发表于 2024-3-27 06:30:07

数据库了多久撒快乐的健身卡啦

adm1n · 发表于 2024-4-6 22:33:24

呵呵呵呵呵呵

btbhs8t · 发表于 2024-4-18 09:41:14

好东西一定要看看！

qwe520 · 发表于 2024-4-22 09:35:21

激动人心，无法言表！

zzhxxx · 发表于 2024-6-20 19:05:51

554411515451555

账号		自动登录	找回密码
密码			立即注册

[CSS/HTML] 100%点击区的滑动门代码第1/2页

相关帖子