欢迎来到天天文库
浏览记录
ID:22369596
大小:78.00 KB
页数:12页
时间:2018-10-28
《100%点击区的滑动门--.》由会员上传分享,免费在线阅读,更多相关内容在学术论文-天天文库。
1、100%点击区的滑动门>>.学习标准的朋友,一般都会在学习的过程中接触到CSS滑动门技术,或许大家也都看过这篇文章《CSS中的滑动门技术》,如果你还没接触过或还没看过上文或有点忘记内容,也没关系,可以点击上面的文章链接,先了解或温习一遍。在《CSS中的滑动门技术》一文中的滑动门例子,大家仔细实验,或许已经发现,链接区有9像素的盲点无法点击,而且在IE下,只能点击文字部分大小,不能点击整个按钮区块。而我们或许期望的是整个按钮区块都可以点击,并且不允许有盲点存在。那我们又该如何去实现呢?下面我们一起来探讨一些解决方法:首先为了方便我们先把
2、《CSS中的滑动门技术》中的代码移过来:XHTML部分:<divid="header"><ul><li><ahref="#">Home</a></li><liid="current"><ahref="#">Ne;font-size:93%;line-height:normal;}#headerul{margin:0;padding:10px10px0;list-style:none;}#headerli{float:left;background:url("left.gif")no-re
3、peatlefttop;margin:0;padding:0009px;}#headera{float:left;display:block;background:url("right.gif")no-repeatrighttop;padding:5px15px4px6px;text-decoration:none;font-entedBackslashHackhidesrulefromIE5-Mac*/#headera{float:none;}/*EndIE5-Machack*/#headera:hover{color:#333;
4、}#header#current{background-image:url("left_on.gif");}#header#currenta{background-image:url("right_on.gif");color:#333;padding-bottom:5px;}方法一:使用相对位置负外边距为了消除滑动门的9px的盲点区域,设置li的外边距为9px(9px为left图片的宽度大小),li的背景为right图片,不重复,右上对齐。#headerli{background:url("right.gif")no-repeatr
5、ighttop;margin-left:9px;}然后让a向左移动9px,覆盖掉盲点区域,如何移动呢?可对a使用相对位置(position:relative;),用负值移动9px(left:-9px;)。由于li的宽度等于a的宽度,所以当a位置相对左移9px时,li的右边就会多出9px的盲区,如何解决呢?我们使用a的负外边距来解决(margin-right:-9px;)。#headera{position:relative;left:-9px;margin-right:-9px;}设置left图片为a的背景,不重复,左上对齐,并设置文
6、字的内边距,注意现在a的区域为整个按钮的区域,所以padding-left和padding-right的值都应为15px。#headera{background:url("left.gif")no-repeatlefttop;padding:5px15px4px;}另注意一个细节:在IE中链接的区域为文字区域而不是按钮区域,而在其他对标准支持比较好的浏览器里是按钮区域。为了解决这个问题,我们给IE中的a指定个固定宽度来触发IE的layout(可以选用.1em,1px,1%等值),但这样一来a在其他对标准支持比较好的浏览器里则会识别这个
7、宽度,我们选用对标准支持比较好的浏览器识别而IE6不识别的子选择器来让a的宽度变为auto。#headera{;}#header>ula{width:auto;}相对应的,对于current选择器里的图片位置也要做一点调整:1234下一页[这篇文章来自..,]#header#current{background-image:url("right_on.gif");}#header#currenta{background-image:url("left_on.gif");padding-bottom:5px;}让我们把CSS代码整理优化
8、一下:#headerli{background:url("right.gif")no-repeatrighttop;margin:0009px;}#headera{position:relative;left:-9px;
此文档下载收益归作者所有