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>
