脚本宝典收集整理的这篇文章主要介绍了100%点击区的滑动门代码第1/2页,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
blog地址:http://www.planabc.net/article.asp?id=107
学习标准的朋友,一般都会在学习的过程中接触到CSS滑动门技术,或许大家也都看过这篇文章《CSS中的滑动门技术》,如果你还没接触过或还没看过上文或有点忘记内容,也没关系,可以点击上面的文章链接,先了解或温习一遍。
在《CSS中的滑动门技术》一文中的滑动门例子,大家仔细实验,或许已经发现,链接区有9像素的盲点无法点击,而且在IE下,只能点击文字部分大小,不能点击整个按钮区块。而我们或许期望的是整个按钮区块都可以点击,并且不允许有盲点存在。
那我们又该如何去实现呢?下面我们一起来探讨一些解决方法:
首先为了方便我们先把《CSS中的滑动门技术》中的代码移过来:
XHTML部分:
<div&nbs
p;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") re
PEat-x bottom;
font-
Size:93%;
line-h
eight:normal;
}
#header ul {
 
;margin:0;
padding:10px 10px 0;
list
-style:none;
}
#header li {
float:left;
background:url("left.gif") no-repeat left top;
mar
gin:0;
padding:0 0 0 9px;
}
#header a {
float:left;
dis
play: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;
}
方法一:使用相对位置负
外边距 为了消除滑动门的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;
}
脚本宝典总结
以上是脚本宝典为你收集整理的100%点击区的滑动门代码第1/2页全部内容,希望文章能够帮你解决100%点击区的滑动门代码第1/2页所遇到的问题。
如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。