CSS仿淘寶首頁導覽條版面效果
作者：Eve Cole
更新時間：2009-06-12 19:27:43
<!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 ">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘寶測驗2</title>
<風格>
/* www.zishu.cn子鼠*/
正文{ 字體大小：12px;文字對齊：居中； 上邊距：30px；字型系列：Verdana;}
div,img{邊距:0;填充：0；邊框：0；}
ul,li{列表樣式類型：無；保證金：0；填充：0；浮動：左； }
#info{ 左邊距：自動；右邊距：自動；寬度：760px；文字對齊：左；}
#new{ 上邊距：-12px；位置：絕對；左邊距：-12px；}
#nav{ 高度：30px;寬度：610px；左邊距：自動；右邊距：自動；}
#nav li{margin-left:1px;高度：30px；}
#nav li a{ 顯示：塊；浮動：左；文字裝飾：無；背景圖像：url（ ：無重複；顯示：塊；背景位置：右上角；填充：7px 10px 6px 10px；浮動：左；}
#nav li a:active,#nav li a:hover {margin-top:0px; }
#nav li a:活動範圍,#nav li a:懸停範圍{padding:10px 10px 6px 10px;上邊距：0px；顯示：塊；顏色：#FFF;}
#zishu01 a:link,#zishu01 a:造訪過{背景位置: 0px -27px;}
#zishu01 a:連結span,#zishu01 a:訪問span{background-position:right -27px;padding:10px 10px 6px 10px;上邊距：0；顏色：#FFF；字體粗細：粗體；}
#zishu02 a,#zishu03 a,#zishu04 a,#zishu05 a,#zishu06 a,#zishu07 a,#zishu08 a,#zishu09 a,#zishu10 a,#zishu11 a{margin-top:3px}
#zishu02 a:active,#zishu02 a:hover {背景位置: 0px -57px;}
#zishu02 a:活動範圍,#zishu02 a:懸停範圍{background-position:right -57px;}
#zishu03 a:active,#zishu03 a:hover {背景位置: 0px -87px;}
#zishu03 a:活動範圍,#zishu03 a:懸停範圍{background-position:right -87px;}
#zishu04 a:active,#zishu04 a:hover {背景位置: 0px -117px;}
#zishu04 a:活動範圍,#zishu04 a:懸停範圍{background-position:right -117px;}
#zishu05 a:active,#zishu05 a:hover {背景位置: 0px -147px;}
#zishu05 a:活動範圍,#zishu05 a:懸停範圍{background-position:right -147px;}
#zishu06 a:active,#zishu06 a:hover {背景位置: 0px -177px;}
#zishu06 a:活動範圍,#zishu06 a:懸停範圍{background-position:right -177px;}
#zishu07 a:active,#zishu07 a:hover {背景位置: 0px -207px;}
#zishu07 a:活動範圍,#zishu07 a:懸停範圍{background-position:right -207px;}
#zishu08 a:active,#zishu08 a:hover {背景位置: 0px -237px;}
#zishu08 a:活動範圍,#zishu08 a:懸停範圍{background-position:right -237px;}
#zishu09 a:active,#zishu09 a:hover {背景位置: 0px -267px;}
#zishu09 a:活動範圍,#zishu09 a:懸停範圍{background-position:right -267px;}
#zishu10 a:active,#zishu10 a:hover {背景位置: 0px -297px;}
#zishu10 a:活動範圍,#zishu10 a:懸停範圍{background-position:right -297px;}
#zishu11 a:連結span,#zishu11 a:訪問span{color:#FF6600;}
#zishu11 a:active,#zishu11 a:hover {背景位置: 0px -327px;}
#zishu11 a:活動範圍,#zishu11 a:懸停範圍{background-position:right -327px;}
#菜單{寬度：760px;高度：26px；背景：#FF9900;}
#r1{上邊框：0px;下邊框：0px;左邊框：3px 實心#fff；右邊框：3px 實心#fff；高度：1px；溢出：隱藏；}
#r2{上邊框：0px;下邊框：0px;左邊框：2px 實心#fff；右邊框：2px 實心#fff；高度：1px；溢出：隱藏；}
#r3{上邊框：0px;下邊框：0px;左邊框：1px 實心#fff；右邊框：1px 實心#fff；高度：1px；溢出：隱藏；}
</風格>
</頭>
<正文>
<div id="訊息">
<div id="導航">
<ul>
<li id="zishu01"> <a href="http://www.zishu.cn"> <span>首頁</span></a></li>
<li id="zishu02"> <a href=" http://www.zishu.cn"><span >數位通訊</span></a></li>
<li id="zishu03"> <a href="http://www.zishu.cn"><span>女人</span></a></li>
<li id="zishu04"> <a href="http://www.zishu.cn"><span>男人</span></a></li>
<li id="zishu05"> <a href="http://www.zishu.cn"><span>家居</span></a></li>
<li id="zishu06"> <a href="http://www.zishu.cn"><span>書籍音像</span></a></li>
<li id="zishu07"> <a href="http://www.zishu.cn"><span>運動</span></a></li>
<li id="zishu08"> <a href="http://www.zishu.cn"><span>遊戲</span></a></li>
<li id="zishu09"> <a href="http://www.zishu.cn"><span>寵物</span></a></li>
<li id="zishu10"> <a href="http://www.zishu.cn"><span>香港街</span></a></li>
<li id="zishu11"> <a href="http://www.zishu.cn"><span>淘寶商城</span></a></li>
<li><div id="new"><img src=" </ul>
</div>
<div id="菜單">
<div id="r1"></div>
<div id="r2"></div>
<div id="r3"></div>
<div></div>
</div>
</div>
<p>仿淘寶網首頁導覽條效果請藍牙出處www.zishu.cn 2006-05-21凌晨03:05分</p>
</正文>
</html>
