CSS导航菜单：仿淘宝首页导航条布局效果

先看看下面的效果：


一直以来，人们都认为淘宝的导航条不错，更有很多网站效仿；今天就当作个练习，作一下这个导航条；
　　以下效果应用的图片共2张，如果只用1张效果不太好，特别是圆角部分。我大致看了一下淘宝现在的导航条，分别用了十几张图片，并不是用以下这个方法作的，如果你有兴趣现在可以上淘宝网看一下，鼠标移上去的图片不能立刻显示，这样的效果不是很理想。
　　这次我试着把显示的效果图和鼠标移上去的图合成一个了，这样鼠标移上去就不用再加载一次这个图了，可以解决以前鼠标移上去还得等一会的问题。（测试后的效果似乎还真的可以）
　　测试代码，CSS和内容都没有优化；

CSS代码如下：

1. <style>
   
2. /* www.china0379.com 洛阳网*/
   
3. body{ font-size:12px; text-align:center;  margin-top:30px; font-family:Verdana;}
   
4. div,img{margin:0; padding:0; border:0;}
   
5. ul,li{list-style-type: none; margin:0; padding:0; float:left; }
   
6. #info{ margin-left:auto; margin-right:auto;width:760px; text-align:left;}
   
7. #new{ margin-top:-12px;position: absolute;margin-left:-12px;}
   
8. #nav{ height:30px; width:610px; margin-left:auto; margin-right:auto;}
   
9. #nav li{margin-left:1px; height:30px;}
   
10. #nav li a{ display:block;float:left; text-decoration:none; background-image: url(attachments/month_0605/r200652134132.gif);background-repeat: no-repeat; display:block; background-position:left top;}
    
11. #nav a span{cursor:hand; color:#000;background-image: url(attachments/month_0605/v200652134115.gif);background-repeat: no-repeat; display:block;background-position: right top; padding:7px 10px 6px 10px; float:left; }
    
12. #nav li a:active,#nav li a:hover {margin-top:0px; }
    
13. #nav li  a:active span,#nav li a:hover span {padding:10px 10px 6px 10px; margin-top:0px; display:block; color:#FFF;}
    
14. #zishu01 a:link,#zishu01 a:visited {background-position: 0px -27px;}
    
15. #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;}
    
16. #zishu02 a,#zishu03 a,#zishu04 a,#zishu05 a,#zishu06 a,#zishu07 a,#zishu08 a,#zishu09 a,#zishu10 a,#zishu11 a{margin-top:3px;}
    
17. #zishu02 a:active,#zishu02 a:hover {background-position: 0px -57px;}
    
18. #zishu02 a:active span,#zishu02 a:hover span{background-position:right -57px;}
    
19. #zishu03 a:active,#zishu03 a:hover {background-position: 0px -87px;}
    
20. #zishu03 a:active span,#zishu03 a:hover span{background-position:right -87px;}
    
21. #zishu04 a:active,#zishu04 a:hover {background-position: 0px -117px;}
    
22. #zishu04 a:active span,#zishu04 a:hover span{background-position:right -117px;}
    
23. #zishu05 a:active,#zishu05 a:hover {background-position: 0px -147px;}
    
24. #zishu05 a:active span,#zishu05 a:hover span{background-position:right -147px;}
    
25. #zishu06 a:active,#zishu06 a:hover {background-position: 0px -177px;}
    
26. #zishu06 a:active span,#zishu06 a:hover span{background-position:right -177px;}
    
27. #zishu07 a:active,#zishu07 a:hover {background-position: 0px -207px;}
    
28. #zishu07 a:active span,#zishu07 a:hover span{background-position:right -207px;}
    
29. #zishu08 a:active,#zishu08 a:hover {background-position: 0px -237px;}
    
30. #zishu08 a:active span,#zishu08 a:hover span{background-position:right -237px;}
    
31. #zishu09 a:active,#zishu09 a:hover {background-position: 0px -267px;}
    
32. #zishu09 a:active span,#zishu09 a:hover span{background-position:right -267px;}
    
33. #zishu10 a:active,#zishu10 a:hover {background-position: 0px -297px;}
    
34. #zishu10 a:active span,#zishu10 a:hover span{background-position:right -297px;}
    
35. #zishu11 a:link span,#zishu11 a:visited span{color:#FF6600;}
    
36. #zishu11 a:active,#zishu11 a:hover {background-position: 0px -327px;}
    
37. #zishu11 a:active span,#zishu11 a:hover span{background-position:right -327px;}
    
38. #menu{ width:760px; height:26px; background:#FF9900;}
    
39. #r1{border-top: 0px;border-bottom: 0px; border-left:3px solid #fff;border-right:3px solid #fff; height:1px; overflow:hidden;}
    
40. #r2{border-top: 0px;border-bottom: 0px; border-left:2px solid #fff;border-right:2px solid #fff; height:1px; overflow:hidden;}
    
41. #r3{border-top: 0px;border-bottom: 0px; border-left:1px solid #fff;border-right:1px solid #fff; height:1px; overflow:hidden;}
    
42. </style>

复制代码

XHTML代码如下：

1. <div id="info">
   
2. <div id="nav">
   
3.   <ul>
   
4.    <li id="zishu01"><a href="http://www.china0379.com"><span>首页</span></a></li>
   
5.    <li id="zishu02"><a href="http://www.china0379.com"><span>数码通讯</span></a></li>
   
6.    <li id="zishu03"><a href="http://www.china0379.com"><span>女人</span></a></li>
   
7.    <li id="zishu04"><a href="http://www.china0379.com"><span>男人</span></a></li>
   
8.    <li id="zishu05"><a href="http://www.china0379.com"><span>家居</span></a></li>
   
9.    <li id="zishu06"><a href="http://www.china0379.com"><span>书籍音像</span></a></li>
   
10.    <li id="zishu07"><a href="http://www.china0379.com"><span>运动</span></a></li>
    
11.    <li id="zishu08"><a href="http://www.china0379.com"><span>游戏</span></a></li>
    
12.    <li id="zishu09"><a href="http://www.china0379.com"><span>宠物</span></a></li>
    
13.    <li id="zishu10"><a href="http://www.china0379.com"><span>香港街</span></a></li>
    
14.    <li id="zishu11"><a href="http://www.china0379.com"><span>淘宝商城</span></a></li>
    
15.    <li><div id="new"><img src="attachments/month_0605/x200652135342.gif" alt="新加栏目" /></div></li>
    
16.   </ul>
    
17. </div>
    
18. <div id="menu">
    
19.   <div id="r1"></div>
    
20.   <div id="r2"></div>
    
21.   <div id="r3"></div>
    
22.   <div></div>
    
23. </div>
    
24. </div>

复制代码

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   
2. <html xmlns="http://www.w3.org/1999/xhtml">
   
3. <head>
   
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   
5. <title>TAO BAO TEST 2</title>
   
6. <style>
   
7. /* www.zishu.cn 子鼠*/
   
8. body{ font-size:12px; text-align:center;  margin-top:30px; font-family:Verdana;}
   
9. div,img{margin:0; padding:0; border:0;}
   
10. ul,li{list-style-type: none; margin:0; padding:0; float:left; }
    
11. #info{ margin-left:auto; margin-right:auto;width:760px; text-align:left;}
    
12. #new{ margin-top:-12px;position: absolute;margin-left:-12px;}
    
13. #nav{ height:30px; width:610px; margin-left:auto; margin-right:auto;}
    
14. #nav li{margin-left:1px; height:30px;}
    
15. #nav li a{ display:block;float:left; text-decoration:none; background-image: url
    
16. 
    
17. (http://www.china0379.com/attachments/month_0605/r200652134132.gif);background-repeat: no-repeat; display:block; background-
    
18. 
    
19. position:left top;}
    
20. #nav a span{cursor:hand; color:#000;background-image: url
    
21. 
    
22. (http://www.china0379.com/attachments/month_0605/v200652134115.gif);background-repeat: no-repeat; display:block;background-
    
23. 
    
24. position: right top; padding:7px 10px 6px 10px; float:left; }
    
25. #nav li a:active,#nav li a:hover {margin-top:0px; }
    
26. #nav li  a:active span,#nav li a:hover span {padding:10px 10px 6px 10px; margin-top:0px; display:block; color:#FFF;}
    
27. #zishu01 a:link,#zishu01 a:visited {background-position: 0px -27px;}
    
28. #zishu01 a:link span,#zishu01 a:visited span{background-position:right -27px;padding:10px 10px 6px 10px; margin-top:0;
    
29. 
    
30. color:#FFF; font-weight:bold;}
    
31. #zishu02 a,#zishu03 a,#zishu04 a,#zishu05 a,#zishu06 a,#zishu07 a,#zishu08 a,#zishu09 a,#zishu10 a,#zishu11 a{margin-
    
32. 
    
33. top:3px;}
    
34. #zishu02 a:active,#zishu02 a:hover {background-position: 0px -57px;}
    
35. #zishu02 a:active span,#zishu02 a:hover span{background-position:right -57px;}
    
36. #zishu03 a:active,#zishu03 a:hover {background-position: 0px -87px;}
    
37. #zishu03 a:active span,#zishu03 a:hover span{background-position:right -87px;}
    
38. #zishu04 a:active,#zishu04 a:hover {background-position: 0px -117px;}
    
39. #zishu04 a:active span,#zishu04 a:hover span{background-position:right -117px;}
    
40. #zishu05 a:active,#zishu05 a:hover {background-position: 0px -147px;}
    
41. #zishu05 a:active span,#zishu05 a:hover span{background-position:right -147px;}
    
42. #zishu06 a:active,#zishu06 a:hover {background-position: 0px -177px;}
    
43. #zishu06 a:active span,#zishu06 a:hover span{background-position:right -177px;}
    
44. #zishu07 a:active,#zishu07 a:hover {background-position: 0px -207px;}
    
45. #zishu07 a:active span,#zishu07 a:hover span{background-position:right -207px;}
    
46. #zishu08 a:active,#zishu08 a:hover {background-position: 0px -237px;}
    
47. #zishu08 a:active span,#zishu08 a:hover span{background-position:right -237px;}
    
48. #zishu09 a:active,#zishu09 a:hover {background-position: 0px -267px;}
    
49. #zishu09 a:active span,#zishu09 a:hover span{background-position:right -267px;}
    
50. #zishu10 a:active,#zishu10 a:hover {background-position: 0px -297px;}
    
51. #zishu10 a:active span,#zishu10 a:hover span{background-position:right -297px;}
    
52. #zishu11 a:link span,#zishu11 a:visited span{color:#FF6600;}
    
53. #zishu11 a:active,#zishu11 a:hover {background-position: 0px -327px;}
    
54. #zishu11 a:active span,#zishu11 a:hover span{background-position:right -327px;}
    
55. #menu{ width:760px; height:26px; background:#FF9900;}
    
56. #r1{border-top: 0px;border-bottom: 0px; border-left:3px solid #fff;border-right:3px solid #fff; height:1px; overflow:hidden;}
    
57. #r2{border-top: 0px;border-bottom: 0px; border-left:2px solid #fff;border-right:2px solid #fff; height:1px; overflow:hidden;}
    
58. #r3{border-top: 0px;border-bottom: 0px; border-left:1px solid #fff;border-right:1px solid #fff; height:1px; overflow:hidden;}
    
59. </style>
    
60. </head>
    
61. <body>
    
62. <div id="info">
    
63. <div id="nav">
    
64.   <ul>
    
65.    <li id="zishu01"><a href="http://www.china0379.com"><span>首页</span></a></li>
    
66.    <li id="zishu02"><a href="http://www.china0379.com"><span>数码通讯</span></a></li>
    
67.    <li id="zishu03"><a href="http://www.china0379.com"><span>女人</span></a></li>
    
68.    <li id="zishu04"><a href="http://www.china0379.com"><span>男人</span></a></li>
    
69.    <li id="zishu05"><a href="http://www.china0379.com"><span>家居</span></a></li>
    
70.    <li id="zishu06"><a href="http://www.china0379.com"><span>书籍音像</span></a></li>
    
71.    <li id="zishu07"><a href="http://www.china0379.com"><span>运动</span></a></li>
    
72.    <li id="zishu08"><a href="http://www.china0379.com"><span>游戏</span></a></li>
    
73.    <li id="zishu09"><a href="http://www.china0379.com"><span>宠物</span></a></li>
    
74.    <li id="zishu10"><a href="http://www.china0379.com"><span>香港街</span></a></li>
    
75.    <li id="zishu11"><a href="http://www.china0379.com"><span>淘宝商城</span></a></li>
    
76.    <li><div id="new"><img src="http://www.china0379.com/attachments/month_0605/x200652135342.gif" alt="新加栏目"
    
77. 
    
78. /></div></li>
    
79.   </ul>
    
80. </div>
    
81. <div id="menu">
    
82.   <div id="r1"></div>
    
83.   <div id="r2"></div>
    
84.   <div id="r3"></div>
    
85.   <div></div>
    
86. </div>
    
87. </div>
    
88. <p>仿淘宝网首页导航条效果2007-10-19 凌晨03:05分</p>
    
89. </body>
    
90. </html>

复制代码

　以下是应用到的3张图片：















直接把代码放到记事本里,保存能.TXT的文件  在把.TXT 变成HTM你看下效果就知道了

[ 本帖最后由 luoyangwang 于 2007-10-23 17:49 编辑 ]

支持!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

z怎么没人来顶，我顶！！

今天论坛怎么了？？

谢谢大家的支持

这个要怎么用呢？？

支持一下

能否说得更详细？！

好东西   先收藏