欧美精品二区,91精品一区二区综合在线,亚洲中文无码人a∨在线69堂

主頁 > 知識(shí)庫 > 100%點(diǎn)擊區(qū)的滑動(dòng)門代碼第1/2頁

100%點(diǎn)擊區(qū)的滑動(dòng)門代碼第1/2頁

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

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

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

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

首先為了方便我們先把《CSS中的滑動(dòng)門技術(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.aspschool.cn/"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS中滑動(dòng)門技術(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="emtyf6t"   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í)行]

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

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

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

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

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

#header a {width:.1em;}
#header > ul a {width:auto;}
相對(duì)應(yīng)的，對(duì)于current選擇器里的圖片位置也要做一點(diǎn)調(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%點(diǎn)擊區(qū)的滑動(dòng)門代碼第1/2頁》，本文關(guān)鍵詞 100%,點(diǎn)擊區(qū),的,滑動(dòng),門,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。