js、jquery菜单导航条

怼烎@ 2022-05-09 10:33 340阅读 0赞

漂亮的导航条

  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.     <title>20个web2.0导航样式，阿里西西整理收集，alixixi.com</title>
  5.     <meta name="description" content="Wenqi space,Wenqi Blog" />
  6.     <link href="navigation.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <body>
  9. 您的位置：<a href="http://www.alixixi.com">阿里西西</a> > <a href="http://js.alixixi.com">网页特效</a> > <a href="http://js.alixixi.com/c/guanggao_1.shtml">广告代码</a><hr />
  10.   <!------- 导航1 ------->
  11.   <div>
  12.     <img src="image/logo/logo1.jpg" alt="wenqi's blog" />
  13.   </div>
  14.   <div class="menu1">
  15.     <a href="#">Blog</a>
  16.     <a href="#">Themes</a>
  17.     <a href="#">Service</a>
  18.     <a href="#">About</a>
  19.     <a href="#">Help</a>
  20.     <del></del>
  21.   </div>
  22.   <div>
  23.     <img src="image/logo/logo2.jpg" alt="wenqi's blog" />
  24.   </div>
  25.   <!------- 导航2 ------->
  26.   <div class="menu2">
  27.     <div class="left2"></div>
  28.     <div class="center2">
  29.       <a href="#">Blog</a>
  30.       <a href="#">Themes</a>
  31.       <a href="#">Service</a>
  32.       <a href="#">About</a>
  33.       <a href="#">Help</a>
  34.       <del></del>
  35.     </div>
  36.     <div class="right2"></div>
  37.     <div class="clear"></div>
  38.   </div>
  39.   <!------- 导航3 ------->
  40.   <div>
  41.     <img src="image/logo/logo3.jpg" alt="wenqi's blog" />
  42.   </div>
  43.   <div class="menu3">
  44.     <div class="left3"></div>
  45.     <div class="center3">
  46.       <a href="#">Blog</a>
  47.       <a href="#">Books</a>
  48.       <a href="#">Portfolio</a>
  49.       <a href="#">Photos</a>
  50.       <a href="#">Service</a>
  51.     </div>
  52.     <div class="right3"></div>
  53.     <div class="clear"></div>
  54.   </div>
  55.   <!------- 导航4 ------->
  56.   <div><img src="image/logo/logo4.jpg" alt="WQ's space" /></div>
  57.   <div class="menu4">
  58.     <a href="#">Blog</a>
  59.     <a href="#">Themes</a>
  60.     <a href="#">Service</a>
  61.     <a href="#">About</a>
  62.     <a href="#">Help</a>
  63.     <del></del>
  64.   </div>
  65.   <!------- 导航4 ------->
  66.   <div><img src="image/logo/logo5.jpg" alt="wenqi's space" /></div>
  67.   <div class="menu5">
  68.     <a href="#">Blog</a>
  69.     <a href="#">Themes</a>
  70.     <a href="#">Service</a>
  71.     <a href="#">About</a>
  72.     <del></del>
  73.   </div>
  74.   <!------- 导航6 ------->
  75.   <div>
  76.     <img src="image/logo/logo6.jpg" alt="wenqi's blog" />
  77.   </div>
  78.   <div class="menu6">
  79.     <div class="left6"></div>
  80.     <div class="center6">
  81.       <a href="#">Blog</a><span></span>
  82.       <a href="#">Themes</a><span></span>
  83.       <a href="#">Service</a><span></span>
  84.       <a href="#">About</a><span></span>
  85.       <a href="#">Help</a>
  86.     </div>
  87.     <div class="right6"></div>
  88.     <div class="clear"></div>
  89.   </div>
  90.   <!------- 导航7 ------->
  91.   <div>
  92.     <img src="image/logo/logo7.jpg" alt="wenqi's blog" />
  93.   </div>
  94.   <div class="menu7">
  95.     <div class="left7"></div>
  96.     <div class="center7">
  97.       <a href="#">Blog</a>
  98.       <a href="#">Themes</a>
  99.       <a href="#">Service</a>
  100.       <a href="#">About</a>
  101.       <a href="#">Help</a>
  102.     </div>
  103.     <div class="right7"></div>
  104.     <div class="clear"></div>
  105.   </div>
  106.   <!------- 导航8 ------->
  107.   <div><img src="image/logo/logo8.jpg" alt="wenqi blog" /></div>
  108.   <div class="menu8">
  109.     <a href="#">Blog</a>
  110.     <a href="#">Themes</a>
  111.     <a href="#">Service</a>
  112.     <a href="#">About</a>
  113.     <del></del>
  114.   </div>
  115.   <!------- 导航9 ------->
  116.   <div><img src="image/logo/logo9.jpg" alt="wenqi blog" /></div>
  117.   <div class="menu9">
  118.     <a href="#">Blog</a>
  119.     <a href="#">Themes</a>
  120.     <a href="#">Uploads</a>
  121.     <a href="#">Service</a>
  122.     <a href="#">About</a>
  123.     <del></del>
  124.   </div>
  125.   <!------- 导航10 ------->
  126.   <div><img src="image/logo/logo10.jpg" alt="wenqi's blog" /></div>
  127.   <div class="menu10">
  128.     <div class="left10"></div>
  129.     <div class="center10">
  130.       <a href="#">Blog</a>
  131.       <a href="#">Themes</a>
  132.       <a href="#">Service</a>
  133.       <a href="#">About</a>
  134.       <a href="#">Help</a>
  135.     </div>
  136.     <div class="right10"></div>
  137.     <div class="clear"></div>
  138.   </div>
  139.   <!------- 导航11 ------->
  140.   <div class="top11"><a href="#">zhouwenqi.com</a><del></del></div>
  141.   <div class="menu11">
  142.     <div>
  143.       <a href="#">Blog</a>
  144.       <a href="#">Themes</a>
  145.       <a href="#">Uploads</a>
  146.       <a href="#">Service</a>
  147.       <a href="#">About</a>
  148.       <del></del>
  149.     </div>
  150.   </div>
  151.   <div style="margin-bottom:30px;"><img src="image/logo/logo11.jpg" alt="wenqi blog" /></div>
  152.    <!------- 导航12 ------->
  153.   <div class="box12">
  154.   <div class="menu12">
  155.     <div class="left12"></div>
  156.     <div class="center12">
  157.       <a href="#">Blog</a>
  158.       <a href="#">Themes</a>
  159.       <a href="#">Service</a>
  160.       <a href="#">About</a>
  161.       <del></del>
  162.     </div>
  163.     <div class="right12"></div>
  164.     <div class="clear"></div>
  165.   </div>
  166.   <div><img src="image/logo/logo12.jpg" alt="wenqi blog" /></div>
  167.   </div>
  168.   <!------- 导航13 ------->
  169.   <div class="box13">
  170.     <div class="logo13"></div>
  171.     <div class="menu13">
  172.       <div>
  173.         <a href="#">Blog</a>
  174.         <a href="#">Themes</a>
  175.         <a href="#">Service</a>
  176.         <a href="#">About</a>
  177.         <del></del>
  178.       </div>
  179.     </div>
  180.     <div class="top13"></div>
  181.   </div>
  182.   <!------- 导航14 ------->
  183.   <div class="box14">
  184.     <div class="top14">
  185.      <a href="#">Contact</a><span>|</span><a href="#">Downloads</a><span>|</span><a href="#">Register</a><span>|</span><a href="#">Login</a><del></del>
  186.     </div>
  187.     <div class="menu14">
  188.         <label></label><span></span>
  189.         <a href="#">Blog</a><span></span>
  190.         <a href="#">Gallery</a><span></span>
  191.         <a href="#">Themes</a><span></span>
  192.         <a href="#">Service</a><span></span>
  193.         <a href="#">About</a>
  194.         <del></del>
  195.     </div>
  196.     <div><img src="image/navigation/bg14_bg.jpg" alt="wenqi's blog" /></div>
  197.   </div>
  198.   <!------- 导航15 ------->
  199.   <div class="box15">
  200.     <div class="left15"></div>
  201.     <div class="menu15">
  202.       <a href="#">Blog</a><span></span>
  203.         <a href="#">Gallery</a><span></span>
  204.         <a href="#">Service</a><span></span>
  205.         <a href="#">About</a>
  206.         <del></del>
  207.     </div>
  208.     <div class="clear"></div>
  209.     <div><img src="image/navigation/bg15_bg.jpg" alt="wenqi's blog" /></div>
  210.   </div>
  211.   <!------- 导航16 ------->
  212.   <div class="menu16">
  213.     <a href="#">Blog</a>
  214.     <a href="#">Themes</a>
  215.     <a href="#">Uploads</a>
  216.     <a href="#">Service</a>
  217.     <a href="#">About</a>
  218.     <del></del>
  219.   </div>
  220.   <div><img src="image/navigation/bg16_bg.jpg" alt="wenqi blog" /></div> 
  221.   <!------- 导航17 -------> 
  222.   <div class="top17">
  223.     <a href="#">Contact</a><span>|</span><a href="#">Register</a><span>|</span><a href="#">Login</a><del></del>
  224.   </div>
  225.   <div class="menu17">
  226.     <a href="#">Blog</a>
  227.     <a href="#">Gallery</a>
  228.     <a href="#">Service</a>
  229.     <a href="#">Works</a>
  230.     <a href="#">About</a>
  231.     <del></del>
  232.   </div>
  233.   <!------- 导航18 -------> 
  234.   <div class="box18">
  235.     <div class="top18"></div>
  236.     <div class="menu18">
  237.       <a href="#" class="a1">Blog</a>
  238.       <a href="#" class="a2">Gallery</a>
  239.       <a href="#" class="a3">Service</a>
  240.       <a href="#" class="a4">About</a>
  241.       <del></del>
  242.     </div>
  243.   </div>
  244.   <!------- 导航19 -------> 
  245.   <div class="top19">
  246.     <a href="#">Contact</a><span>|</span><a href="#">Register</a><span>|</span><a href="#">Login</a>
  247.   </div>
  248.   <div class="menu19">
  249.     <a href="#">Blog</a>
  250.     <a href="#">Gallery</a>
  251.     <a href="#">Service</a>
  252.     <a href="#">Works</a>
  253.     <a href="#">About</a>
  254.     <del></del>
  255.   </div>
  256.   <div class="bottom19"></div>
  257.    <!------- 导航20 ------->
  258.    <div><img src="image/logo/logo20.jpg" alt="wenqi's blog" /></div>
  259.    <div class="menu20">
  260.      <a href="#" class="a1">Blog</a>
  261.      <a href="#" class="a2">Gallery</a>
  262.      <a href="#" class="a3">Service</a>
  263.      <a href="#" class="a4">Works</a>
  264.     <del></del>
  265.   </div>
  266.   <div><img src="image/navigation/bg20_bg.jpg" alt="wenqi's blog" /></div>
  267. </body>
  268. </html>

css:

  1. html
  2. {
  3.     width:100%;
  4.     height:100%;
  5. }
  6. body 
  7. {
  8.     background-color:#fff;
  9.     font-size:18px;
  10.     font-family:"Arial","Tahoma","微软雅黑","雅黑";
  11.     line-height:18px;
  12.     padding:0px;
  13.     margin:0px;
  14.     text-align:center;
  15. }
  16. a
  17. {
  18.     display:block;
  19.     float:left;
  20. }
  21. del,div.clear
  22. {
  23.     height:0px;
  24.     font-size:0px;
  25.     line-height:0px;
  26.     padding:0px;
  27.     margin:0px;
  28.     display:block;
  29.     clear:both;
  30.     overflow:hidden;
  31. }
  32. div
  33. {
  34.     width:550px;
  35.     text-align:left;
  36.     margin:auto auto auto auto;
  37. }
  38. .menu1
  39. {
  40.     font-size:14px;    
  41.     line-height:14px;
  42.     background:url("image/navigation/bg1.jpg") repeat-x left bottom;
  43.     background-color:#f7f7f7;
  44.     margin-bottom:24px;
  45. }
  46. .menu1 a:link,.menu1 a:visited
  47. {
  48.     color:#7d7d7d;
  49.     background-color:#f7f7f7;
  50.     border-bottom:solid 2px #e6e6e6;    
  51.     text-decoration:none;
  52.     padding:10px 16px 10px 16px;
  53. }
  54. .menu1 a:hover,.menu1 a:active
  55. {
  56.     background-color:#646464;
  57.     border-bottom:solid 2px #2e2e2e;
  58.     color:#fff;
  59. }
  60. .menu2,.menu3
  61. {
  62.     font-size:14px;
  63.     line-height:14px;
  64.     margin-bottom:24px;
  65. }
  66. .menu2 .left2
  67. {
  68.     width:5px;
  69.     height:47px;
  70.     background:url("image/navigation/bg2_left.jpg") no-repeat left top;
  71.     float:left;    
  72. }
  73. .menu2 .center2
  74. {
  75.     width:540px;
  76.     height:47px;
  77.     background:url("image/navigation/bg2_center.jpg") repeat-x left top;
  78.     float:left;
  79. }
  80. .menu2 .right2
  81. {
  82.     width:5px;
  83.     height:47px;
  84.     background:url("image/navigation/bg2_right.jpg") no-repeat left top;
  85.     float:left;
  86. }
  87. .menu2 a:link,.menu2 a:visited
  89. {
  90.     color:#585858;
  91.     width:77px;
  92.     height:30px;
  93.     padding-top:17px;
  94.     background:url("image/navigation/bg2_btn.jpg") no-repeat left -94px;
  95.     text-align:center;
  96.     text-decoration:none;    
  97. }
  98. .menu2 a:hover
  99. {    
  100.     color:#fff;
  101.     background-position:left 0px;    
  102. }
  103. .menu2 a:active
  104. {
  105.     color:#fff;
  106.     background-position:left -47px;
  107. }
  108. .menu3 .left3
  109. {
  110.     width:7px;
  111.     height:43px;
  112.     background:url("image/navigation/bg3_left_right.jpg") no-repeat left top;
  113.     float:left;
  114. }
  115. .menu3 .center3
  116. {
  117.     width:536px;
  118.     height:43px;
  119.     background:url("image/navigation/bg3_btn.jpg") repeat-x left top;
  120.     float:left;
  121. }
  122. .menu3 .right3
  123. {
  124.     width:7px;
  125.     height:43px;
  126.     background:url("image/navigation/bg3_left_right.jpg") no-repeat left -43px;
  127.     float:left;
  128. }
  129. .menu3 a:link,.menu3 a:visited
  130. {
  131.     color:#fff;    
  132.     height:30px;
  133.     background:url("image/navigation/bg3_btn.jpg") repeat-x left top;
  134.     text-align:center;
  135.     text-decoration:none;
  136.     padding:13px 18px 0px 18px;
  137. }
  138. .menu3 a:hover,.menu3 a:active
  139. {
  140.     color:#666;
  141.     background-position:left -43px;
  142. }
  143. .menu4
  144. {
  145.     height:59px;
  146.     font-size:18px;
  147.     line-height:18px;
  148.     margin-bottom:20px;
  149. }
  150. .menu4 a:link,.menu4 a:visited
  151. {
  152.     color:#fff;
  153.     height:31px;
  154.     text-decoration:none;
  155.     background:url("image/navigation/bg4_btn.jpg") no-repeat left -102px;    
  156.     background-color:#f753c7;
  157.     padding:12px 14px 0px 14px;    
  158.     margin-top:8px;
  159.     text-align:center;
  160. }
  161. .menu4 a:hover
  162. {
  163.     color:#af2a88;
  164.     background:url("image/navigation/bg4_btn.jpg") no-repeat left -51px;
  165.     width:102px;
  166.     height:51px;
  167.     padding:20px 10px 0px 0px;
  168. }
  169. .menu4 a:active
  170. {
  171.     background-position:left top;
  172.     width:112px;
  173.     height:38px;
  174.     padding:13px 0px 0px 0px;
  175.     margin:0px;
  176. }
  177. .menu5
  178. {
  179.     font-size:18px;
  180.     line-height:18px;
  181.     padding-left:10px;
  182.     width:540px;
  183.     margin-bottom:30px;
  184. }
  185. .menu5 a:link,.menu5 a:visited
  186. {
  187.     width:99px;
  188.     height:26px;
  189.     color:#fff;
  190.     margin-right:1px;
  191.     padding-top:6px;
  192.     text-align:center;
  193.     background:url("image/navigation/bg5_btn.jpg") no-repeat left top;
  194.     text-decoration:none;
  195. }
  196. .menu5 a:hover
  197. {
  198.     background-position:left -32px;
  199. }
  200. .menu5 a:active
  201. {
  202.     background-position:left -64px;
  203. }
  204. .menu6
  205. {
  206.     font-size:14px;
  207.     line-height:14px;
  208.     margin-bottom:30px;
  209. }
  210. .menu6 .left6
  211. {
  212.     width:2px;
  213.     height:37px;
  214.     background:url("image/navigation/bg6_l_c_r.jpg") no-repeat left top;
  215.     float:left;
  216. }
  217. .menu6 .center6
  218. {
  219.     width:546px;
  220.     height:37px;
  221.     background:url("image/navigation/bg6_btn.jpg") repeat-x left top;    
  222.     float:left;
  223. }
  224. .menu6 .right6
  225. {
  226.     width:2px;
  227.     height:37px;
  228.     background:url("image/navigation/bg6_l_c_r.jpg") no-repeat left -37px;
  229.     float:left;
  230. }
  231. .menu6 a:link,.menu6 a:visited
  232. {
  233.     height:25px;
  234.     color:#FFF;    
  235.     background:url("image/navigation/bg6_btn.jpg") repeat-x left top;
  236.     text-decoration:none;
  237.     padding:12px 18px 0px 18px;
  238. }
  239. .menu6 a:hover,.menu6 a:active
  240. {
  241.     background-position:left -37px;
  242. }
  243. .menu6 span
  244. {
  245.     display:block;
  246.     background:url("image/navigation/bg6_l_c_r.jpg") no-repeat left -74px;
  247.     width:2px;
  248.     height:37px;
  249.     float:left;
  250. }
  251. .menu7
  252. {
  253.     font-size:14px;
  254.     line-height:14px;
  255.     margin-bottom:30px;
  256. }
  257. .menu7 .left7
  258. {
  259.     width:4px;
  260.     height:44px;
  261.     background:url("image/navigation/bg7_l_c_r.jpg") no-repeat left top;
  262.     float:left;
  263. }
  264. .menu7 .center7
  265. {
  266.     width:542px;
  267.     height:44px;
  268.     background:url("image/navigation/bg7_l_c_r.jpg") repeat-x left -88px;
  269.     float:left;
  270. }
  271. .menu7 .right7
  272. {
  273.     width:4px;
  274.     height:44px;
  275.     background:url("image/navigation/bg7_l_c_r.jpg") no-repeat left -44px;
  276.     float:left;
  277. }
  278. .menu7 a:link,.menu7 a:visited
  279. {
  280.     height:34px;
  281.     width:82px;
  282.     color:#FFF;    
  283.     background:url("image/navigation/bg7_btn.jpg") repeat-x left -44px;
  284.     text-decoration:none;
  285.     padding:14px 0px 0px 0px;
  286.     text-align:center;
  287. }
  288. .menu7 a:hover,.menu7 a:active
  289. {
  290.     background-position:left top;
  291. }
  292. .menu8
  293. {
  294.     line-height:18px;
  295.     font-size:18px;
  296.     width:500px;
  297.     height:56px;
  298.     background:url("image/navigation/bg8_bg.jpg") no-repeat left top;
  299.     margin-bottom:30px;
  300. }
  301. .menu8 a:link,.menu8 a:visited
  302. {
  303.     height:46px;
  304.     width:114px;
  305.     color:#FFF;    
  306.     background:url("image/navigation/bg8_btn.jpg") no-repeat left top;
  307.     text-decoration:none;    
  308.     text-align:center;
  309.     margin-right:2px;
  310.     padding-top:10px;
  311. }
  312. .menu8 a:hover,.menu8 a:active
  313. {
  314.     background-position:left -56px;
  315. }
  316. .menu9
  317. {
  318.     width:550px;
  319.     height:32px;
  320.     background:url("image/navigation/bg9_bg.jpg") no-repeat left top;
  321.     font-size:14px;
  322.     line-height:14px;
  323.     font-weight:bold;
  324.     text-align:center;
  325.     margin-bottom:30px;
  326. }
  327. .menu9 a:link,.menu9 a:visited
  328. {
  329.     height:22px;
  330.     background:url("image/navigation/bg9_btn.jpg") repeat-x left -32px;
  331.     text-decoration:none;
  332.     color:#fff;
  333.     padding:10px 16px 0px 16px;
  334.     margin:auto auto auto auto;
  335. }
  336. .menu9 a:hover,.menu9 a:active
  337. {
  338.     background-position:left 1px;
  339. }
  340. .menu10
  341. {
  342.     font-size:14px;
  343.     line-height:14px;
  344.     background:url("image/navigation/bg10_l_c_r.jpg") no-repeat left -92px;
  345.     margin-bottom:30px;
  346. }
  347. .menu10 .left10
  348. {
  349.     width:5px;
  350.     height:46px;
  351.     background:url("image/navigation/bg10_l_c_r.jpg") no-repeat left top;
  352.     float:left;
  353. }
  354. .menu10 .center10
  355. {
  356.     width:484px;
  357.     height:46px;
  358.     background:url("image/navigation/bg10_btn.jpg") repeat-x left top;
  359.     float:left;
  360. }
  361. .menu10 .right10
  362. {
  363.     width:5px;
  364.     height:46px;
  365.     background:url("image/navigation/bg10_l_c_r.jpg") no-repeat left -46px;
  366.     float:left;
  367. }
  368. .menu10 a:link,.menu10 a:visited
  369. {
  370.     height:26px;
  371.     background:url("image/navigation/bg10_btn.jpg") repeat-x left top;
  372.     text-decoration:none;
  373.     color:#fff;
  374.     padding:20px 16px 0px 16px;
  375. }
  376. .menu10 a:hover,.menu10 a:active
  377. {
  378.     color:#fb7d02;
  379.     background-position:left -46px;
  380. }
  381. .top11
  382. {
  383.     font-size:10px;
  384. }
  385. .top11 a
  386. {
  387.     text-decoration:none;
  388.     background-color:#2a2a2a;
  389.     font-size:10px;
  390.     color:#959595;
  391.     display:block;
  392.     width:476px;
  393.     padding:4px 0px 4px 18px;    
  394. }
  395. .menu11
  396. {
  397.     font-size:14px;
  398.     line-height:14px;
  399.     width:550px;
  400. }
  401. .menu11 div
  402. {
  403.     background:url("image/navigation/bg11_bg.jpg") repeat-x left top;
  404.     width:466px;
  405.     margin:0px;
  406.     padding:0px 14px 0px 14px;
  407. }
  408. .menu11 a:link,.menu11 a:visited
  409. {
  410.     color:#3b3b3b;
  411.     width:70px;
  412.     height:32px;
  413.     text-align:center;
  414.     background:url("image/navigation/bg11_btn.jpg") no-repeat left -30px;    
  415.     text-decoration:none;
  416.     padding-top:18px;
  417. }
  418. .menu11 a:hover,.menu11 a:active
  419. {
  420.     color:#2f7cc8;
  421.     background-position:center center;
  422. }
  423. .box12
  424. {
  425.     background-color:#cccccd;
  426.     padding:27px;
  427.     text-align:center;
  428.     width:496px;
  429. }
  430. .menu12
  431. {
  432.     font-size:24px;
  433.     line-height:24px;    
  434. }
  435. .menu12 .left12
  436. {
  437.     width:10px;
  438.     height:62px;
  439.     background:url("image/navigation/bg12_left_right.jpg") no-repeat left top;
  440.     float:left;
  441. }
  442. .menu12 .center12
  443. {
  444.     width:478px;
  445.     height:62px;
  446.     background:url("image/navigation/bg12_btn.jpg") repeat-x left top;
  447.     float:left;
  448. }
  449. .menu12 .right12
  450. {
  451.     width:10px;
  452.     height:62px;
  453.     background:url("image/navigation/bg12_left_right.jpg") no-repeat left -62px;
  454.     float:left;
  455. }
  456. .menu12 a:link,.menu12 a:visited
  457. {
  458.     color:#6c6c6c;    
  459.     height:44px;
  460.     text-align:center;
  461.     background:url("image/navigation/bg12_btn.jpg") repeat-x left top;    
  462.     text-decoration:none;
  463.     padding:18px 18px 0px 18px;
  464. }
  465. .menu12 a:hover,.menu12 a:active
  466. {
  467.     color:#fff;
  468.     background-position:left -62px;
  469. }
  470. .box13
  471. {
  472.     border-top:solid 1px #fcfcfc;
  473.     background-color:#efefef;
  474. }
  475. .logo13
  476. {
  477.     width:472px;
  478.     height:120px;
  479.     text-align:left;
  480.     background:url("image/logo/logo13.jpg") no-repeat left bottom;
  481. }
  482. .menu13
  483. {
  484.     font-size:18px;
  485.     line-height:18px;
  486. }
  487. .menu13 a:link,.menu13 a:visited
  488. {
  489.     color:#fff;    
  490.     height:31px;
  491.     width:118px;
  492.     text-align:center;
  493.     background:url("image/navigation/bg13_btn.jpg") no-repeat left -45px;    
  494.     text-decoration:none;
  495.     padding-top:14px;
  496. }
  497. .menu13 a:hover,.menu13 a:active
  498. {
  499.     background-position:left top;
  500. }
  501. .menu13 div
  502. {
  503.     width:472px;
  504. }
  505. .top13
  506. {
  507.     width:472px;
  508.     height:97px;
  509.     background:url("image/navigation/bg13_bg.jpg") no-repeat left bottom;
  510. }
  511. .box14
  512. {
  513.     background-color:#0495c4;
  514.     border-top:solid 1px #daf4fc;
  515. }
  516. .top14
  517. {
  518.     height:71px;
  519.     background:url("image/navigation/bg14_x.jpg") repeat-x left top;
  520.     color:#0495c4;
  521.     text-align:right;
  522.     font-size:10px;    
  523. }
  525. .top14 span
  526. {
  527.     display:block;
  528.     float:right;
  529. }
  530. .top14 a
  531. {    
  532.     float:right;
  533.     color:#0495c4;
  534.     text-decoration:none;
  535.     padding:0px 6px 0px 6px;
  536. }
  537. .top14 a:hover
  538. {
  539.     color:#fff;
  540. }
  541. .menu14
  542. {
  543.     background:url("image/navigation/bg14_btn.jpg") repeat-x left top;
  544. }
  545. .menu14 label
  546. {
  547.     display:block;
  548.     background:url("image/logo/logo14.jpg") no-repeat left top;
  549.     height:59px;
  550.     width:121px;
  551.     float:left;
  552. }
  553. .menu14 span
  554. {
  555.     display:block;
  556.     float:left;
  557.     width:1px;
  558.     height:59px;
  559.     background:url("image/navigation/bg14_btn.jpg") no-repeat left -118px;
  560. }
  561. .menu14 a:link,.menu14 a:visited
  562. {
  563.     height:37px;
  564.     background:url("image/navigation/bg14_btn.jpg") repeat-x left top;
  565.     color:#fff;
  566.     text-decoration:none;
  567.     padding:22px 16px 0px 16px;
  568. }
  569. .menu14 a:hover,.menu14 a:active
  570. {
  571.     background-position:left -59px;
  572. }
  573. .box15
  574. {
  575.     background:#000;
  576. }
  577. .left15
  578. {
  579.     width:153px;
  580.     height:79px;
  581.     float:left;
  582.     background:url("image/logo/logo15.jpg") no-repeat left bottom;
  583. }
  584. .menu15
  585. {
  586.     float:left;
  587.     height:31px;
  588.     padding-top:48px;
  589.     width:397px;
  590. }
  591. .menu15 a:link,.menu15 a:visited
  592. {
  593.     color:#fff;
  594.     background:url("image/navigation/bg15_btn.jpg") no-repeat left top;
  595.     width:96px;
  596.     height:25px;
  597.     text-align:center;
  598.     margin-right:2px;
  599.     padding-top:6px;
  600.     text-decoration:none;
  601. }
  602. .menu15 a:hover,.menu15 a:active
  603. {
  604.     background-position:left -31px;
  605. }
  606. .menu16
  607. {
  608.     background-color:#000;
  609.     padding:28px;
  610.     width:494px;
  611. }
  612. .menu16 a:link,.menu16 a:visited
  613. {
  614.     background:url("image/navigation/bg16_btn.jpg") no-repeat left top;
  615.     width:87px;
  616.     height:25px;
  617.     color:#fff;
  618.     text-decoration:none;
  619.     text-align:center;
  620.     padding-top:8px;
  621.     margin-right:4px;
  622. }
  623. .menu16 a:hover,.menu16 a:active
  624. {
  625.     background-position:left -33px;
  626. }
  627. .top17
  628. {
  629.     height:155px;
  630.     background:url("image/logo/logo17.jpg") no-repeat left bottom;
  631.     background-color:#000;
  632.     text-align:right;
  633.     color:#747474;
  634.     font-size:10px;
  635.     text-align:right;    
  636. }
  637. .top17 a
  638. {
  639.     color:#747474;
  640.     text-decoration:none;
  641.     float:right;
  642.     padding:0px 8px 0px 8px;
  643. }
  644. .top17 span
  645. {
  646.     float:right;
  647.     display:block;
  648. }
  649. .menu17
  650. {
  651.     width:550px;
  652.     background:url("image/navigation/bg17_btn.jpg") repeat-x left -52px;
  653.     background-color:#000;        
  654. }
  655. .menu17 a:link,.menu17 a:visited
  656. {
  657.     height:36px;
  658.     width:100px;
  659.     background:url("image/navigation/bg17_btn.jpg") no-repeat left -52px;
  660.     text-align:center;
  661.     text-decoration:none;
  662.     color:#fff;
  663.     padding-top:16px;
  664. }
  665. .menu17 a:hover,.menu17 a:active
  666. {
  667.     background-position:left top;
  668.     width:121px;
  669. }
  670. .box18
  671. {
  672.     background-color:#000;
  673.     padding:34px 0px 34px 0px;
  674.     text-align:center;
  676. }
  677. .top18
  678. {
  679.     width:456px;
  680.     height:218px;
  681.     background:url("image/navigation/bg18_bg.jpg") no-repeat left top;
  682. }
  683. .menu18
  684. {
  685.     width:456px;
  686.     height:41px;
  687.     background:url("image/navigation/bg18_mbg.jpg") no-repeat left top;
  688. }
  689. .menu18 a.a1
  690. {
  691.     width:97px;
  692.     background:url("image/navigation/bg18_btn1.jpg") no-repeat left top;
  693. }
  694. .menu18 a.a2
  695. {
  697.     width:93px;
  698.     background:url("image/navigation/bg18_btn2.jpg") no-repeat left top;
  699. }
  700. .menu18 a.a3
  701. {
  702.     width:97px;
  703.     background:url("image/navigation/bg18_btn3.jpg") no-repeat left top;
  704. }
  705. .menu18 a.a4
  706. {
  707.     width:93px;
  708.     background:url("image/navigation/bg18_btn4.jpg") no-repeat left top;
  709. }
  710. .menu18 a
  711. {
  712.     color:#fff;
  713.     text-align:center;
  714.     text-decoration:none;
  715.     height:30px;
  716.     padding-top:11px;
  717. }
  718. .menu18 a:hover
  719. {
  720.     background-position:left -41px;
  721. }
  722. .top19
  723. {    
  724.     border-top:solid 1px #2a2a2a;
  725.     height:179px;
  726.     text-align:right;
  727.     background:url("image/logo/logo19.jpg") no-repeat left bottom;
  728.     background-color:#1d1d1d;
  729.     font-size:10px;
  730.     color:#aeaeae;    
  731. }
  732. .top19 span
  733. {
  734.     display:block;
  735.     float:right;
  736. }
  737. .top19 a
  738. {
  739.     float:right;
  740.     text-decoration:none;
  741.     color:#aeaeae;
  742.     padding:0px 8px 0px 8px;
  743. }
  744. .menu19
  745. {
  746.     background:url("image/navigation/bg19_bg.jpg") repeat-x left center;
  747.     background-color:#1d1d1d;
  748. }
  749. .menu19 a:link,.menu19 a:visited
  750. {
  751.     color:#fff;
  752.     background:url("image/navigation/bg19_btn.jpg") repeat-x left -108px;
  753.     height:35px;
  754.     text-align:center;
  755.     text-decoration:none;
  756.     padding:18px 24px 1px 24px;
  757. }
  758. .menu19 a:hover,.menu19 a:active
  759. {
  760.     background-position:left top;
  761.     border:solid 1px #c7ff2f;
  762.     padding:17px 23px 0px 23px;
  763. }
  764. .bottom19
  765. {
  766.     background-color:#1d1d1d;
  767.     height:20px;
  768. }
  769. .menu20
  770. {    
  771.     background:url("image/navigation/bg20_mbg.jpg") no-repeat left top;
  772.     width:525px;
  773.     padding-left:25px;    
  774. }
  775. .menu20 a:link,.menu20 a:visited
  776. {
  777.     width:117px;
  778.     height:44px;
  779.     margin-right:4px;
  780.     color:#fff;
  781.     text-decoration:none;
  782.     text-align:center;
  783.     padding-top:10px;
  784. }
  785. .menu20 a.a1
  786. {
  787.     background:url("image/navigation/bg20_btn1.jpg") no-repeat left top;
  788. }
  789. .menu20 a.a2
  790. {
  791.     background:url("image/navigation/bg20_btn2.jpg") no-repeat left top;
  792. }
  793. .menu20 a.a3
  794. {
  795.     background:url("image/navigation/bg20_btn3.jpg") no-repeat left top;
  796. }
  797. .menu20 a.a4
  798. {
  799.     background:url("image/navigation/bg20_btn4.jpg") no-repeat left top;
  800. }
  801. .menu20 a:hover,.menu20 a:active
  802. {
  803.     background-position:left -54px;
  804. }

源网站:http://js.alixixi.com/a/2010061859963.shtml

发表评论

表情：
评论列表 （有 0 条评论，340人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Bootstrap导航条

    一、默认的导航条 在制作一个基础导航条时，主要分以下几步： 1、在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”；

    川长思鸟来川长思鸟来/ 0 赞/ 350 阅读