欧美美女在线直播,美女视频黄a大片欧美,欧美日日夜夜

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

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

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://m.362672.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> <div   class="mxltgaaarev"   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需再刷新一下頁面才能執行]

方法一：使用相對位置負外邊距

為了消除滑動門的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;
}

12下一頁閱讀全文

標簽：邯鄲海東遼源喀什東莞南充濱州陽泉

巨人網絡通訊聲明：本文標題《100%點擊區的滑動門代碼第1/2頁》，本文關鍵詞 100%,點擊區,的,滑動,門,；如發現本文內容存在版權問題，煩請提供相關信息告之我們，我們將及時溝通與處理。本站內容系統采集于網絡，涉及言論、版權與本站無關。

校园春色亚洲色图_亚洲视频分类_中文字幕精品一区二区精品_麻豆一区区三区四区产品精品蜜桃

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