js、jquery菜单导航条

最新推荐文章于 2022-07-29 10:06:25 发布
最新推荐文章于 2022-07-29 10:06:25 发布
阅读量2.4k 收藏 2
点赞数 1
分类专栏： html div+css 页面样式 javascript、jquery web前端 文章标签： css CSS Css html Html HTML jquery jQuery JQUERY Jquery JQuery jquery菜单 web Web WEB
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/chinaplan/article/details/8295160
版权

漂亮的导航条

<!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">
<head>
    <title>20个web2.0导航样式，阿里西西整理收集，alixixi.com</title>
    <meta name="description" content="Wenqi space,Wenqi Blog" />
    <link href="navigation.css" rel="stylesheet" type="text/css" />
</head>
<body>
您的位置：<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 />
  <!------- 导航1 ------->
  <div>
    <img src="image/logo/logo1.jpg" alt="wenqi's blog" />
  </div>
  <div class="menu1">
    <a href="#">Blog</a>
    <a href="#">Themes</a>
    <a href="#">Service</a>
    <a href="#">About</a>
    <a href="#">Help</a>
    <del></del>
  </div>
  <div>
    <img src="image/logo/logo2.jpg" alt="wenqi's blog" />
  </div>
  <!------- 导航2 ------->
  <div class="menu2">
    <div class="left2"></div>
    <div class="center2">
      <a href="#">Blog</a>
      <a href="#">Themes</a>
      <a href="#">Service</a>
      <a href="#">About</a>
      <a href="#">Help</a>
      <del></del>
    </div>
    <div class="right2"></div>
    <div class="clear"></div>
  </div>
  <!------- 导航3 ------->
  <div>
    <img src="image/logo/logo3.jpg" alt="wenqi's blog" />
  </div>
  <div class="menu3">
    <div class="left3"></div>
    <div class="center3">
      <a href="#">Blog</a>
      <a href="#">Books</a>
      <a href="#">Portfolio</a>
      <a href="#">Photos</a>
      <a href="#">Service</a>
    </div>
    <div class="right3"></div>
    <div class="clear"></div>
  </div>
  <!------- 导航4 ------->
  <div><img src="image/logo/logo4.jpg" alt="WQ's space" /></div>
  <div class="menu4">
    <a href="#">Blog</a>
    <a href="#">Themes</a>
    <a href="#">Service</a>
    <a href="#">About</a>
    <a href="#">Help</a>
    <del></del>
  </div>
  <!------- 导航4 ------->
  <div><img src="image/logo/logo5.jpg" alt="wenqi's space" /></div>
  <div class="menu5">
    <a href="#">Blog</a>
    <a href="#">Themes</a>
    <a href="#">Service</a>
    <a href="#">About</a>
    <del></del>
  </div>
  <!------- 导航6 ------->
  <div>
    <img src="image/logo/logo6.jpg" alt="wenqi's blog" />
  </div>
  <div class="menu6">
    <div class="left6"></div>
    <div class="center6">
      <a href="#">Blog</a><span></span>
      <a href="#">Themes</a><span></span>
      <a href="#">Service</a><span></span>
      <a href="#">About</a><span></span>
      <a href="#">Help</a>
    </div>
    <div class="right6"></div>
    <div class="clear"></div>
  </div>
  <!------- 导航7 ------->
  <div>
    <img src="image/logo/logo7.jpg" alt="wenqi's blog" />
  </div>
  <div class="menu7">
    <div class="left7"></div>
    <div class="center7">
      <a href="#">Blog</a>
      <a href="#">Themes</a>
      <a href="#">Service</a>
      <a href="#">About</a>
      <a href="#">Help</a>
    </div>
    <div class="right7"></div>
    <div class="clear"></div>
  </div>
  <!------- 导航8 ------->
  <div><img src="image/logo/logo8.jpg" alt="wenqi blog" /></div>
  <div class="menu8">
    <a href="#">Blog</a>
    <a href="#">Themes</a>
    <a href="#">Service</a>
    <a href="#">About</a>
    <del></del>
  </div>
  <!------- 导航9 ------->
  <div><img src="image/logo/logo9.jpg" alt="wenqi blog" /></div>
  <div class="menu9">
    <a href="#">Blog</a>
    <a href="#">Themes</a>
    <a href="#">Uploads</a>
    <a href="#">Service</a>
    <a href="#">About</a>
    <del></del>
  </div>
  <!------- 导航10 ------->
  <div><img src="image/logo/logo10.jpg" alt="wenqi's blog" /></div>
  <div class="menu10">
    <div class="left10"></div>
    <div class="center10">
      <a href="#">Blog</a>
      <a href="#">Themes</a>
      <a href="#">Service</a>
      <a href="#">About</a>
      <a href="#">Help</a>
    </div>
    <div class="right10"></div>
    <div class="clear"></div>
  </div>
  <!------- 导航11 ------->
  <div class="top11"><a href="#">zhouwenqi.com</a><del></del></div>
  <div class="menu11">
    <div>
      <a href="#">Blog</a>
      <a href="#">Themes</a>
      <a href="#">Uploads</a>
      <a href="#">Service</a>
      <a href="#">About</a>
      <del></del>
    </div>
  </div>
  <div style="margin-bottom:30px;"><img src="image/logo/logo11.jpg" alt="wenqi blog" /></div>
   <!------- 导航12 ------->
  <div class="box12">
  <div class="menu12">
    <div class="left12"></div>
    <div class="center12">
      <a href="#">Blog</a>
      <a href="#">Themes</a>
      <a href="#">Service</a>
      <a href="#">About</a>
      <del></del>
    </div>
    <div class="right12"></div>
    <div class="clear"></div>
  </div>
  <div><img src="image/logo/logo12.jpg" alt="wenqi blog" /></div>
  </div>
  <!------- 导航13 ------->
  <div class="box13">
    <div class="logo13"></div>
    <div class="menu13">
      <div>
        <a href="#">Blog</a>
        <a href="#">Themes</a>
        <a href="#">Service</a>
        <a href="#">About</a>
        <del></del>
      </div>
    </div>
    <div class="top13"></div>
  </div>
  <!------- 导航14 ------->
  <div class="box14">
    <div class="top14">
     <a href="#">Contact</a><span>|</span><a href="#">Downloads</a><span>|</span><a href="#">Register</a><span>|</span><a href="#">Login</a><del></del>
    </div>
    <div class="menu14">
        <label></label><span></span>
        <a href="#">Blog</a><span></span>
        <a href="#">Gallery</a><span></span>
        <a href="#">Themes</a><span></span>
        <a href="#">Service</a><span></span>
        <a href="#">About</a>
        <del></del>
    </div>
    <div><img src="image/navigation/bg14_bg.jpg" alt="wenqi's blog" /></div>
  </div>
  <!------- 导航15 ------->
  <div class="box15">
    <div class="left15"></div>
    <div class="menu15">
      <a href="#">Blog</a><span></span>
        <a href="#">Gallery</a><span></span>
        <a href="#">Service</a><span></span>
        <a href="#">About</a>
        <del></del>
    </div>
    <div class="clear"></div>
    <div><img src="image/navigation/bg15_bg.jpg" alt="wenqi's blog" /></div>
  </div>
  <!------- 导航16 ------->
  <div class="menu16">
    <a href="#">Blog</a>
    <a href="#">Themes</a>
    <a href="#">Uploads</a>
    <a href="#">Service</a>
    <a href="#">About</a>
    <del></del>
  </div>
  <div><img src="image/navigation/bg16_bg.jpg" alt="wenqi blog" /></div> 
  <!------- 导航17 -------> 
  <div class="top17">
    <a href="#">Contact</a><span>|</span><a href="#">Register</a><span>|</span><a href="#">Login</a><del></del>
  </div>
  <div class="menu17">
    <a href="#">Blog</a>
    <a href="#">Gallery</a>
    <a href="#">Service</a>
    <a href="#">Works</a>
    <a href="#">About</a>
    <del></del>
  </div>
  <!------- 导航18 -------> 
  <div class="box18">
    <div class="top18"></div>
    <div class="menu18">
      <a href="#" class="a1">Blog</a>
      <a href="#" class="a2">Gallery</a>
      <a href="#" class="a3">Service</a>
      <a href="#" class="a4">About</a>
      <del></del>
    </div>
  </div>
  <!------- 导航19 -------> 
  <div class="top19">
    <a href="#">Contact</a><span>|</span><a href="#">Register</a><span>|</span><a href="#">Login</a>
  </div>
  <div class="menu19">
    <a href="#">Blog</a>
    <a href="#">Gallery</a>
    <a href="#">Service</a>
    <a href="#">Works</a>
    <a href="#">About</a>
    <del></del>
  </div>
  <div class="bottom19"></div>
   <!------- 导航20 ------->
   <div><img src="image/logo/logo20.jpg" alt="wenqi's blog" /></div>
   <div class="menu20">
     <a href="#" class="a1">Blog</a>
     <a href="#" class="a2">Gallery</a>
     <a href="#" class="a3">Service</a>
     <a href="#" class="a4">Works</a>
    <del></del>
  </div>
  <div><img src="image/navigation/bg20_bg.jpg" alt="wenqi's blog" /></div>
</body>
</html>


css:

 

html
{
	width:100%;
	height:100%;
}
body 
{
	background-color:#fff;
	font-size:18px;
	font-family:"Arial","Tahoma","微软雅黑","雅黑";
	line-height:18px;
	padding:0px;
	margin:0px;
	text-align:center;
}
a
{
	display:block;
	float:left;
}
del,div.clear
{
	height:0px;
	font-size:0px;
	line-height:0px;
	padding:0px;
	margin:0px;
	display:block;
	clear:both;
	overflow:hidden;
}
div
{
	width:550px;
	text-align:left;
	margin:auto auto auto auto;
}
.menu1
{
	font-size:14px;	
	line-height:14px;
	background:url("image/navigation/bg1.jpg") repeat-x left bottom;
	background-color:#f7f7f7;
	margin-bottom:24px;
}
.menu1 a:link,.menu1 a:visited
{
	color:#7d7d7d;
	background-color:#f7f7f7;
	border-bottom:solid 2px #e6e6e6;	
	text-decoration:none;
	padding:10px 16px 10px 16px;
}
.menu1 a:hover,.menu1 a:active
{
	background-color:#646464;
	border-bottom:solid 2px #2e2e2e;
	color:#fff;
}
.menu2,.menu3
{
	font-size:14px;
	line-height:14px;
	margin-bottom:24px;
}
.menu2 .left2
{
	width:5px;
	height:47px;
	background:url("image/navigation/bg2_left.jpg") no-repeat left top;
	float:left;	
}
.menu2 .center2
{
	width:540px;
	height:47px;
	background:url("image/navigation/bg2_center.jpg") repeat-x left top;
	float:left;
}
.menu2 .right2
{
	width:5px;
	height:47px;
	background:url("image/navigation/bg2_right.jpg") no-repeat left top;
	float:left;
}
.menu2 a:link,.menu2 a:visited

{
	color:#585858;
	width:77px;
	height:30px;
	padding-top:17px;
	background:url("image/navigation/bg2_btn.jpg") no-repeat left -94px;
	text-align:center;
	text-decoration:none;	
}
.menu2 a:hover
{	
	color:#fff;
	background-position:left 0px;	
}
.menu2 a:active
{
	color:#fff;
	background-position:left -47px;
}
.menu3 .left3
{
	width:7px;
	height:43px;
	background:url("image/navigation/bg3_left_right.jpg") no-repeat left top;
	float:left;
}
.menu3 .center3
{
    width:536px;
    height:43px;
    background:url("image/navigation/bg3_btn.jpg") repeat-x left top;
    float:left;
}
.menu3 .right3
{
	width:7px;
	height:43px;
	background:url("image/navigation/bg3_left_right.jpg") no-repeat left -43px;
	float:left;
}
.menu3 a:link,.menu3 a:visited
{
	color:#fff;	
	height:30px;
	background:url("image/navigation/bg3_btn.jpg") repeat-x left top;
	text-align:center;
	text-decoration:none;
	padding:13px 18px 0px 18px;
}
.menu3 a:hover,.menu3 a:active
{
	color:#666;
	background-position:left -43px;
}
.menu4
{
	height:59px;
	font-size:18px;
	line-height:18px;
	margin-bottom:20px;
}
.menu4 a:link,.menu4 a:visited
{
	color:#fff;
	height:31px;
	text-decoration:none;
	background:url("image/navigation/bg4_btn.jpg") no-repeat left -102px;	
	background-color:#f753c7;
	padding:12px 14px 0px 14px;	
	margin-top:8px;
	text-align:center;
}
.menu4 a:hover
{
	color:#af2a88;
	background:url("image/navigation/bg4_btn.jpg") no-repeat left -51px;
	width:102px;
	height:51px;
	padding:20px 10px 0px 0px;
}
.menu4 a:active
{
	background-position:left top;
	width:112px;
	height:38px;
	padding:13px 0px 0px 0px;
	margin:0px;
}
.menu5
{
	font-size:18px;
	line-height:18px;
	padding-left:10px;
	width:540px;
	margin-bottom:30px;
}
.menu5 a:link,.menu5 a:visited
{
	width:99px;
	height:26px;
	color:#fff;
	margin-right:1px;
	padding-top:6px;
	text-align:center;
	background:url("image/navigation/bg5_btn.jpg") no-repeat left top;
	text-decoration:none;
}
.menu5 a:hover
{
	background-position:left -32px;
}
.menu5 a:active
{
	background-position:left -64px;
}
.menu6
{
	font-size:14px;
	line-height:14px;
	margin-bottom:30px;
}
.menu6 .left6
{
	width:2px;
	height:37px;
	background:url("image/navigation/bg6_l_c_r.jpg") no-repeat left top;
	float:left;
}
.menu6 .center6
{
	width:546px;
	height:37px;
	background:url("image/navigation/bg6_btn.jpg") repeat-x left top;	
	float:left;
}
.menu6 .right6
{
	width:2px;
	height:37px;
	background:url("image/navigation/bg6_l_c_r.jpg") no-repeat left -37px;
	float:left;
}
.menu6 a:link,.menu6 a:visited
{
	height:25px;
	color:#FFF;	
	background:url("image/navigation/bg6_btn.jpg") repeat-x left top;
	text-decoration:none;
	padding:12px 18px 0px 18px;
}
.menu6 a:hover,.menu6 a:active
{
	background-position:left -37px;
}
.menu6 span
{
	display:block;
	background:url("image/navigation/bg6_l_c_r.jpg") no-repeat left -74px;
	width:2px;
	height:37px;
	float:left;
}
.menu7
{
	font-size:14px;
	line-height:14px;
	margin-bottom:30px;
}
.menu7 .left7
{
	width:4px;
	height:44px;
	background:url("image/navigation/bg7_l_c_r.jpg") no-repeat left top;
	float:left;
}
.menu7 .center7
{
	width:542px;
	height:44px;
	background:url("image/navigation/bg7_l_c_r.jpg") repeat-x left -88px;
	float:left;
}
.menu7 .right7
{
	width:4px;
	height:44px;
	background:url("image/navigation/bg7_l_c_r.jpg") no-repeat left -44px;
	float:left;
}
.menu7 a:link,.menu7 a:visited
{
	height:34px;
	width:82px;
	color:#FFF;	
	background:url("image/navigation/bg7_btn.jpg") repeat-x left -44px;
	text-decoration:none;
	padding:14px 0px 0px 0px;
	text-align:center;
}
.menu7 a:hover,.menu7 a:active
{
	background-position:left top;
}
.menu8
{
	line-height:18px;
	font-size:18px;
	width:500px;
	height:56px;
	background:url("image/navigation/bg8_bg.jpg") no-repeat left top;
	margin-bottom:30px;
}
.menu8 a:link,.menu8 a:visited
{
	height:46px;
	width:114px;
	color:#FFF;	
	background:url("image/navigation/bg8_btn.jpg") no-repeat left top;
	text-decoration:none;	
	text-align:center;
	margin-right:2px;
	padding-top:10px;
}
.menu8 a:hover,.menu8 a:active
{
	background-position:left -56px;
}
.menu9
{
	width:550px;
	height:32px;
	background:url("image/navigation/bg9_bg.jpg") no-repeat left top;
	font-size:14px;
	line-height:14px;
	font-weight:bold;
	text-align:center;
	margin-bottom:30px;
}
.menu9 a:link,.menu9 a:visited
{
	height:22px;
	background:url("image/navigation/bg9_btn.jpg") repeat-x left -32px;
	text-decoration:none;
	color:#fff;
	padding:10px 16px 0px 16px;
	margin:auto auto auto auto;
}
.menu9 a:hover,.menu9 a:active
{
	background-position:left 1px;
}
.menu10
{
	font-size:14px;
	line-height:14px;
	background:url("image/navigation/bg10_l_c_r.jpg") no-repeat left -92px;
	margin-bottom:30px;
}
.menu10 .left10
{
	width:5px;
	height:46px;
	background:url("image/navigation/bg10_l_c_r.jpg") no-repeat left top;
	float:left;
}
.menu10 .center10
{
	width:484px;
	height:46px;
	background:url("image/navigation/bg10_btn.jpg") repeat-x left top;
	float:left;
}
.menu10 .right10
{
	width:5px;
	height:46px;
	background:url("image/navigation/bg10_l_c_r.jpg") no-repeat left -46px;
	float:left;
}
.menu10 a:link,.menu10 a:visited
{
	height:26px;
	background:url("image/navigation/bg10_btn.jpg") repeat-x left top;
	text-decoration:none;
	color:#fff;
	padding:20px 16px 0px 16px;
}
.menu10 a:hover,.menu10 a:active
{
	color:#fb7d02;
	background-position:left -46px;
}
.top11
{
	font-size:10px;
}
.top11 a
{
	text-decoration:none;
	background-color:#2a2a2a;
	font-size:10px;
	color:#959595;
	display:block;
	width:476px;
	padding:4px 0px 4px 18px;	
}
.menu11
{
	font-size:14px;
	line-height:14px;
	width:550px;
}
.menu11 div
{
	background:url("image/navigation/bg11_bg.jpg") repeat-x left top;
	width:466px;
	margin:0px;
	padding:0px 14px 0px 14px;
}
.menu11 a:link,.menu11 a:visited
{
	color:#3b3b3b;
	width:70px;
	height:32px;
	text-align:center;
	background:url("image/navigation/bg11_btn.jpg") no-repeat left -30px;	
	text-decoration:none;
	padding-top:18px;
}
.menu11 a:hover,.menu11 a:active
{
	color:#2f7cc8;
	background-position:center center;
}
.box12
{
	background-color:#cccccd;
	padding:27px;
	text-align:center;
	width:496px;
}
.menu12
{
	font-size:24px;
	line-height:24px;	
}
.menu12 .left12
{
	width:10px;
	height:62px;
	background:url("image/navigation/bg12_left_right.jpg") no-repeat left top;
	float:left;
}
.menu12 .center12
{
	width:478px;
	height:62px;
	background:url("image/navigation/bg12_btn.jpg") repeat-x left top;
	float:left;
}
.menu12 .right12
{
	width:10px;
	height:62px;
	background:url("image/navigation/bg12_left_right.jpg") no-repeat left -62px;
	float:left;
}
.menu12 a:link,.menu12 a:visited
{
	color:#6c6c6c;	
	height:44px;
	text-align:center;
	background:url("image/navigation/bg12_btn.jpg") repeat-x left top;	
	text-decoration:none;
	padding:18px 18px 0px 18px;
}
.menu12 a:hover,.menu12 a:active
{
	color:#fff;
	background-position:left -62px;
}
.box13
{
	border-top:solid 1px #fcfcfc;
	background-color:#efefef;
}
.logo13
{
	width:472px;
	height:120px;
	text-align:left;
	background:url("image/logo/logo13.jpg") no-repeat left bottom;
}
.menu13
{
	font-size:18px;
	line-height:18px;
}
.menu13 a:link,.menu13 a:visited
{
	color:#fff;	
	height:31px;
	width:118px;
	text-align:center;
	background:url("image/navigation/bg13_btn.jpg") no-repeat left -45px;	
	text-decoration:none;
	padding-top:14px;
}
.menu13 a:hover,.menu13 a:active
{
	background-position:left top;
}
.menu13 div
{
	width:472px;
}
.top13
{
	width:472px;
	height:97px;
	background:url("image/navigation/bg13_bg.jpg") no-repeat left bottom;
}
.box14
{
	background-color:#0495c4;
	border-top:solid 1px #daf4fc;
}
.top14
{
	height:71px;
	background:url("image/navigation/bg14_x.jpg") repeat-x left top;
	color:#0495c4;
	text-align:right;
	font-size:10px;	
}

.top14 span
{
	display:block;
	float:right;
}
.top14 a
{	
	float:right;
	color:#0495c4;
	text-decoration:none;
	padding:0px 6px 0px 6px;
}
.top14 a:hover
{
	color:#fff;
}
.menu14
{
	background:url("image/navigation/bg14_btn.jpg") repeat-x left top;
}
.menu14 label
{
	display:block;
	background:url("image/logo/logo14.jpg") no-repeat left top;
	height:59px;
	width:121px;
	float:left;
}
.menu14 span
{
	display:block;
	float:left;
	width:1px;
	height:59px;
	background:url("image/navigation/bg14_btn.jpg") no-repeat left -118px;
}
.menu14 a:link,.menu14 a:visited
{
	height:37px;
	background:url("image/navigation/bg14_btn.jpg") repeat-x left top;
	color:#fff;
	text-decoration:none;
	padding:22px 16px 0px 16px;
}
.menu14 a:hover,.menu14 a:active
{
	background-position:left -59px;
}
.box15
{
	background:#000;
}
.left15
{
	width:153px;
	height:79px;
	float:left;
	background:url("image/logo/logo15.jpg") no-repeat left bottom;
}
.menu15
{
	float:left;
	height:31px;
	padding-top:48px;
	width:397px;
}
.menu15 a:link,.menu15 a:visited
{
	color:#fff;
	background:url("image/navigation/bg15_btn.jpg") no-repeat left top;
	width:96px;
	height:25px;
	text-align:center;
	margin-right:2px;
	padding-top:6px;
	text-decoration:none;
}
.menu15 a:hover,.menu15 a:active
{
	background-position:left -31px;
}
.menu16
{
	background-color:#000;
	padding:28px;
	width:494px;
}
.menu16 a:link,.menu16 a:visited
{
	background:url("image/navigation/bg16_btn.jpg") no-repeat left top;
	width:87px;
	height:25px;
	color:#fff;
	text-decoration:none;
	text-align:center;
	padding-top:8px;
	margin-right:4px;
}
.menu16 a:hover,.menu16 a:active
{
	background-position:left -33px;
}
.top17
{
	height:155px;
	background:url("image/logo/logo17.jpg") no-repeat left bottom;
	background-color:#000;
	text-align:right;
	color:#747474;
	font-size:10px;
	text-align:right;	
}
.top17 a
{
	color:#747474;
	text-decoration:none;
	float:right;
	padding:0px 8px 0px 8px;
}
.top17 span
{
	float:right;
	display:block;
}
.menu17
{
	width:550px;
	background:url("image/navigation/bg17_btn.jpg") repeat-x left -52px;
	background-color:#000;		
}
.menu17 a:link,.menu17 a:visited
{
	height:36px;
	width:100px;
	background:url("image/navigation/bg17_btn.jpg") no-repeat left -52px;
	text-align:center;
	text-decoration:none;
	color:#fff;
	padding-top:16px;
}
.menu17 a:hover,.menu17 a:active
{
	background-position:left top;
	width:121px;
}
.box18
{
	background-color:#000;
	padding:34px 0px 34px 0px;
	text-align:center;
	
}
.top18
{
	width:456px;
	height:218px;
	background:url("image/navigation/bg18_bg.jpg") no-repeat left top;
}
.menu18
{
	width:456px;
	height:41px;
	background:url("image/navigation/bg18_mbg.jpg") no-repeat left top;
}
.menu18 a.a1
{
	width:97px;
	background:url("image/navigation/bg18_btn1.jpg") no-repeat left top;
}
.menu18 a.a2
{
	
	width:93px;
	background:url("image/navigation/bg18_btn2.jpg") no-repeat left top;
}
.menu18 a.a3
{
	width:97px;
	background:url("image/navigation/bg18_btn3.jpg") no-repeat left top;
}
.menu18 a.a4
{
	width:93px;
	background:url("image/navigation/bg18_btn4.jpg") no-repeat left top;
}
.menu18 a
{
	color:#fff;
	text-align:center;
	text-decoration:none;
	height:30px;
	padding-top:11px;
}
.menu18 a:hover
{
	background-position:left -41px;
}
.top19
{	
	border-top:solid 1px #2a2a2a;
	height:179px;
	text-align:right;
	background:url("image/logo/logo19.jpg") no-repeat left bottom;
	background-color:#1d1d1d;
	font-size:10px;
	color:#aeaeae;	
}
.top19 span
{
	display:block;
	float:right;
}
.top19 a
{
	float:right;
	text-decoration:none;
	color:#aeaeae;
	padding:0px 8px 0px 8px;
}
.menu19
{
	background:url("image/navigation/bg19_bg.jpg") repeat-x left center;
	background-color:#1d1d1d;
}
.menu19 a:link,.menu19 a:visited
{
	color:#fff;
	background:url("image/navigation/bg19_btn.jpg") repeat-x left -108px;
	height:35px;
	text-align:center;
	text-decoration:none;
	padding:18px 24px 1px 24px;
}
.menu19 a:hover,.menu19 a:active
{
	background-position:left top;
	border:solid 1px #c7ff2f;
	padding:17px 23px 0px 23px;
}
.bottom19
{
	background-color:#1d1d1d;
	height:20px;
}
.menu20
{	
	background:url("image/navigation/bg20_mbg.jpg") no-repeat left top;
	width:525px;
	padding-left:25px;	
}
.menu20 a:link,.menu20 a:visited
{
	width:117px;
	height:44px;
	margin-right:4px;
	color:#fff;
	text-decoration:none;
	text-align:center;
	padding-top:10px;
}
.menu20 a.a1
{
	background:url("image/navigation/bg20_btn1.jpg") no-repeat left top;
}
.menu20 a.a2
{
	background:url("image/navigation/bg20_btn2.jpg") no-repeat left top;
}
.menu20 a.a3
{
	background:url("image/navigation/bg20_btn3.jpg") no-repeat left top;
}
.menu20 a.a4
{
	background:url("image/navigation/bg20_btn4.jpg") no-repeat left top;
}
.menu20 a:hover,.menu20 a:active
{
	background-position:left -54px;
}


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

下一秒_待续
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
JS实现导航栏项目自动切换标签样式
pinzhizun的博客
08-08 5226
导航栏：SUI 首页 产品 类别 用户 快递 JS代码如下：$(document).ready(function(){ var hr,wi $(".sui-nav >li").each(function(){ hr=$(this).find
jQuery导航下拉菜单
wfh_fighting的博客
11-04 510
html> html lang="en"> head> meta charset="UTF-8"> title>下拉菜单title> style> *{margin: 0 auto; padding: 0;} .nav{ width: 340px; height: 30px;
第六课 head.htm模板制作(Logo和导航条)
IT技术宅-北方的刀郎
03-21 5087
这一节课我们来讲一下怎么样制作网站模板中的head.htm模板。分析效果如下图1 图1 头部Head 那么，怎样才能做出上面的效果的呢？先急，我们一步一步来。 首先，我们要设置好整个网站的背景图和网站的居中。 设置背景图的代码如下： body{background:url(../images/bodybg.jpg) repeat-x} 好了，除了背景的设置之外，还要让网站居中显示，所以还要写的
jquery实现导航下拉菜单
joan_yb的博客
07-29 1962
jquery实现导航下拉菜单
jQuery菜单导航：一到多级导航
ZlikeN的博客
10-08 692
jq自行下载 html部分： <nav class="nav"> <ul> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a> <ul> <li><a href="#"
漂亮的jquery实用的下拉菜单导航条代码
06-06
本资源提供了“漂亮的jquery实用的下拉菜单导航条代码”，旨在帮助开发者实现美观且功能强大的下拉菜单导航条。下面将详细探讨jQuery下拉菜单的实现原理、相关知识点以及如何运用这些代码。 jQuery是一个轻量级的...
jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单
11-19
jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单
jQuery网站导航菜单滑条特效代码
03-20
而jQuery作为一款轻量级的JavaScript库，提供了丰富的功能来增强网页的交互性，特别是对于导航菜单的动态效果处理。本篇文章将深入探讨"jQuery网站导航菜单滑条特效代码"的相关知识点，帮助开发者创建更吸引用户的...
w3cfuns网站jquery导航条
04-07
"w3cfuns网站jquery导航条"就是一个专为网站设计的交互式导航组件，利用jQuery库来实现动态效果和下拉菜单功能。jQuery是JavaScript的一个强大库，它简化了JavaScript的DOM操作、事件处理和动画设计等任务，使得创建...
jQuery多级菜单导航及个性滚动条.zip
01-08
本项目名为"jQuery多级菜单导航及个性滚动条"，它聚焦于利用jQuery技术实现功能丰富的导航栏，并且结合了个性化的滚动条效果，使得整体用户体验更为出色。下面将详细解析其中涉及的技术点和实现方式。 首先，我们要...
Jquery字符UrlEncode 编码、解码 --C#UrlEncode
热门推荐
人生若南柯一梦
02-22 3万+
C#：Server.UrlEncode(ur) Jquery解码：decodeURIComponent(url); Jquery编码：encodeURIComponent(url);
用Bootstrap框架弹出iframe页面 在弹出的模态框中载人iframe页面
人生若南柯一梦
09-23 3万+
1、用Bootstrap框架弹出iframe页面 2、在弹出的模态框中载人iframe页面
(Chrome42)Lodop页面总提示“未安装”或“请升级”的可能原因和解决办法
人生若南柯一梦
06-03 1万+
(Chrome42)Lodop页面总提示“未安装”或“请升级”的可能原因和解决办法
Bootstrap可多选、搜索的下拉列表
人生若南柯一梦
11-04 1万+
示例图：可搜索 区分大小写搜索需要引用bootstrap文件，核心文件：bootstrap-multiselect.css、bootstrap-multiselect.jsbootstrap-multiselect.css.multiselect-container{position:absolute;list-style-type:none;margin:0;padding:0}.multise
鼠标划过div右上角显示删除叉,瀑布流效果
人生若南柯一梦
01-07 1万+
鼠标划过div右上角显示删除叉,瀑布流效果
jQuery Backstretch动态设置背景图片插件
人生若南柯一梦
10-31 8872
jQuery Backstretch动态设置背景图片插件
Web打印 Lodop打印控件 bootstrap框架
人生若南柯一梦
12-10 7989
1、Web打印 2、 Lodop打印控件 3、 bootstrap框架使用Lodop打印控件 4、 Lodop打印控件浏览器奔溃问题
jquery autocomplete ajax获取动态数据,兼容各浏览器,支持中文
人生若南柯一梦
10-10 7131
jquery.autocomplete.js经过修改，支持各种浏览器、支持中文输入！ 1、效果图如下 2、HTML和ajax代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="...
.net C# 实现点击下载PDF文件（通知浏览器打开下载对话框） 不是直接打开
人生若南柯一梦
05-28 6908
string FullFileName = ""; try { string FileName = "拓鹏云信接口文档 v2.0.pdf"; FullFileName = Server.MapPath(FileName); //FileName--要下载的
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

下一秒_待续

如有帮到您，给个赞赏(^.^)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值