yy玄幻小说排行榜完本,好看的小说

主頁 > 知識庫 > DIV+CSS 滑動門技術(shù)的簡單例子

DIV+CSS 滑動門技術(shù)的簡單例子

作者：zishu
以下是客齊集網(wǎng)站上應(yīng)用的一個(gè)導(dǎo)航條.

這次寫的沒有直接在STYLE里用ID的形式控制.全部用的CLASS形式;

復(fù)制代碼代碼如下:

style type="text/css"> 
#zishu li{ float:left; margin-left:5px; margin-top:50px;} 
.nav_a a:link,.nav_a a:visited{text-decoration:none; display:block; padding-right:10px; background:url(/upload/20073614410846.gif) no-repeat right top;margin-top:3px; color:#000; float:left;} 
.nav_a span{cursor:hand;background-color: #DBF0C4; font-size:14px;background:url(/upload/20073614414862.gif) no-repeat; display:block; line-height:29px; padding-left:10px; cursor:hand; float:left;} 
.nav_a a:hover,.nav_a active{text-decoration:none; display:block; padding-right:10px; background:url(/upload/20073614410846.gif) no-repeat right bottom;margin-top:0px; color:#000} 
.nav_a a:hover span,.nav_a a:active span{background-color: #DBF0C4; font-size:14px;background: url(/upload/20073614414862.gif)  no-repeat  left bottom; display:block; line-height:29px; padding-left:10px; margin-top:0px; padding-top:1px; padding-bottom:2px; cursor:hand;} 
#box{ background:#009900; height:4px; overflow:hidden; clear:both} 
/style>

以下是BODY部分:

復(fù)制代碼代碼如下:

ul id="zishu"> 
  li class="nav_a">a href="http://fenlei.zishu.cn/l.php?c=2104a=21">span>兼職實(shí)習(xí)/span>/a>/li> 
  li class="nav_a">a href="http://fenlei.zishu.cn/l.php?c=2107a=21">span>車輛買賣/span>/a>/li> 
  li class="nav_a">a href="http://fenlei.zishu.cn/l.php?c=2101a=21">span>同城活動/span>/a>/li> 
  li class="nav_a">a href="http://fenlei.zishu.cn/l.php?c=2102a=21">span>房屋租售/span>/a>/li> 
  li class="nav_a">a href="http://fenlei.zishu.cn/l.php?c=2105a=21">span>同城尋緣/span>/a>/li> 
  li class="nav_a">a href="http://fenlei.zishu.cn/l.php?c=2103a=21">span>跳蚤市場/span>/a>/li> 
  li class="nav_a">a href="http://fenlei.zishu.cn/l.php?c=2108a=21">span>個(gè)人服務(wù)/span>/a>/li> 
  li class="nav_a">a href="http://fenlei.zishu.cn/l.php?c=2106a=21">span>學(xué)習(xí)與培訓(xùn)培訓(xùn)/span>/a>/li> 
/ul> 

效果展示:

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>zishu.cn</title> <style type="text/css"> #zishu li{ float:left; margin-left:5px; margin-top:50px;} .nav_a a:link,.nav_a a:visited{text-decoration:none; display:block; padding-right:10px; background:url(/upload/20073614410846.gif) no-repeat right top;margin-top:3px; color:#000; float:left;} .nav_a span{cursor:hand;background-color: #DBF0C4; font-size:14px;background:url(/upload/20073614414862.gif) no-repeat; display:block; line-height:29px; padding-left:10px; cursor:hand; float:left;} .nav_a a:hover,.nav_a active{text-decoration:none; display:block; padding-right:10px; background:url(/upload/20073614410846.gif) no-repeat right bottom;margin-top:0px; color:#000} .nav_a a:hover span,.nav_a a:active span{background-color: #DBF0C4; font-size:14px;background: url(/upload/20073614414862.gif)  no-repeat  left bottom; display:block; line-height:29px; padding-left:10px; margin-top:0px; padding-top:1px; padding-bottom:2px; cursor:hand;} #box{ background:#009900; height:4px; overflow:hidden; clear:both} </style> </head> <body> <ul id="zishu">   <li id="r5xn5p7"    class="nav_a"><span>兼職實(shí)習(xí)</span></li>   <li id="dfxbdhx"    class="nav_a"><span>車輛買賣</span></li>   <li id="fxdhp7j"    class="nav_a"><span>同城活動</span></li>   <li id="5fjpvld"    class="nav_a"><span>房屋租售</span></li>   <li id="tl5xdhl"    class="nav_a"><span>同城尋緣</span></li>   <li id="rtl57dj"    class="nav_a"><span>跳蚤市場</span></li>   <li id="drzfxp5"    class="nav_a"><span>個(gè)人服務(wù)</span></li>   <li id="7zphbh7"    class="nav_a"><span>學(xué)習(xí)與培訓(xùn)培訓(xùn)</span></li> </ul> <div   class="rhjnhl5"   id="box"></div> </body> </html>

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

說明:

1.CSS沒有特別的優(yōu)化.
2.可自動適應(yīng)多字和少字.例如:學(xué)習(xí)與培訓(xùn)培訓(xùn)是7個(gè)字;
3.用到了兩張圖片.左邊一張.右邊一張;
4.加了鼠標(biāo)移上去跳一下的效果;
5.這個(gè)例子寫的不復(fù)雜.合適于初學(xué)者;

如果你認(rèn)為這個(gè)色彩不玄,你可以看一下這個(gè)例子. 也許你會喜歡.
仿淘寶首頁導(dǎo)航條布局效果

標(biāo)簽：遼源喀什南充邯鄲東莞陽泉海東濱州

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《DIV+CSS 滑動門技術(shù)的簡單例子》，本文關(guān)鍵詞 DIV+CSS,滑動,門,技術(shù),的,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。

濮阳杆衣贸易有限公司

DIV+CSS 滑動門技術(shù)的簡單例子