金山云jquery鼠标滑过上下切换特效代码

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

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

以下是金山云jquery鼠标滑过上下切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>金山云jquery鼠标滑过上下切换</title>
<link rel="stylesheet" href="css/zzsc.css">
</head>
<body>
<div>
<div class="mid w1073">
<h2 class="mid w1000">产品服务</h2>
<div class="pdList">
  <ul class="mid w1000">
	<li>
	  <div class="tmplS tmplS1">
		<div class="cover"></div>
		<div class="wrapS">
		  <p class="ttl">高性能云主机
		  <p>安全 便捷 付费灵活
		  <p class="opt"><a href="#" class="nlink">免费试用</a>&nbsp;&nbsp;<a href="#" class="btn btn3">立即购买</a>
		</div>
	  </div>
		  <li>
	  <div class="tmplS tmplS2">
		<div class="cover"></div>
		<div class="wrapS">
		  <p class="ttl">标准存储服务
		  <p>无限制 多备份 低成本
		  <p class="opt"><a href="#" class="btn btn3">立即购买</a>
		</div>
	  </div>
		  <li>
	  <div class="tmplS tmplS3">
		<div class="cover"></div>
		<a href="#" target="_blank">
		<div class="wrapS">
		  <p class="ttl">金山快盘个人版
		  <p>多终端自动同步
		  <p class="opt"><button class="btn btn3">立即使用</button>
		</div>
		</a>
	  </div>
	<li>
	  <div class="tmplS tmplS4">
		<div class="cover"></div>
		  <a href="#" target="_blank">
		  <div class="wrapS">
			<p class="ttl">金山快盘商业版
			<p>轻松办公，同步成长
			<p class="opt"><button class="btn btn3">立即使用</button>
		  </div>
		  </a>
		</div>
  </ul>
</div>
<h2 class="mid w1000">即将发布</h2>
<div class="pdList">
  <ul class="mid w1000">
	<li>
	  <div class="tmplS tmplS5">
		<div class="wrapS"><div class="wrapC"></div></div>
	  </div>
	<li>
	  <div class="tmplS tmplS6">
		<div class="wrapS"><div class="wrapC"></div></div>
	  </div>
	<li>
	  <div class="tmplS tmplS7">
		<div class="wrapS"><div class="wrapC"></div></div>
	  </div>
	<li>
	  <div class="tmplS tmplS8">
		<div class="wrapS"><div class="wrapC"></div></div>
	  </div>
  </ul>
</div>
</div>
</div>
<script src="js/jquery.1.10.2.js"></script>
<script>
  $(document).ready(function(){
    $('.tmplS').hover(function(){
      $(".cover", this).stop().animate({top:'156px', left:'0px'},{queue:false,duration:400})
      }, function() {
        $(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:400})
      })
  })
</script>
</body>
</html>

CSS代码(zzsc.css):

*{padding:0;margin:0;vertical-align:top;outline:0}
body{font:12px/24px 'Helvetica Neue',Tahoma;color:#848484}
article,aside,details,figcaption,footer,header,hgroup,nav,section{display:block}
img,fieldset,hr,iframe,button{border:0}
img,.img{vertical-align:middle}
li{list-style:none}
button,input,select,textarea{margin:0;font-size:100%;vertical-align:middle}
button,.btn{overflow:visible;_overflow-y:hidden;width:auto;padding:0;-moz-box-sizing:content-box;box-sizing:content-box;text-indent:0;outline:0;cursor:pointer;border:0;background:none}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
sup,sub{vertical-align:baseline}
h1,h2,h3,h4,h5,h6,b{font-size:1em;font-weight:normal}
em{font-style:normal}
table{width:100%;border-collapse:collapse;border-spacing:0}
th,td{padding:0 8px;text-align:left}
textarea{resize:vertical}
a{color:#444;text-decoration:none}
a:hover{text-decoration:underline}
.noSelect{user-select:none;-moz-user-select:-moz-none;-webkit-user-select:none}
input,textarea{color:#848484;-moz-user-select:text}
.noDis{display:none!important;opacity:0!important}
.noVis{visibility:hidden!important;opacity:0!important;-webkit-transition:all ease-out .3s;transition:all ease-out .3s}
.hasTransition{-webkit-transition:all ease-out .2s;transition:all ease-out .2s}
* html body{_zoom:expression(function(x){x.style.zoom=1;try{document.execCommand('BackgroundImageCache',false,true)}
catch(e){return}
}
(this))}
a:active{*direction:expression(function(x){x.style.direction='ltr';x.hideFocus=1}
(this))}
.dn{display:none}
.noSelect{-webkit-user-select:none}
.fixed{position:fixed}
.disabled{color:#999;cursor:default}
.fuc{vertical-align:middle;color:#5FA600}
.ttl{}
.ttl2{margin-top:2px}
.loading{background:url(0166.gif) no-repeat center!important}
.loading2{background-image:url(019.gif);background-repeat:no-repeat;background-position:center 50px}
.maint .total{display:inline-block;margin:4px 8px 0}
.em{color:#444}
.em2{color:#f00}
.em3,.selected-file-number{margin:0 5px;color:#228fd2;font-weight:bold}
.ui-selectable-helper{position:absolute;z-index:100;border:1px solid rgba(88,154,0,.6);border-color:#589a00\9;background:rgba(95,166,0,.1);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#16589a00,endColorstr=#16589a00)\9}
.helpInf{padding:25px 15px;color:#aaa}
.helpInf dt{font-weight:bold}
.helpInf dd{margin-top:1em}
.inf2 li{padding-left:10px;background:url(dot_2x2_aaa.gif) no-repeat 4px center}
.IxMsg{min-height:50px;_height:50px;padding:20px 20px 20px 90px}
.IxMsgI{display:block;width:50px;height:50px;margin:0 0 -50px -60px;background:#9cf}
.IxMsgI:after{content:'';display:block;line-height:50px;text-align:center;color:#fff;font-weight:bold;font-size:32px}
.IxMsgT{padding:12px 0 0;font-family:\5fae\8f6f\96c5\9ed1;font-size:16px;font-weight:bold}
.IxMsgC{margin:1em 0 0}
.IxMsgAlert .IxMsgI:after{color:#f00}
.IxMsgAsk .IxMsgI:after{content:'?'}
.IxMsgOk .IxMsgI:after{content:'√'}
.IxMsgErr .IxMsgI:after{content:'x'}
.IxMsgForbid .IxMsgI:after{content:'#'}
.resMsg{min-height:30px;_height:30px;line-height:30px;padding:100px 10px 10px;font-size:18px;text-align:center;background:url(040.png) no-repeat center 20px;color:#848484}
.resMsg_ok{}
.resMsg_err{background-image:url(041.png)}
.ht{height:20px;line-height:20px;padding:36px 0 16px;margin:0 0 30px;font-weight:bold;background:url(052.gif) repeat-x bottom}
.ht1{padding-top:15px}
.pbar{overflow:hidden;_position:relative;width:200px;height:9px;line-height:9px;font-size:0em;border:1px solid #9D9D9D;text-align:left;background:#fff}
.pbar em{position:relative;display:inline-block;width:100%;height:100%;margin:0 0 0 -100%;background:#75B861;-webkit-transition:all ease-out .3s;transition:all ease-out .3s}
.secureLv{width:200px;margin:0 auto;text-align:center}
.secureLv .pbar{margin-bottom:5px}
.pbar2{width:150px;height:4px;border:none;background:url(054.png) repeat-x;border-radius:2px}
.pbar2 em{background:url(054.png) repeat-x 0 -5px;border-radius:2px}
#sysLoading{z-index:12;top:68px;left:50%;position:absolute;width:97px;height:35px;line-height:35px;margin:-17px 0 0 -24px;color:#fff;background:rgba(0,0,0,.5);border-radius:5px;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000,endColorstr=#88000000)\9}
#sysLoading p{position:relative;height:35px;padding:0 0 0 36px;background:url(027.gif) no-repeat 7px}
#responser{z-index:14;top:50%;left:50%;position:absolute;min-width:97px;_width:97px;min-height:35px;_height:35px;line-height:35px;padding:.5em 1em;margin:-17px 0 0 -24px;border:1px solid #EED3D7;font-size:16px;font-weight:bold;white-space:nowrap;text-align:center;color:#b94a48;background:#F2DEDE;border-radius:3px;box-shadow:1px 2px 3px rgba(185,74,72,.5)}
html{background:#fff;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
body{font-family:Verdana,Arial,Helvetica,'Microsoft YaHei',sans-serif}
html,body,.Bdy{height:100%}
.mid{margin:0 auto}
.w1000{width:1000px}
.w1073{width:1074px}
@media screen and (min-width:1024px) and (max-width:1072px){.w1073{width:100%}
}
.wrapper{width:1000px;margin:0 auto}
.ksybar{height:24px;background-color:#e5e5e5}
.ksybar h2{height:24px;margin-bottom:-24px;color:#333;font-size:12px;line-height:24px}
.ksybar h2 span{border-bottom:none}
.ksybar .nav{text-align:right}
.banner_box{width:100%;height:400px}
.banner_wrap{height:100%}
.banner_wrap1{padding-top:60px;background:url(127.jpg) center top no-repeat #f3f3f3}
.banner_bd{height:100%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
.banner_wrap1 .banner_bd{background:url(113.png) no-repeat center 50px}
.pdList{padding-bottom:14px;background:url(063.png) center bottom no-repeat}
.pdList li{display:inline-block;*display:inline;*zoom:1;margin-right:7px}
@media screen and (min-width:1024px) and (max-width:1072px){.pdList li{margin-right:9px}
}
.pdList li:last-child{margin-right:0}
.tmplS{position:relative;height:156px;overflow:hidden}
.tmplS a:hover{text-decoration:none}
.cover{position:absolute;z-index:40;width:240px;height:154px;border:1px solid transparent;margin-bottom:-154px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.tmplS1 .cover{background:url(155.png) #37c4ee 0 0 no-repeat;border-color:#2cb8e9}
.tmplS2 .cover{background:url(155.png) #ff8843 -240px 0 no-repeat;border-color:#f67b3a}
.tmplS3 .cover{background:url(155.png) #90da88 -480px 0 no-repeat;border-color:#8ecf84}
.tmplS4 .cover{background:url(155.png) #77b1d2 -720px 0 no-repeat;border-color:#5b9cbe}
.wrapS{position:relative;width:240px;*width:200px;height:154px;padding:30px 20px;background:url(085.png) #50697d;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.tmplS1 .wrapS{background:url(155.png) 0 -156px no-repeat;border:1px solid #b1d2e3;color:#13aad6}
.tmplS1 .wrapS:hover,.tmplS2 .wrapS:hover{cursor:pointer}
.tmplS2 .wrapS{background:url(155.png) -240px -156px no-repeat;border:1px solid #e4d0ad;color:#fa7f23}
.tmplS3 .wrapS{background:url(155.png) -480px -156px no-repeat;border:1px solid #cedbcd;color:#52ac4c}
.tmplS4 .wrapS{background:url(155.png) -720px -156px no-repeat;border:1px solid #c2cdd5;color:#5298bb}
.wrapS p{font-size:16px;line-height:30px}
.wrapS .ttl{font-size:26px}
.wrapC{position:relative;left:-20px;top:-30px;width:240px;height:154px;display:block}
.tmplS5 .wrapC{background:url(155.png) no-repeat 0px -309px}
.tmplS5 .wrapS{background:#8fdeba;background:-moz-linear-gradient(top,#8fdeba 5%,#7bc19e 94%);background:-webkit-gradient(linear,left top,left bottom,color-stop(5%,#8fdeba),color-stop(94%,#7bc19e));background:-webkit-linear-gradient(top,#8fdeba 5%,#7bc19e 94%);background:-o-linear-gradient(top,#8fdeba 5%,#7bc19e 94%);background:-ms-linear-gradient(top,#8fdeba 5%,#7bc19e 94%);background:linear-gradient(to bottom,#8fdeba 5%,#7bc19e 94%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fdeba',endColorstr='#7bc19e',GradientType=0 )}
.tmplS6 .wrapC{background:url(155.png) no-repeat -240px -309px}
.tmplS6 .wrapS{background:#8eaff6;background:-moz-linear-gradient(top,#8eaff6 0%,#7298e5 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#8eaff6),color-stop(100%,#7298e5));background:-webkit-linear-gradient(top,#8eaff6 0%,#7298e5 100%);background:-o-linear-gradient(top,#8eaff6 0%,#7298e5 100%);background:-ms-linear-gradient(top,#8eaff6 0%,#7298e5 100%);background:linear-gradient(to bottom,#8eaff6 0%,#7298e5 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#8eaff6',endColorstr='#7298e5',GradientType=0 )}
.tmplS7 .wrapC{background:url(138.png) no-repeat -480px -309px}
.tmplS7 .wrapS{background:#ce93ef;background:-moz-linear-gradient(top,#ce93ef 5%,#c491e1 94%);background:-webkit-gradient(linear,left top,left bottom,color-stop(5%,#ce93ef),color-stop(94%,#c491e1));background:-webkit-linear-gradient(top,#ce93ef 5%,#c491e1 94%);background:-o-linear-gradient(top,#ce93ef 5%,#c491e1 94%);background:-ms-linear-gradient(top,#ce93ef 5%,#c491e1 94%);background:linear-gradient(to bottom,#ce93ef 5%,#c491e1 94%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce93ef',endColorstr='#c491e1',GradientType=0 )}
.tmplS8 .wrapC{background:url(138.png) no-repeat -720px -309px}
.tmplS8 .wrapS{background:#f5968e;background:-moz-linear-gradient(top,#f5968e 0%,#dc7c73 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f5968e),color-stop(100%,#dc7c73));background:-webkit-linear-gradient(top,#f5968e 0%,#dc7c73 100%);background:-o-linear-gradient(top,#f5968e 0%,#dc7c73 100%);background:-ms-linear-gradient(top,#f5968e 0%,#dc7c73 100%);background:linear-gradient(to bottom,#f5968e 0%,#dc7c73 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5968e',endColorstr='#dc7c73',GradientType=0 )}
.wrapS .opt{position:absolute;right:28px;bottom:20px}
.wrapS .opt .nlink{color:#0c96f2;text-decoration:none}
.tmplS1 .btn3{background:#3ab0de}
.tmplS1 .btn3:hover,.tmplS1 .btn3:active{background:#31a5d3}
.tmplS2 .btn3{background:#fc8732}
.tmplS2 .btn3:hover,.tmplS2 .btn3:active{background:#e87827}
.tmplS3 .btn3{background:#64c55c}
.tmplS3 .btn3:hover,.tmplS3 .btn3:active{background:#58b550}
.tmplS4 .btn3{background:#3ab0de}
.tmplS4 .btn3:hover,.tmplS4 .btn3:active{background:#30a5d3}
.ksNews{position:relative;height:325px;padding-right:280px;padding-bottom:106px}
.ksNews .n-item{width:330px;min-height:75px;display:inline-block;*display:inline;*zoom:1;margin-left:57px;padding:20px 0;border-bottom:1px dotted #ccc}
.ksNews .n-item:nth-child(odd){margin-left:0}
.ksNews .n-item.col1{margin-left:0\9;*margin-left:0}
.n-item .sdate{display:block;width:50px;height:50px;position:relative;margin-bottom:-50px;background-color:#91c8e0;color:#fff;text-align:center;font-size:12px;line-height:20px}
.n-item .sdate span{position:relative;display:block;font-size:30px;padding-top:2px;*top:-5px;*line-height:100%}
.n-item dl{margin-left:60px;font-family:Verdana,Arial,Helvetica,sans-serif}
.n-item dt{font-size:14px;color:#333;line-height:1;font-weight:bold;font-family:'SimSun';margin-bottom:6px}
.n-item dd{font-size:12px;line-height:1.5;color:#808080;font-family:'SimSun'}
.ksServ{position:relative;height:461px;margin-bottom:-461px;margin-top:30px;padding-left:760px;z-index:10}
.ksServ p{position:relative;padding:16px 27px 6px 87px;background-color:#d2e8f5}
.ksServ p span{position:relative;display:block;*top:-8px}
.ksServ p span.s_ttl{font-size:16px;line-height:100%;margin-bottom:8px;color:#0a232f}
.ksServ a:hover{text-decoration:none}
.ksServ .i1{position:absolute;left:27px}
h2{font-size:18px;color:#333;line-height:32px}
h2 span{display:inline-block;border-bottom:3px solid #39728e}
.ksNews h2,.ksServ h2{border-bottom:1px solid #ccc}
.ksServ h2{margin-bottom:20px}
.w1073 h2{line-height:100%;padding:10px 0 15px}
.i{width:16px;height:16px;overflow:hidden;display:inline-block;background:url(142.png) no-repeat;margin:0 .1em .2em .1em;line-height:0!important;text-align:left;vertical-align:middle;text-decoration:none!important;-webkit-text-size-adjust:none}
.ix68{width:68px;height:68px}
.ix72{width:72px;height:72px}
.i1{width:50px;height:50px}
.i2{width:68px;height:68px;background:url(144.png) 0 0}
.i3{width:68px;height:68px;background:url(144.png) -100px 0}
.i4{width:68px;height:68px;background:url(144.png) -200px 0}
.i5{width:68px;height:68px;background:url(144.png) -300px 0}
.i6{width:68px;height:68px;background:url(144.png) -400px 0}
.i7{background:url(115.png)}
.i8{height:20px;background:url(026.png) no-repeat}
.i9{background:url(143.png) 0 0}
.i10{width:40px;height:40px;background:url(143.png) -50px 0}
.i11{width:74px;height:74px;background:url(141.png) 0 0}
.i12{width:74px;height:74px;background:url(141.png) -100px 0}
.i13{width:74px;height:74px;background:url(141.png) -200px 0}
.i14{width:74px;height:74px;background:url(141.png) -300px 0}
.i15{background:url(143.png) -100px 0}
.txticon{background-image:url(104.png) !important}
.txticon1{background-position:13px 17px!important}
.txticon2{background-position:13px -37px!important}
.btn{position:relative;display:inline-block;min-width:32px;_width:32px;height:28px;line-height:28px;padding:0 11px;border:1px solid #c6c6c6;font-size:12px;text-align:center;vertical-align:middle;white-space:nowrap;background:url(046.png) repeat-x;color:#848484;cursor:pointer;border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,.03)}
button.btn .i{margin-bottom:0}
.btn:hover{text-decoration:none;background-position:0 -50px}
.btn:active{background-position:0 -100px}
.btn_pending,.btn_disable{border-color:#bfcdd4!important;color:#aaa!important;background:#edf2f5!important;background-position:0 -303px!important;cursor:default;text-shadow:none!important}
.btn_active{z-index:7;border-color:#c6c6c6!important;border-bottom:0;background:#fff!important;border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none}
.btn_pending{color:transparent!important}
.btn_pending:after{content:'';left:0;top:0;position:absolute;display:block;width:100%;height:100%;background:url(354.gif) no-repeat center}
.btn_pending .i,.btn_pending b{visibility:hidden}
.btn_primary{background:#36b0ee;border-color:#31a5df}
.btn_primary:hover{background:#2ea5e2}
.btn_primary:active{background:#2ea5e2}
.btn_2ndary{color:#ccc}
.btn2{background:#ff8d3a;border:none;padding:2px 24px;color:#fff!important;font-size:14px;font-family:'Microsoft YaHei';font-weight:normal}
.btn2.blue{background:#37aedd}
.btn3{background:#54a5cd;border:none;padding:2px 24px;color:#fff!important;font-size:14px}
.btns{margin-top:20px}
.btn4{display:block;width:100%;height:auto;padding:10px 0!important;border-color:#31a5df;font-size:18px;color:#fff;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.btnB{min-width:160px;_width:160px;height:44px;line-height:44px;border-color:#31a5df;font-size:18px;background:#36b0ee;color:#fff!important;border-radius:4px}
.btnB1{width:auto;height:auto;border:1px solid #31a5df;padding:10px 40px;color:#fff;font-size:16px;line-height:100%;background:#36b0ee}
.btn5{width:61px;border:1px solid #a0c3d4;color:#333;background:#d8eef9}
.btn6{padding:0 30px;border-color:#d6763e;background:#fa8c49;color:#fff!important}
.btn6:hover{background-color:#f48845}
.fulH{height:100%;position:relative}
.footer,.footer1{font-family:Arial,'SimSun';background-color:#4d4d4d;padding:18px 0 42px;text-align:center;color:#fff}
.footer p{line-height:100%;line-height:30px}
.footer a,.footer3 a{color:#fff;font-size:14px;padding:0 8px}
.footer3 a{color:#0f3f65}
.fulH .footer{position:fixed;width:100%;bottom:0}
.footer2{background:transparent}
.footer3{background:transparent;color:#0f3f65;padding-top:130px;text-align:left;font-size:14px}
.footer3{position:absolute;left:0;padding:20px 0 50px;background:transparent;color:#0f3f65;text-align:left;font-size:14px}
@media screen and (max-height:700px){.footer3{position:relative}
}
@media screen and (min-height:660px){.footer3{position:absolute;bottom:0;right:0}
}
.nav{list-style:none}
.nav li a:hover{color:#d4efff}
.nav1 li{position:relative;display:inline-block;*display:inline;*zoom:1}
.nav1 li>a{display:block;margin:0 14px;padding:14px 0 7px;font-family:Arial,Helvetica,'Microsoft YaHei';font-size:16px;line-height:36px;text-decoration:none;color:#fff;border-bottom:3px solid transparent;z-index:10}
.nav1 li.parent{padding-right:10px}
.nav1 li.parent .caret{width:15px;height:36px;*height:16px;position:relative;display:inline-block;top:38%;*top:0;background:url(066.png) right center no-repeat;line-height:24px}
.nav1 li.parent ul{display:none}
.nav1 li.parent:hover>ul{display:block}
.nav1 li.cur>a{border-color:#d4efff;color:#d4efff}
.nav1 li ul{position:absolute;left:14px;padding-bottom:10px;background-color:#7c99a7;box-shadow:1px 1px 2px rgba(0,0,0,.35)}
.nav1 li ul li{display:block}
.nav1 li ul li a{*display:block;*width:100%;*zoom:1;height:auto;margin:0;padding:5px 10px;font-size:14px;line-height:1.5;text-align:left;font-family:'SimSun';color:#f7fcff}
.nav1 li ul li a:hover{background-color:#617078}
.nav2 li{display:inline-block;*display:inline;*zoom:1}
.nav2 li>a{margin:0;color:#333;margin:7px 0 0 10px;padding-right:8px;border-right:1px solid #999}
.nav2 li>a:hover{text-decoration:none}
.nav2 li.cur>a,.nav2 li>a:hover{color:#069}
.nav3{height:38px;text-align:right}
.nav3 li{margin-top:25px;color:#333;font-size:12px;line-height:100%}
.nav3 li a:hover{color:#666}
.nav4{padding-left:18px}
.nav4 li{list-style-position:outside}
.nav4 li a{display:inline;zoom:1;padding:6px 0 4px 0;color:#666;line-height:20px}
.nav4>li>a{font-size:12px;font-weight:bold}
.nav4 li.leaf{list-style-image:url(022.png)}
.nav4 li.cur>a{color:#127db3}
.nav4 li.closed{list-style-image:url(023.png)}
.nav4 li.closed>ul{display:none}
.nav4 li.opened{list-style-image:url(024.png)}
.nav4 li.opened>ul{display:block}
.nav4 ul{margin-left:15px;padding-left:0}
.nav5{height:30px;text-align:right}
.nav5 li{margin-top:14px;color:#666;font-size:12px;line-height:16px}
.nav5 li a:hover{color:#666}
.header{width:100%}
.header.mfixed{position:fixed;top:0}
.header a span{display:none}
.header{position:relative;top:0;width:100%;z-index:10}
.header .sub_ttl{display:block;position:relative;top:10px;height:40px;margin-left:140px;color:#fff;font-size:18px;line-height:40px}
.split_line{display:inline-block;*display:inline;position:relative;top:6px;width:2px;height:28px;background:url(044.png) repeat-y left top}
.sub_ttl .split_line{margin:0 15px}
.header h1 .logo{display:block;width:140px;height:40px;position:relative;top:10px;margin-bottom:-40px;background:url(065.png) no-repeat}
.header h1 .separation{display:block;width:2px;height:28px;position:relative;margin-left:150px;margin-top:-40px;top:16px;background:url(044.png) no-repeat}
.header h1 .company{display:block;height:40px;position:relative;top:10px;background:url(043.png) no-repeat;margin:-27px 0 0 160px;padding-left:46px;font-size:18px;color:#FFFFFF;line-height:40px}
.header1{position:relative;top:0;height:60px;border-bottom:1px solid #779ac6;margin-bottom:-61px;background:url(126.png) center top no-repeat}
.header1 h1,.header2 h1{height:60px;margin-bottom:-60px}
.header1 .nav1,.header2 .nav1{position:relative;padding-left:140px;text-align:right;z-index:20}
.header2{position:relative;top:0;height:60px;border-bottom:1px solid #779ac6;background:url(135.png) center top no-repeat}
.header3{height:38px;margin:50px 0 27px}
.header3 h1{height:38px;margin-bottom:-38px}
.header3 a.logo{display:block;top:0;left:0;width:131px;height:38px;padding-right:20px;border-right:1px solid #fff;margin:0 0 -38px 0;background:url(106.png) no-repeat left top}
.header3 .logo span{display:none}
.header3 .sub_ttl{display:block;top:0;padding-left:20px;border-left:1px solid #a9becb;margin-left:152px;font-size:20px;color:#333;line-height:38px;font-family:'Microsoft YaHei'!important}
.header4{height:auto;min-height:50px;border-bottom:1px solid #b2b2b3;text-align:center;background-color:#d3e8f3;-webkit-box-shadow:0px 0px 1px rgba(0,0,0,.3);-moz-box-shadow:0px 0px 1px rgba(0,0,0,.3);box-shadow:0px 0px 1px rgba(0,0,0,.3)}
.header4 h1{height:38px;margin-bottom:-38px}
.header4 .logo{display:inline-block;position:relative;top:9px;width:120px;height:34px;background:url(100.png) no-repeat;background-size:120px}
.header5{background:url(129.png) repeat-x}
.header5 .logo{left:0}
.header6{position:relative;top:0;height:60px;border-bottom:1px solid #779ac6;margin-bottom:-60px;background:url(053.png) center top no-repeat}
.header6 h1,.header2 h1{height:60px;margin-bottom:-60px}
.header6 .nav1,.header2 .nav1{position:relative;padding-left:140px;text-align:right;z-index:20}
.actv{width:100%}
.actv.btc{height:60px;background:url(154.png) top center no-repeat}
.actv.btc >a{display:block;width:100%;height:100%}

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