小说排行榜,辰东完美世界有声小说,兽性总裁的爱奴

主頁 > 知識庫 > 100%點擊區(qū)的滑動門代碼第1/2頁

100%點擊區(qū)的滑動門代碼第1/2頁

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

學(xué)習(xí)標(biāo)準(zhǔn)的朋友，一般都會在學(xué)習(xí)的過程中接觸到CSS滑動門技術(shù)，或許大家也都看過這篇文章《CSS中的滑動門技術(shù)》，如果你還沒接觸過或還沒看過上文或有點忘記內(nèi)容，也沒關(guān)系，可以點擊上面的文章鏈接，先了解或溫習(xí)一遍。

在《CSS中的滑動門技術(shù)》一文中的滑動門例子，大家仔細(xì)實驗，或許已經(jīng)發(fā)現(xiàn)，鏈接區(qū)有9像素的盲點無法點擊，而且在IE下，只能點擊文字部分大小，不能點擊整個按鈕區(qū)塊。而我們或許期望的是整個按鈕區(qū)塊都可以點擊，并且不允許有盲點存在。

那我們又該如何去實現(xiàn)呢？下面我們一起來探討一些解決方法：

首先為了方便我們先把《CSS中的滑動門技術(shù)》中的代碼移過來：
XHTML部分：

復(fù)制代碼代碼如下:

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部分：

復(fù)制代碼代碼如下:

#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://m.mingxiangpen.cn/"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS中滑動門技術(shù)</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> <div   class="yuc22ys"   id="header">   <ul>     <li>Home</li>     <li id="current">News</li>     <li>Products</li>     <li>About</li>     <li>Contact</li>   </ul> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

方法一：使用相對位置負(fù)外邊距

為了消除滑動門的9px的盲點區(qū)域，設(shè)置li的外邊距為9px（9px為left圖片的寬度大小），li的背景為right圖片，不重復(fù)，右上對齊。

#header li {
  background:url("right.gif") no-repeat right top;
  margin-left:9px;
}
然后讓a向左移動9px，覆蓋掉盲點區(qū)域，如何移動呢？可對a使用相對位置（position:relative;），用負(fù)值移動9px（left:-9px;）。由于li的寬度等于a的寬度，所以當(dāng)a位置相對左移9px時，li的右邊就會多出9px的盲區(qū)，如何解決呢？我們使用a的負(fù)外邊距來解決（margin-right:-9px;）。

#header a {
  position:relative;
  left:-9px;
  margin-right:-9px;
}
設(shè)置left圖片為a的背景，不重復(fù)，左上對齊，并設(shè)置文字的內(nèi)邊距，注意現(xiàn)在a的區(qū)域為整個按鈕的區(qū)域，所以padding-left和padding-right的值都應(yīng)為15px。

#header a {
  background:url("left.gif") no-repeat left top;
  padding:5px 15px 4px;
}
另注意一個細(xì)節(jié)：在IE中鏈接的區(qū)域為文字區(qū)域而不是按鈕區(qū)域，而在其他對標(biāo)準(zhǔn)支持比較好的瀏覽器里是按鈕區(qū)域。為了解決這個問題，我們給IE中的a指定個固定寬度來觸發(fā)IE的layout（可以選用.1em，1px，1%等值），但這樣一來a在其他對標(biāo)準(zhǔn)支持比較好的瀏覽器里則會識別這個寬度，我們選用對標(biāo)準(zhǔn)支持比較好的瀏覽器識別而IE6不識別的子選擇器來讓a的寬度變?yōu)閍uto。

#header a {width:.1em;}
#header > ul a {width:auto;}
相對應(yīng)的，對于current選擇器里的圖片位置也要做一點調(diào)整：

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

12下一頁閱讀全文

標(biāo)簽：邯鄲海東遼源喀什東莞南充濱州陽泉

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《100%點擊區(qū)的滑動門代碼第1/2頁》，本文關(guān)鍵詞 100%,點擊區(qū),的,滑動,門,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。

濮阳杆衣贸易有限公司

100%點擊區(qū)的滑動門代碼第1/2頁