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

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

熱門標簽:荒野大鏢客2地圖標注怎么變中文 移動400辦理電話 山西旅游景地圖標注 中國地圖標注各省份 武漢人工外呼系統(tǒng) 蘇州通信外呼系統(tǒng)多少錢 北川縣地圖標注 沈陽智能外呼系統(tǒng)排名 上古卷軸5地圖標注mod

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

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

在《CSS中的滑動門技術(shù)》一文中的滑動門例子,大家仔細實驗,或許已經(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; 



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

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

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

#header li {
  background:url("right.gif") no-repeat right top;
  margin-left:9px;
}
然后讓a向左移動9px,覆蓋掉盲點區(qū)域,如何移動呢?可對a使用相對位置(position:relative;),用負值移動9px(left:-9px;)。由于li的寬度等于a的寬度,所以當a位置相對左移9px時,li的右邊就會多出9px的盲區(qū),如何解決呢?我們使用a的負外邊距來解決(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;
}
另注意一個細節(jié):在IE中鏈接的區(qū)域為文字區(qū)域而不是按鈕區(qū)域,而在其他對標準支持比較好的瀏覽器里是按鈕區(qū)域。為了解決這個問題,我們給IE中的a指定個固定寬度來觸發(fā)IE的layout(可以選用.1em,1px,1%等值),但這樣一來a在其他對標準支持比較好的瀏覽器里則會識別這個寬度,我們選用對標準支持比較好的瀏覽器識別而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下一頁閱讀全文

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

巨人網(wǎng)絡(luò)通訊聲明:本文標題《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)。
  • 相關(guān)文章
  • 下面列出與本文章《100%點擊區(qū)的滑動門代碼第1/2頁》相關(guān)的同類信息!
  • 本頁收集關(guān)于100%點擊區(qū)的滑動門代碼第1/2頁的相關(guān)信息資訊供網(wǎng)民參考!
  • 企业400电话

    智能AI客服机器人
    15000

    在线订购

    合计11份范本:公司章程+合伙协议+出资协议+合作协议+股权转让协议+增资扩股协议+股权激励+股东会决议+董事会决议

    推薦文章