<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>CSS仿淘宝首页导航条按钮布局效果</title>
<style>
/*子鼠*/
body{ font-size:12px; text-align:center; margin-top:30px; font-family:Verdana;}
div,img{margin:0; padding:0; border:0;}
ul,li{list-style-type: none; margin:0; padding:0; float:left; }
#info{ margin-left:auto; margin-right:auto;width:760px; text-align:left;}
#new{ margin-top:-12px;position: absolute;margin-left:-12px;}
#nav{ height:30px; width:610px; margin-left:auto; margin-right:auto;}
#nav li{margin-left:1px; height:30px;}
#nav li a{ display:block;float:left; text-decoration:none; background-image: url(
);background-repeat: no-repeat; display:block; background-position:left top;}
#nav a span{cursor:hand; color:#000;background-image: url(
);background-repeat: no-repeat; display:block;background-position: right top; padding:7px 10px 6px 10px; float:left; }
#nav li a:active,#nav li a:hover {margin-top:0px; }
#nav li a:active span,#nav li a:hover span {padding:10px 10px 6px 10px; margin-top:0px; display:block; color:#FFF;}
#zishu01 a:link,#zishu01 a:visited {background-position: 0px -27px;}
#zishu01 a:link span,#zishu01 a:visited span{background-position:right -27px;padding:10px 10px 6px 10px; margin-top:0; color:#FFF; font-weight:bold;}
#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 {background-position: 0px -57px;}
#zishu02 a:active span,#zishu02 a:hover span{background-position:right -57px;}
#zishu03 a:active,#zishu03 a:hover {background-position: 0px -87px;}
#zishu03 a:active span,#zishu03 a:hover span{background-position:right -87px;}
#zishu04 a:active,#zishu04 a:hover {background-position: 0px -117px;}
#zishu04 a:active span,#zishu04 a:hover span{background-position:right -117px;}
#zishu05 a:active,#zishu05 a:hover {background-position: 0px -147px;}
#zishu05 a:active span,#zishu05 a:hover span{background-position:right -147px;}
#zishu06 a:active,#zishu06 a:hover {background-position: 0px -177px;}
#zishu06 a:active span,#zishu06 a:hover span{background-position:right -177px;}
#zishu07 a:active,#zishu07 a:hover {background-position: 0px -207px;}
#zishu07 a:active span,#zishu07 a:hover span{background-position:right -207px;}
#zishu08 a:active,#zishu08 a:hover {background-position: 0px -237px;}
#zishu08 a:active span,#zishu08 a:hover span{background-position:right -237px;}
#zishu09 a:active,#zishu09 a:hover {background-position: 0px -267px;}
#zishu09 a:active span,#zishu09 a:hover span{background-position:right -267px;}
#zishu10 a:active,#zishu10 a:hover {background-position: 0px -297px;}
#zishu10 a:active span,#zishu10 a:hover span{background-position:right -297px;}
#zishu11 a:link span,#zishu11 a:visited span{color:#FF6600;}
#zishu11 a:active,#zishu11 a:hover {background-position: 0px -327px;}
#zishu11 a:active span,#zishu11 a:hover span{background-position:right -327px;}
#menu{ width:760px; height:26px; background:#FF9900;}
#r1{border-top: 0px;border-bottom: 0px; border-left:3px solid #fff;border-right:3px solid #fff; height:1px; overflow:hidden;}
#<a href="http://game.yesky.com/gk/216/7649216.shtml" class="bluekey" target="_blank">r2</a>{border-top: 0px;border-bottom: 0px; border-left:2px solid #fff;border-right:2px solid #fff; height:1px; overflow:hidden;}
#r3{border-top: 0px;border-bottom: 0px; border-left:1px solid #fff;border-right:1px solid #fff; height:1px; overflow:hidden;}
</style>
</head>
<body>
<div id="info">
<div id="nav">
<ul>
<li id="zishu01"><a href="http://homepage.yesky.com/"><span>首页</span></a></li>
<li id="zishu02"><a href="http://homepage.yesky.com/"><span>数码通讯</span></a></li>
<li id="zishu03"><a href="http://homepage.yesky.com/"><span>女人</span></a></li>
<li id="zishu04"><a href="http://homepage.yesky.com/"><span>男人</span></a></li>
<li id="zishu05"><a href="http://homepage.yesky.com/"><span>家居</span></a></li>
<li id="zishu06"><a href="http://homepage.yesky.com/"><span>书籍音像</span></a></li>
<li id="zishu07"><a href="http://homepage.yesky.com/"><span>运动</span></a></li>
<li id="zishu08"><a href="http://homepage.yesky.com/"><span>运动</span></a></li>
<li id="zishu09"><a href="http://homepage.yesky.com/"><span>宠物</span></a></li>
<li id="zishu10"><a href="http://homepage.yesky.com/"><span>香港街</span></a></li>
<li id="zishu11"><a href="http://homepage.yesky.com/"><span>淘宝商城</span></a></li>
<li>
<div id="new">
<img src="http://www.jscode.cn/Uploadfile/200661115947970.GIF" alt="新加栏目" /></div>
</li>
</ul>
</div>
<div id="menu">
<div id="r1">
</div>
<div id="r2">
</div>
<div id="r3">
</div>
<div>
</div>
</div>
</div>
<p>仿淘宝网首页导航条效果 转载请注明出处 子鼠</p>
</body>
</html>
可按专辑选择曲目，界面有6种随机皮肤，您可定制外观和列表，还可在后台改样式、加音视频、加入歌词、指定共享用户等； 2.可添加的视频格式：.WAV .MPG .MPEG .MPE .MPA .AVI .WMV .WVX .IVF .DAT .ASF .SMI .SMIL .RMVB .SWF .JPE .JPG .JPEG .GIF .PNG .BMP .FLV .html 音频格式：.M1V .MP2 .MPV2 .MP2V .MP3 .MID .MIDI .RMI .WMA .WAX .AIF .AIFC .AIFF .AU .SND .SWA .M3U；
3.内置赞偈、经颂、经忏、朝暮课诵、经咒佛号、藏传南传、英语、旋律、名星唱佛等佛教梵呗，共有132部专辑1088首佛
曲，10G的音乐文件，多为128kbps 44kHz格式，点击网页右上角的“启动播放器”即可在线播放。 内置佛乐下载 详细帮助
