jQuery带下划线滑动二级菜单代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery带下划线滑动二级菜单代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery带下划线滑动二级菜单代码</title>
<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="css/index.css"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

</head>
<body>

<div class="wapper">
	<div class="header-widht w1200 clearFloat pt15 pb10">
		<div class="nav mt5">
			<ul class="clearFloat">
				<li class="li"><a href="" class="nav_cell">首页</a></li>
				<li class="li">
					<a href="" class="nav_cell">关于我们</a>
					<div class="nav_lev2 nav_lev2_6 navtoplev1">
						<s class="absolute shadow"></s>
						<div class="floatLeft percent30 nav_menu">
							<ul class="p20">
								<li><a href="">关于我们</a></li>
								<li><a href="">关于我们</a></li>
								<li><a href="">关于我们</a></li>
								<li><a href="">关于我们</a></li>
							</ul>
						</div>
						<div class="floatLeft percent70">
							<div class="cont">
								<div class="picshow"><a href=""><img src="images/544f52beb8273.jpg" alt="" width="374" height="180"/></a></div>
								<div class="t"></div>
								<p>河北德龙环境管理集团（以下简称“德龙环境”）是河北德龙环境工程股份有限公司为了适应国内、国际环境产业...</p>
							</div>
						</div>
					</div>
				</li>
				<li class="li">
					<a href="#" class="nav_cell">新闻动态</a>
					<div class="nav_lev2 nav_lev2_6 navtoplev1">
						<s class="absolute shadow"></s>
						<div class="floatLeft percent30 nav_menu">
							<ul class="p20">
								<li><a href="">新闻动态</a></li>
								<li><a href="">新闻动态</a></li>
								<li><a href="">新闻动态</a></li>
								<li><a href="">新闻动态</a></li>
							</ul>
						</div>
						<div class="floatLeft percent70">
							<div class="cont">
								<div class="picshow"><a href=""><img src="images/544f52beb8273.jpg" alt="" width="374" height="180"/></a></div>
								<div class="t"></div>
								<p>河北德龙环境管理集团（以下简称“德龙环境”）是河北德龙环境工程股份有限公司为了适应国内、国际环境产业...</p>
							</div>
						</div>
					</div>
				</li>
				<li class="li">
					<a href="#" class="nav_cell">环保产品</a>
					<div class="nav_lev2 nav_lev2_6 navtoplev1">
						<s class="absolute shadow"></s>
						<div class="floatLeft percent30 nav_menu">
							<ul class="p20">
								<li><a href="">环保产品</a></li>
								<li><a href="">环保产品</a></li>
								<li><a href="">环保产品</a></li>
								<li><a href="">环保产品</a></li>
							</ul>
						</div>
						<div class="floatLeft percent70">
							<div class="cont">
								<div class="picshow"><a href=""><img src="images/544f52beb8273.jpg" alt="" width="374" height="180"/></a></div>
								<div class="t"></div>
								<p>河北德龙环境管理集团（以下简称“德龙环境”）是河北德龙环境工程股份有限公司为了适应国内、国际环境产业...</p>
							</div>
						</div>
					</div>
				</li>
				<li class="li">
					<a href="#" class="nav_cell">环境监测</a>
					<div class="nav_lev2 nav_lev2_6 navtoplev1">
						<s class="absolute shadow"></s>
						<div class="floatLeft percent30 nav_menu">
							<ul class="p20">
								<li><a href="">环境监测</a></li>
								<li><a href="">环境监测</a></li>
								<li><a href="">环境监测</a></li>
								<li><a href="">环境监测</a></li>
							</ul>
						</div>
						<div class="floatLeft percent70">
							<div class="cont">
								<div class="picshow"><a href=""><img src="images/544f52beb8273.jpg" alt="" width="374" height="180"/></a></div>
								<div class="t"></div>
								<p>河北德龙环境管理集团（以下简称“德龙环境”）是河北德龙环境工程股份有限公司为了适应国内、国际环境产业...</p>
							</div>
						</div>
					</div>
				</li>
				<li class="li">
					<a href="#" class="nav_cell">环境咨询</a>
					<div class="nav_lev2 nav_lev2_6 navtoplev1">
						<s class="absolute shadow"></s>
						<div class="floatLeft percent30 nav_menu">
							<ul class="p20">
								<li><a href="">环境咨询</a></li>
								<li><a href="">环境咨询</a></li>
								<li><a href="">环境咨询</a></li>
								<li><a href="">环境咨询</a></li>
							</ul>
						</div>
						<div class="floatLeft percent70">
							<div class="cont">
								<div class="picshow"><a href=""><img src="images/544f52beb8273.jpg" alt="" width="374" height="180"/></a></div>
								<div class="t"></div>
								<p>河北德龙环境管理集团（以下简称“德龙环境”）是河北德龙环境工程股份有限公司为了适应国内、国际环境产业...</p>
							</div>
						</div>
					</div>
				</li>
				<li class="li">
					<a href="#" class="nav_cell">案例展示</a>
					<div class="nav_lev2 nav_lev2_6 navtoplev1">
						<s class="absolute shadow"></s>
						<div class="floatLeft percent30 nav_menu">
							<ul class="p20">
								<li><a href="">案例展示</a></li>
								<li><a href="">案例展示</a></li>
								<li><a href="">案例展示</a></li>
								<li><a href="">案例展示</a></li>
							</ul>
						</div>
						<div class="floatLeft percent70">
							<div class="cont">
								<div class="picshow"><a href=""><img src="images/544f52beb8273.jpg" alt="" width="374" height="180"/></a></div>
								<div class="t"></div>
								<p>河北德龙环境管理集团（以下简称“德龙环境”）是河北德龙环境工程股份有限公司为了适应国内、国际环境产业...</p>
							</div>
						</div>
					</div>
				</li>
				<li class="li">
					<a href="#" class="nav_cell">加入我们</a>
					<div class="nav_lev2 nav_lev2_6 navtoplev1">
						<s class="absolute shadow"></s>
						<div class="floatLeft percent30 nav_menu">
							<ul class="p20">
								<li><a href="">加入我们</a></li>
								<li><a href="">加入我们</a></li>
								<li><a href="">加入我们</a></li>
								<li><a href="">加入我们</a></li>
							</ul>
						</div>
						<div class="floatLeft percent70">
							<div class="cont">
								<div class="picshow"><a href=""><img src="images/544f52beb8273.jpg" alt="" width="374" height="180"/></a></div>
								<div class="t"></div>
								<p>河北德龙环境管理集团（以下简称“德龙环境”）是河北德龙环境工程股份有限公司为了适应国内、国际环境产业...</p>
							</div>
						</div>
					</div>
				</li>
				<li class="li">
					<a href="" class="nav_cell">其他业务</a>
					<div class="nav_lev2 nav_lev2_6 navtoplev1">
						<s class="absolute shadow"></s>
						<div class="floatLeft percent30 nav_menu">
							<ul class="p20">
								<li><a href="">其他业务</a></li>
								<li><a href="">其他业务</a></li>
								<li><a href="">其他业务</a></li>
								<li><a href="">其他业务</a></li>
							</ul>
						</div>
						<div class="floatLeft percent70">
							<div class="cont">
								<div class="picshow"><a href=""><img src="images/544f52beb8273.jpg" alt="" width="374" height="180"/></a></div>
								<div class="t"></div>
								<p>河北德龙环境管理集团（以下简称“德龙环境”）是河北德龙环境工程股份有限公司为了适应国内、国际环境产业...</p>
							</div>
						</div>
					</div>
				</li>
			</ul>
			<div class="absolute nav_block">
				<div class="absolute nav_line"></div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="js/nav2.js"></script>
</body>
</html>

JS代码(nav2.js):

//导航var $nav=$('.nav').find('.li'),$navCur=$('.nav').find('.cur').length?$('.nav').find('.cur').index():0,$navLine=$('.nav_line');
	$navLine.css('left',$navCur*$nav.eq(0).width());
	$nav.mouseenter(function(){
	$(this).addClass('hover');
	$navLine.stop(1,0).animate({
	left:$(this).index()*$nav.eq(0).width()}
,200);
}
).mouseleave(function(){
	$(this).removeClass('hover');
	$navLine.stop(1,0).animate({
	left:($('.nav').find('.cur').length?$('.nav').find('.cur').index():0)*$nav.eq(0).width()}
,200);
}
);

CSS代码(index.css):

html{}
body{min-width:1200px;}
.wapper{min-width:1200px;}
*{margin:0;padding:0;}
.header-widht{height:50px;}
/*nav*/
.nav{width:735px;position:relative;z-index:10;}
.nav ul{margin-right:-8px;}
.nav .li{float:left;width:11%;z-index:10;height:55px;line-height:55px;}
.nav .li:hover{height:51px;line-height:51px;border-bottom:4px solid #b2cf6b;}
.nav_cell{display:block;text-align:center;}
.nav_lev2{background:#fff none repeat;box-shadow:0 2px 8px rgba(0,0,0,0.2);display:none;overflow:hidden;position:absolute;right:0;top:55px;width:600px;}
.nav_lev2_6{width:655px;}
.navtoplev1{right:-1px;}
.nav_lev2 .shadow{bottom:auto;top:0;}
.percent30{width:32%;}
.nav_menu{background:#ededed;margin-bottom:-9999px;padding-bottom:9999px;}
.nav_menu li{border-bottom:1px solid #ccc;height:30px;line-height:30px;overflow:hidden;font-size:13px;}
.percent70{width:68%;}
.nav_lev2 .cont{padding:30px 35px 35px;}
.nav_lev2 .cont p{font-size:12px;}
.picshow{width:45%;height:180px;}
.nav_lev2 .t{color:#333;font-size:14px;font-weight:bold;margin-top:0.5em;}
.nav_block{bottom:0;height:4px;left:0;overflow:hidden;width:100%;z-index:-1;}
.nav_line{background:url("../images/navline.png") repeat;bottom:0;height:4px;left:0;overflow:hidden;width:100%;}
.nav .hover .nav_lev2{display:block;}

CSS代码(reset.css):

@charset "utf-8";/* CSS Document */
&nbsp;/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
html{color:#7b7b7c;background:#262626;-webkit-text-size-adjust:100%;/*chrome字体问题*/
-ms-text-size-adjust:100%;font-size:100%;}
/*IE6对positon:fixed的单独处理修正IE6滚动抖动的bug*/
*html,*html body{background-image:url(about:blank);/*修正IE6滚动抖动的bug*/
background-attachment:fixed;/*根据自己实际，非必需*/
}
/* 内外边距通常让各个浏览器样式的表现位置不同 */
*{margin:0;padding:0;}
body{width:100%;}
.warrp{width:100%;margin:0 auto;}
/* 要注意表单元素并不继承父级 font 的问题 */
body,button,input,select,textarea{font-family:"微软雅黑","Microsoft YaHei";font-size:14px;line-height:24px;color:#7b7b7c;outline:none;}
input,select,textarea{font-size:100%;padding-left:10px;}
/* 去掉各Table cell 的边距并让其边重合 */
table{border-collapse:collapse;border-spacing:0;}
/* IE bug fixed:th 不继承 text-align*/
th{text-align:inherit;}
/* 对齐是排版最重要的因素,别让什么都居中 */
caption,th{text-align:left;}
/* 去除默认边框 */
fieldset,img{border:none;outline:none;-moz-outline:none;}
/* ie6 7 8(q) bug 显示为行内表现 */
iframe{display:block;}
/* 去掉列表前的标识,li 会继承 */
ol,ul,li{list-style:none;}
/* 一致的 del 样式 */
del{text-decoration:line-through;}
/* 来自yahoo,让标题都自定义,适应多个系统应用 */
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500;}
/* 统一上标和下标 */
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
/* 默认不显示下划线，保持页面简洁 */
ins,a{text-decoration:none;}
/* 让链接在 hover 状态下显示下划线 */
a{color:#7b7b7c;cursor:pointer;outline:none;outline:none;blr:expression(this.onFocus=this.blur());}
a:hover{text-decoration:none;color:#787878;}
ul li a{color:#787878;}
/* 清理浮动 */
.clearFloat:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearFloat{zoom:1;/* for IE6 IE7 */
}
.overflow{overflow:hidden;}
/*display*/
.display{display:block;}
/* 设置内联,减少浮动带来的bug */
.floatLeft{float:left;}
.floatRight{float:right;}
/* 重设 HTML5 标签,IE 需要在 js 中 createElement(TAG) */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
/* HTML5 媒体文件跟 img 保持一致 */
audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}
/*设置图片视频等自适应*/
/*img{*/
/*max-width:100%;*/
/*}
*/
/*.video embed,.video object,.video iframe{width:100%;height:auto;}
*/
/*设置图片视频等自适应 end*/
/* 去掉 firefox 下此元素的边框 */
abbr,acronym{border:0;font-variant:normal;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500;}
.none{display:none;}
/*框架css自带样式的重置*/
.ui-page-theme-a a,html .ui-bar-a a,html .ui-body-a a,html body .ui-group-theme-a a{color:#ccc;font-weight:400;text-shadow:none;}
/*重置所有的问题阴影属性*/
.ui-overlay-a,.ui-page-theme-a,.ui-page-theme-a .ui-panel-wrapper{text-shadow:none;}
/*设置ul的margin为0*/
.ui-content .ui-listview-inset,.ui-panel-inner > .ui-listview-inset{margin:0;}
.ui-shadow{box-shadow:0 0 0 rgba(0,0,0,0);}
/*解决盒模型问题css3属性也可用来统一FORM元素风格*/
.box-sizing{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
/*topline*/
.topline{border-top:4px solid #ff8f00;}
/*topline end*/
.row{margin-left:-15px;margin-right:-15px;}
.row2{margin-left:-20px;margin-right:-20px;}
.row3{margin-left:-15px;margin-right:-55px;}
/*border*/
.border-d6{border:1px solid #d6d6d6;}
.border-be{border:1px solid #bebebe;}
.border-d2{border:1px solid #d2d2d2;}
.border-dcdcdc{border:1px solid #dcdcdc;}
.border-e5{border:1px solid #e5e5e5;}
.border-d7d7d7{border:1px solid #d7d7d7;}
.border-c9c9c9{border:1px solid #c9c9c9;}
.border-t-t-cb{border-top:2px solid #cbc7c2;}
.border-t-t-cb{border-top:2px solid #cbc7c2;}
.border-t-d7{border-top:1px solid #d7d7d7;}
.border-t-dc{border-top:1px solid #dcdcdc;}
.border-t-db{border-top:1px solid #dbdbdb;}
.border-t-ddd{border-top:1px solid #dddddd;}
.border-b-ee{border-bottom:1px solid #eee;}
.border-b-dc{border-bottom:1px solid #dcdcdc;}
.border-b-fd{border-bottom:1px solid #fdfdfd;}
.border-b-be{border-bottom:1px solid #bebebe;}
.border-b-dd{border-bottom:1px solid #dddddd;}
.border-b-ec{border-bottom:1px solid #ececec;}
.border-b-ff{border-bottom:1px solid #fff;}
.border-b-c8{border-bottom:1px solid #c8c8c8;}
.border-b-e5{border-bottom:1px solid #e5e5e5;}
.border-d-b-b4{border-bottom:2px solid #b4b4b4;}
.border-d-b-00{border-bottom:2px solid #000;}
.border-d-b-c8{border-bottom:2px solid #c8c8c8;}
.border-d-b-c6{border-bottom:1px dashed #c6c6c6;}
.border-d-b-ec{border-bottom:1px dashed #ececec;}
.border-d-b-ee{border-bottom:1px dashed #eee;}
.border-d-b-d2d2d2{border-bottom:1px dashed #d2d2d2;}
.border-d-b-cb{border-bottom:1px solid #cbc7c2;}
.border-d-b-328fba{border-bottom:1px solid #328fba;}
.border-d-b-c9c9c9{border-bottom:1px solid #c9c9c9;}
.border-d-b3-328fba{border-bottom:3px solid #328fba;}
.border-l-r-c8{border-right:1px solid #c8c8c8;}
.border-d-l-c9c9c9{border-left:1px dashed #c9c9c9;}
.border-d-r-c9c9c9{border-right:1px dashed #c9c9c9;}
/*文字排版*/
.f12{font-size:12px}
.f13{font-size:13px}
.f14{font-size:14px}
.f15{font-size:15px}
.f16{font-size:16px}
.f18{font-size:18px}
.f19{font-size:19px}
.f20{font-size:20px}
.f22{font-size:22px}
.f23{font-size:23px}
.f24{font-size:24px}
.f25{font-size:25px}
.f26{font-size:26px}
.f28{font-size:28px}
.f29{font-size:29px}
.f30{font-size:30px}
.f34{font-size:34px}
.f35{font-size:35px}
.f58{font-size:58px}
.f70{font-size:70px}
.fb{font-weight:bold}
.fn{font-weight:normal}
.t2{text-indent:2em}
/*文字color*/
.text-00{color:#000;}
.text-99{color:#999;}
.text-66{color:#666;}
.text-33{color:#333333;}
.text-22{color:#222222;}
.text-44{color:#444444;}
.text-64{color:#646464;}
.text-b8{color:#b8162b;}
.text-9b{color:#9b040d;}
.text-88{color:#888;}
.text-33{color:#333;}
.text-48{color:#484848;}
.text-ff{color:#fff;}
.text-aa{color:#aaa;}
.text-cc{color:#ccc;}
.text-d2{color:#d2d2d2;}
.text-0b{color:#0ba6dc;}
.text-muted{color:#777;}
.text-primary{color:#337ab7;}
.text-success{color:#3c763d;}
.text-info{color:#31708f;}
.text-b4{color:#b4b4b4;}
.text-3c{color:#3c3c3c;}
.text-fe{color:#feb58c;}
.text-78{color:#787878;}
.text-7b{color:#7b7b7b;}
.text-00a78c{color:#00a78c;}
.text-b2e60c{color:#b2e60c;}
.text-cbcbcc{color:#cbcbcc;}
.text-62ba44{color:#62ba44;}
.text-88{color:#888888;}
.text-c8{color:#c8c8c8;}
.text-2fae9a{color:#2fae9a;}
.text-7b7b7c{color:#7b7b7c;}
.text-004e98{color:#004e98;}
.text-999999{color:#999999;}
.text-5c9ef3{color:#5c9ef3;}
.text-a1{color:#a1a1a1;}
.text-328fba{color:#328fba;}
.text-666666{color:#666666;}
.text-929292{color:#929292;}
/*定位*/
.relative{position:relative;}
.absolute{position:absolute;}
/*宽*/
.w1200{width:1200px;margin:0 auto;}
.w1180{width:1180px;margin:0 auto;}
.w1000{width:1000px;margin:0 auto;}
.w940{width:940px;}
.w185{width:185px;}
.w270{width:270px;}
.w290{width:290px;}
.w298{width:298px;}
.w389{width:389px;}
.w400{width:400px;}
.w482{width:482px;}
.w570{width:570px;}
.w645{width:645px;}
.w835{width:835px;}
/*边距*/
.m10{margin:10px}
.m15{margin:15px}
.m30{margin:30px}
.mtb5{margin:5px 0}
.mtb10{margin:10px 0}
.mtb15{margin:15px 0}
.mtb20{margin:20px 0}
.mtb25{margin:25px 0}
.mtb30{margin:30px 0}
.mtb35{margin:35px 0}
.mtb40{margin:40px 0}
.mtb50{margin:50px 0}
.mtb60{margin:60px 0}
.mtb70{margin:70px 0}
.mtb95{margin:95px 0}
.mlr10{margin:0 10px}
.mlr15{margin:0 15px}
.mlr20{margin:0 20px}
.mlr25{margin:0 25px}
.mlr30{margin:0 30px}
.mlr45{margin:0 45px}
.mlr50{margin:0 50px}
.mlr65{margin:0 65px}
.mlr70{margin:0 70px}
.mlr75{margin:0 75px}
.mt3{margin-top:3px}
.mt4{margin-top:4px}
.mt5{margin-top:5px}
.mt8{margin-top:8px}
.mt10{margin-top:10px}
.mt12{margin-top:12px}
.mt15{margin-top:15px}
.mt20{margin-top:20px}
.mt25{margin-top:25px}
.mt30{margin-top:30px}
.mt35{margin-top:35px}
.mt40{margin-top:40px}
.mt45{margin-top:45px}
.mt50{margin-top:50px}
.mt55{margin-top:55px}
.mt60{margin-top:60px}
.mt65{margin-top:65px}
.mt70{margin-top:70px}
.mt100{margin-top:100px}
.mb5{margin-bottom:5px}
.mb8{margin-bottom:8px}
.mb10{margin-bottom:10px}
.mb15{margin-bottom:15px}
.mb17{margin-bottom:17px}
.mb20{margin-bottom:20px}
.mb25{margin-bottom:25px}
.mb30{margin-bottom:30px}
.mb35{margin-bottom:35px}
.mb40{margin-bottom:40px}
.mb45{margin-bottom:45px}
.mb50{margin-bottom:50px}
.mb60{margin-bottom:60px}
.mb65{margin-bottom:65px}
.mb70{margin-bottom:70px}
.mb75{margin-bottom:75px}
.mb100{margin-bottom:100px}
.mb200{margin-bottom:200px}
.ml5{margin-left:5px}
.ml10{margin-left:10px}
.ml15{margin-left:15px}
.ml20{margin-left:20px}
.ml25{margin-left:25px}
.ml30{margin-left:30px}
.ml45{margin-left:45px}
.ml50{margin-left:50px}
.ml52{margin-left:52px}
.ml70{margin-left:70px}
.ml80{margin-left:80px}
.ml85{margin-left:85px}
.ml100{margin-left:100px}
.mr5{margin-right:5px}
.mr10{margin-right:10px}
.mr15{margin-right:15px}
.mr16{margin-right:16px}
.mr20{margin-right:20px}
.mr25{margin-right:25px}
.mr28{margin-right:28px}
.mr30{margin-right:30px}
.mr34{margin-right:34px}
.mr35{margin-right:35px}
.mr40{margin-right:40px}
.mr45{margin-right:45px}
.mr50{margin-right:50px}
.mr53{margin-right:53px}
.mr60{margin-right:60px}
.mr66{margin-right:66px}
.mr68{margin-right:68px}
.mr70{margin-right:70px}
.mr100{margin-right:100px}
.p5{padding:5px;}
.p10{padding:10px;}
.p15{padding:15px;}
.p20{padding:20px;}
.p30{padding:30px;}
.ptb5{padding:5px 0}
.ptb10{padding:10px 0}
.ptb15{padding:15px 0}
.ptb20{padding:20px 0}
.ptb25{padding:25px 0}
.ptb30{padding:30px 0}
.ptb35{padding:35px 0}
.ptb40{padding:40px 0}
.ptb50{padding:50px 0}
.plr10{padding:0 10px}
.plr15{padding:0 15px}
.plr20{padding:0 20px}
.plr25{padding:0 25px}
.plr30{padding:0 30px}
.plr35{padding:0 35px}
.plr40{padding:0 40px}
.plr45{padding:0 45px}
.plr50{padding:0 50px}
.plr70{padding:0 70px}
.pt5{padding-top:5px}
.pt10{padding-top:10px}
.pt13{padding-top:13px}
.pt15{padding-top:15px}
.pt20{padding-top:20px}
.pt25{padding-top:25px}
.pt30{padding-top:30px}
.pt35{padding-top:35px}
.pt40{padding-top:40px}
.pt45{padding-top:45px}
.pt50{padding-top:50px}
.pt60{padding-top:60px}
.pt95{padding-top:95px}
.pt100{padding-top:100px}
.pt150{padding-top:150px}
.pb5{padding-bottom:5px}
.pb6{padding-bottom:6px}
.pb7{padding-bottom:7px}
.pb10{padding-bottom:10px}
.pb15{padding-bottom:15px}
.pb13{padding-bottom:13px}
.pb20{padding-bottom:20px}
.pb25{padding-bottom:25px}
.pb30{padding-bottom:30px}
.pb35{padding-bottom:35px}
.pb50{padding-bottom:50px}
.pb100{padding-bottom:100px}
.pl5{padding-left:5px}
.pl10{padding-left:10px}
.pl15{padding-left:15px}
.pl20{padding-left:20px}
.pl25{padding-left:25px}
.pl28{padding-left:28px}
.pl30{padding-left:30px}
.pl35{padding-left:35px}
.pl40{padding-left:40px}
.pl50{padding-left:50px}
.pl55{padding-left:55px}
.pl65{padding-left:65px}
.pl95{padding-left:95px}
.pl100{padding-left:100px}
.pl260{padding-left:260px}
.pr5{padding-right:5px}
.pr10{padding-right:10px}
.pr15{padding-right:15px}
.pr20{padding-right:20px}
.pr25{padding-right:25px}
.pr30{padding-right:30px}
.pr35{padding-right:35px}
.pr40{padding-right:40px}
.pr50{padding-right:50px}
.pr55{padding-right:55px}
.pr100{padding-right:100px}
/*文字*/
.text-left{text-align:left;}
.text-right{text-align:right;}
.text-center{text-align:center;}
.vertical-align{vertical-align:middle;}
/*background*/
.bgd-00{background:#000;}
.bgd-66{background:#666;}
.bgd-b8{background:#b8162b;}
.bgd-ee{background:#eee;}
.bgd-ff{background:#fff;}
.bgd-9b{background:#9b040d;}
.bgd-0b{background:#0ba6dc;}
.bgd-50{background:#505050;}
.bgd-24{background:#24c5ed;}
.bgd-0b8{background:#0b86dc;}
.bgd-37{background:#37bd7c;}
.bgd-d5{background:#d5d5d5;}
.bgd-f3{background:#f3f3f3;}
.bgd-dc{background:#dcdddc;}
.bgd-70{background:#707070;}
.bgd-4c4d48{background:#4c4d48;}
.bgd-62ba44{background:#62ba44;}
.bgd-efefef{background:#efefef;}
.bgd-e8e8e8{background:#e8e8e8;}
.bgd-06a1ef{background:#06a1ef;}
.bgd-d2d9e1{background:#d2d9e1;}
.bgd-f0{background:#f0f0f0;}
.bgd-f7{background:#f7f7f7;}
.bgd-2fae9a{background:#2fae9a;}
.bgd-eeeded{background:#eeeded;}
.bgd-bbbbbb{background:#bbbbbb;}
.bgd-ededed{background:#ededed;}
.bgd-dedede{background:#dedede;}
.bgd-f8f8f8{background:#f8f8f8;}
/*border-radius*/
.border-radius-5{border-radius:5px;}
/*btn*/
.btn{border:1px solid #dcdcdc;padding:10px 45px;}
/*line-height*/
.line-height-20{line-height:20px;}
.line-height-21{line-height:21px;}
.line-height-22{line-height:22px;}
.line-height-25{line-height:25px;}
.line-height-26{line-height:26px;}
.line-height-28{line-height:28px;}
.line-height-40{line-height:40px;}
.line-height-48{line-height:48px;}
.line-height-60{line-height:60px;}
/*设置p的字体*/
p{font-size:14px;line-height:24px;}

附件:下载该文件资源,减少时间成本(增值服务)