|
讓我們把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 全部選擇 提示：你可先修改部分代碼，再按運行]
方法二：添加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設置的部分，我們轉(zhuǎn)移到a中設置，設置a的背景為left圖片，不重復，左上對齊。并給a設置左內(nèi)邊距9px（left圖片的寬度），即span的顯示不遮擋left圖片。
#header a {
background:url("left.gif") no-repeat left top;
padding-left:9px;
}
對于span，將顯示原例子中a中的設置，設置span的背景為right圖片，不重復，右上對齊。并在span的左內(nèi)邊距減去a設置的9px左內(nèi)邊距，即span的左內(nèi)邊距為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選擇器里的圖片位置也要做一點調(diào)整：
#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 全部選擇 提示：你可先修改部分代碼，再按運行]
參考文章：
http://www.w3cn.org/article/translate/2005/112.html
http://alistapart.com/articles/slidingdoors2/
http://www.zishu.cn/blogview.asp?logID=579
經(jīng)典論壇討論：
http://bbs.blueidea.com/thread-2720514-1-1.html
本文鏈接：http://m.95time.cn/tech/web/2007/4495.asp 
出處：藍色理想
責任編輯：blue
上一頁 100%點擊區(qū)的滑動門 [1] 下一頁
◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 
第 2 頁 100%點擊區(qū)的滑動門 [2]
