欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

100%點擊區(qū)的滑動門代碼

 更新時間:2007年03月07日 00:00:00   作者:  

讓我們把CSS代碼整理優(yōu)化一下:


復制代碼 代碼如下:

#header li { 
  background:url("right.gif") no-repeat right top; 
  margin:0 0 0 9px; 

#header a { 
  position:relative; 
  left:-9px; 
  margin-right:-9px; 
  width:.1em; 
  background:url("left.gif") no-repeat left top; 
  padding:5px 15px 4px; 

#header > ul a {width:auto;} 

#header #current { 
  background-image:url("right_on.gif"); 

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



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

方法二:添加span標簽

這個方法只能說是練習,實驗用,真正布局的時候不推薦使用(僅是不推薦使用),畢竟添加了無語義的的span標簽。

首先在結構代碼中添加<span>標簽

<div id="header">
  <ul>
    <li><a href="#"><span>Home</span></a></li>
    <li id="current"><a href="#"><span>News</span></a></li>
    <li><a href="#"><span>Products</span></a></li>
    <li><a href="#"><span>About</span></a></li>
    <li><a href="#"><span>Contact</span></a></li>
  </ul>
</div>
有朋友或許問為什么要添加<span>元素呢,其實理由很簡單,我們通過a和span來模擬滑動門技術,而不是例子中的li和a,好處嘛,可以避免9px的盲點區(qū)域,因為<span>元素是包含在<a>元素里的。這樣處理100%點擊就相對容易很多。

由于使用a和span模擬,所以對于li我們不需要額外定義

#header li{
  float:left;
  margin:0;
  padding:0;
}
而原本對li設置的部分,我們轉移到a中設置,設置a的背景為left圖片,不重復,左上對齊。并給a設置左內邊距9px(left圖片的寬度),即span的顯示不遮擋left圖片。

#header a {
  background:url("left.gif") no-repeat left top;
  padding-left:9px;
}
對于span,將顯示原例子中a中的設置,設置span的背景為right圖片,不重復,右上對齊。并在span的左內邊距減去a設置的9px左內邊距,即span的左內邊距為6px。同樣為了一致性,我們要解決IE5/Mac的問題。


#header span {
  float:left;
  padding:5px 15px 4px 6px;
  display:block;
  background:url("right.gif") no-repeat right top;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header span {float:none;}
/* End IE5-Mac hack */
在此方法中我們依舊會碰到上例中碰到的在IE中鏈接的區(qū)域為文字區(qū)域而不是按鈕區(qū)域問題。如何解決呢,當然你也可以用上例中的方法解決。不過我們還可以,給a浮動來觸發(fā)IE下的layout。

#header a {
  float:left;
}
相對應的,對于current選擇器里的圖片位置也要做一點調整:

#header #current a {
  background-image:url("left_on.gif");
  color:#333;
}

#header #current span{
  background-image:url("right_on.gif");
  padding-bottom:5px;
}
讓我們把CSS代碼整理優(yōu)化一下:




#header li{
  float:left;
  margin:0;
  padding:0;
}
#header a {
  float:left;
  display:block;
  background:url("left.gif") no-repeat left top;
  padding-left:9px;
}
#header span {
  float:left;
  padding:5px 15px 4px 6px;
  display:block;
  background:url("right.gif") no-repeat right top;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header span {float:none;}
/* End IE5-Mac hack */

#header #current a {
  background-image:url("left_on.gif");
  color:#333;
}

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

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

參考文章:
http://www.w3cn.org/article/translate/2005/112.html
http://alistapart.com/articles/slidingdoors2/
http://www.zishu.cn/blogview.asp?logID=579

相關文章

最新評論