馃搨鏂囩珷鐩綍
- 鈥嬧€嬩竴銆侌煈ㄢ€嶐煄撶綉绔欓鐩€嬧€?/li>
- 鈥嬧€嬩簩銆佲湇锔忕綉绔欐弿杩扳€嬧€?/li>
- 鈥嬧€嬩笁銆侌煋氱綉绔欎粙缁嶁€嬧€?/li>
- 鈥嬧€嬪洓銆侌煂愮綉绔欐紨绀衡€嬧€?/li>
- 鈥嬧€嬩簲銆佲殭锔?缃戠珯浠ｇ爜鈥嬧€?/li>
- 鈥嬧€嬸煣盚TML缁撴瀯浠ｇ爜鈥嬧€?/li>
- 鈥嬧€嬪叚銆侌煡?濡備綍璁╁涔犱笉鍐嶇洸鐩€嬧€?/li>
- 鈥嬧€嬩竷銆侌煄佹洿澶氬共璐р€嬧€?/li>
涓€銆侌煈ㄢ€嶐煄撶綉绔欓鐩?/h2>
馃憭 鍏徃瀹樼綉缃戠珯 銆佷紒涓氬畼缃戙€侀厭搴楀畼缃戙€佺瓑缃戠珯鐨勮璁′笌鍒朵綔銆?
浜屻€佲湇锔忕綉绔欐弿杩?/h2>
馃彿锔?缃戦〉涓寘鍚細Div+CSS銆侀紶鏍囨粦杩囩壒鏁堛€乀able銆佸鑸爮鏁堟灉銆乥anner銆佽〃鍗曘€佷簩绾т笁绾ч〉闈㈢瓑锛岃棰戦煶棰戝厓绱狅紝鍚屾椂璁捐浜唋ogo锛堟簮鏂囦欢锛夛紝鍩烘湰鏈熸湯浣滀笟鎵€闇€鐨勭煡璇嗙偣鍏ㄨ鐩栥€?
馃弲 涓€濂椾紭璐ㄧ殑馃挴缃戦〉璁捐搴旇鍖呭惈 (鍏蜂綋鍙牴鎹釜浜鸿姹傝€屽畾)
- 椤甸潰鍒嗕负椤靛ご銆佽彍鍗曞鑸爮锛堟渶濂藉彲涓嬫媺锛夈€佷腑闂村唴瀹规澘鍧椼€侀〉鑴氬洓澶ч儴鍒嗐€?/li>
- 鎵€鏈夐〉闈㈢浉浜掕秴閾炬帴锛屽彲鍒颁笁绾ч〉闈紝鏈?-10涓〉闈㈢粍鎴愩€?/li>
- 椤甸潰鏍峰紡椋庢牸缁熶竴甯冨眬鏄剧ず姝ｅ父锛屼笉閿欎贡锛屼娇鐢―iv+Css鎶€鏈€?/li>
- 鑿滃崟缇庤銆侀啋鐩紝浜岀骇鑿滃崟鍙甯稿脊鍑轰笌璺宠浆銆?/li>
- 瑕佹湁JS鐗规晥锛屽瀹氭椂鍒囨崲鍜屾墜鍔ㄥ垏鎹㈠浘鐗囪疆鎾€?/li>
- 椤甸潰涓湁澶氬獟浣撳厓绱狅紝濡俫if銆佽棰戙€侀煶涔愶紝琛ㄥ崟鎶€鏈殑浣跨敤銆?/li>
- 椤甸潰娓呯埥銆佺編瑙傘€佸ぇ鏂癸紝涓嶉浄鍚屻€?銆?/li>
- 涓嶄粎瑕佽兘澶熸妸鐢ㄦ埛瑕佹眰鐨勫唴瀹瑰憟鐜板嚭鏉ワ紝杩樿婊¤冻甯冨眬鑹ソ銆佺晫闈㈢編瑙傘€侀厤鑹蹭紭闆呫€佽〃鐜板舰寮忓鏍风瓑瑕佹眰銆?/li>
涓夈€侌煋氱綉绔欎粙缁?/h2>
馃摂缃戠珯甯冨眬鏂归潰锛氳鍒掗噰鐢ㄧ洰鍓嶄富娴佺殑銆佽兘鍏煎鍚勫ぇ涓绘祦娴忚鍣ㄣ€佹樉绀烘晥鏋滅ǔ瀹氱殑娴姩缃戦〉甯冨眬缁撴瀯銆?
馃摀缃戠珯绋嬪簭鏂归潰锛氳鍒掗噰鐢ㄦ渶鏂扮殑缃戦〉缂栫▼璇█HTML5+CSS3+JS绋嬪簭璇█瀹屾垚缃戠珯鐨勫姛鑳借璁°€傚苟纭繚缃戠珯浠ｇ爜鍏煎鐩墠甯傞潰涓婃墍鏈夌殑涓绘祦娴忚鍣紝宸茶揪鍒版墦寮€鍚庡氨鑳藉嵆鏃剁湅鍒扮綉绔欑殑鏁堟灉銆?
馃摌缃戠珯绱犳潗鏂归潰锛氳鍒掓敹闆嗗悇澶у钩鍙板ソ鐪嬬殑鍥剧墖绱犳潗锛屽苟绮炬寫缁嗛€夐€傚悎缃戦〉椋庢牸鐨勫浘鐗囷紝鐒跺悗浣跨敤PS鍋氬嚭閫傚悎缃戦〉灏哄鐨勫浘鐗囥€?
馃搾缃戠珯鏂囦欢鏂归潰锛氱綉绔欑郴缁熸枃浠剁绫诲寘鍚細html缃戦〉缁撴瀯鏂囦欢銆乧ss缃戦〉鏍峰紡鏂囦欢銆乯s缃戦〉鐗规晥鏂囦欢銆乮mages缃戦〉鍥剧墖鏂囦欢锛?
馃摍缃戦〉缂栬緫鏂归潰锛氱綉椤典綔鍝佷唬鐮佺畝鍗曪紝鍙娇鐢ㄤ换鎰廐TML缂栬緫杞欢锛堝锛氣€?code>鈥婦reamweaver銆丠Builder銆乂scode 銆丼ublime 銆乄ebstorm銆乀ext 銆丯otepad++鈥?/code>鈥嬧€?绛変换鎰廻tml缂栬緫杞欢杩涜杩愯鍙婁慨鏀圭紪杈戠瓑鎿嶄綔锛夈€? 鍏朵腑锛? 锛?锛夝煋渉tml鏂囦欢鍖呭惈锛氬叾涓璱ndex.html鏄椤点€佸叾浠杊tml涓轰簩绾ч〉闈紱
锛?锛夝煋?css鏂囦欢鍖呭惈锛歝ss鍏ㄩ儴椤甸潰鏍峰紡,鏂囧瓧婊氬姩, 鍥剧墖鏀惧ぇ绛夛紱
锛?锛夝煋?js鏂囦欢鍖呭惈锛歫s瀹炵幇鍔ㄦ€佽疆鎾壒鏁? 琛ㄥ崟鎻愪氦, 鐐瑰嚮浜嬩欢绛夌瓑锛堜釜鍒綉椤典腑杩愮敤鍒癹s浠ｇ爜锛夈€?
鍥涖€侌煂愮綉绔欐紨绀?/h2> 浜斻€佲殭锔?缃戠珯浠ｇ爜
馃ПHTML缁撴瀯浠ｇ爜
<!doctype html>
<html>
<head>
<!--澹版槑褰撳墠椤甸潰鐨勭紪鐮侀泦锛歝harset=gbk,gb2312(涓枃缂栫爜)锛寀tf-8鍥介檯缂栫爜-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--褰撳墠椤甸潰鐨勪笁瑕佺礌-->
<title>鑵捐璇惧爞棣栭〉</title>
<meta name="Keywords" content="鍏抽敭璇?鍏抽敭璇?>
<meta name="description" content="">
<link rel="shortcut icon" href="http://www.ylcp.shop/files/files/1652954723262/images/favicon.ico">
<!--css,js-->
<style type="text/css">
*{margin:0;padding:0}
body{font-size:12px;font-family:"寰蒋闆呴粦";cursor:default;background-color:#fff}
.clear{clear:both;}
/*婊氬姩鏉″搴?/
::-webkit-scrollbar{width:10px;background-color:#dedbde;}
/* 杞ㄩ亾鏍峰紡 */
::-webkit-scrollbar-track {}
/* Handle鏍峰紡 */
::-webkit-scrollbar-thumb {border-radius: 10px;background: rgba(0,0,0,0.2);min-height: 28px;}
/*褰撳墠绐楀彛鏈縺娲荤殑鎯呭喌涓?/
::-webkit-scrollbar-thumb:window-inactive {
padding-top:100px;
-webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,0.1),inset -1px -1px 0 rgba(0,0,0,0.07);
background-clip:padding-box;background-color:#dadada;
min-height:28px;-webkit-border-radius:4px;
-moz-border-radius:4px;border-radius:4px
}
/*hover鍒版粴鍔ㄦ潯涓?/
::-webkit-scrollbar-thumb:vertical:hover{
background-color: rgba(0,0,0,0.4);
}
/*婊氬姩鏉℃寜涓?/
::-webkit-scrollbar-thumb:vertical:active{
background-color: rgba(0,0,0,0.5);
}
/*header start*/
.header{
width:1200px;height:85px;margin:0 auto;
padding-top:15px
}
.header h1{
float:left;margin-top:3px;
}
.header h1 a{
}
.header .search{
width:450px;height:36px;
float:left;margin-left:220px;
border:2px solid #188eee;
position:relative;
}
.header .search input{
width:370px;height:30px;border:0;line-height:30px;*position:absolute;
outline:0;color:#545454;font-family:"寰蒋闆呴粦";*left:0;
font-size:12px;padding:3px 10px;-webkit-writing-mode: horizontal-tb;
}
.header .search a{
display:inline-block;width:58px;height:36px;
position:absolute;right:0;line-height:36px;
text-align:center;background:#188eee
}
.header .search a i{
display:inline-block;width:20px;height:20px;
background:url("picture/icon-search-white.png");
margin-top:9px;margin-left:3px;
}
.header a{
text-decoration:none
}
.header .login{
height:40px;float:right;color:#dedede;
line-height:40px;margin-top:2px;
}
.header .login a{
color:#333;padding:0 0 0 6px;
}
/*end header*/
/*banner start*/
.banner{
width:100%;height:350px;
}
/*little-banner start*/
.banner .little-banner{
width:1200px;height:50px;position:relative;
margin:0 auto;
}
.banner .little-banner a{
position:absolute;left:220px;
padding:0;height:50px;
}
/*end little-banner*/
/*big-banner start*/
.banner .big-bg{
height:300px;background:#a534d6;
}
.banner .big-bg .big-banner{
width:1200px;height:300px;margin:0 auto;
position:relative;
}
/*big-banner-ul start*/
.banner .big-bg .big-banner .big-banner-ul{
width:220px;height:476px;position:absolute;
top:-50px;background:#188eee;
}
.big-banner-ul #course i{
display:inline-block;width:18px;height:14px;
background:url("picture/button.png") no-repeat center;
background-position:-126px -163px;
margin:0 10px -1px 15px;
}
.big-banner-ul #course{
display:block;width:220px;height:50px;
line-height:50px;
}
.big-banner-ul .course{
text-decoration:none;color:white;font-size:16px;
}
.big-banner-ul .course:hover{
text-decoration:underline;
}
.big-banner-ul ul{
list-style:none;
}
.big-banner-ul ul .course-li{
width:205px;height:59px;padding-top:11px;
padding-left:15px;border-bottom:1px solid #1681c4;
background:#0477C0;position:relative;
}
.big-banner-ul ul .course-li:hover{
background:#0264a3;
}
.big-banner-ul ul .course-li .course{
line-height:24px;display:block
}
.big-banner-ul ul .course-li i{
display:inline-block;width:6px;height:12px;
position:absolute;top:18px;right:16px;
background:url("picture/button.png");
background-position:-147px -163px;
}
.li-hover{
background-position:-157px -163px;
}
.big-banner-ul ul .course-li .course-hot{
display:inline-block;height:21px;
margin-right:8px;color:#97d2f7;text-decoration:none;
font-size:14px;margin-top:5px;
}
.big-banner-ul ul .course-li .course-hot:hover{
text-decoration:underline;
}
.big-banner-ul .course-list{
width:446px;position:absolute;
top:0;left:220px;z-index:1;
background:rgba(255,255,255,0.95);
*background:#fff;
/*opacity:0.95;filter:alpha(opacity=95);*/
border:2px solid #09699c;display:none
}
.big-banner-ul .course-list ul{
width:382px;
margin:0 auto;list-style:none;
}
.big-banner-ul .course-list ul li{
border-bottom:1px solid #e5e5e5;
width:382px;padding:15px 0 12px;
}
.big-banner-ul .course-list ul li .course-child{
color:#039ae3;font-weight:bold;font-size:14px;
text-decoration:none;width:80px;float:left;
margin-top:1px;
}
.big-banner-ul .course-list .course-child-list{
width:297px;
display:inline-block;
}
.big-banner-ul .course-list .course-child-list a{
display:inline-block;width:91px;height:21px;
text-decoration:none;color:#333;font-size:14px;
margin-bottom:3px;
}
.big-banner-ul .course-list .course-child-list a:hover{
color:#63b6f7;
}
/*end big-banner-ul*/
/*big-banner-img start*/
.banner .big-bg .big-banner .big-banner-img{
width:760px;height:300px;overflow:hidden;
position:absolute;top:0;left:220px;*z-index:-1
}
.banner .big-bg .big-banner .big-banner-img #ban-ul li{
list-style:none;float:left;
}
.img-hide{
display:none;
}
.on{
display:block;
}
.big-banner-img #ban-nav{
width:140px;height:24px;position:absolute;
bottom:15px;left:50%;list-style:none;
margin-left:-70px;border-radius:24px;
background:rgba(0,0,0,0.1);
/*opacity:0.9;filter:alpha(opacity=90);*/
}
.big-banner-img #ban-nav li{
float:left;width:10px;height:10px;
margin:8px -17px 0 25px;
background:url("picture/button.png");
background-position:-87px -116px;
}
.ban-button{
display:none;width:46px;height:70px;position:absolute;
top:110px;background:url("picture/button.png");
}
.ban-pre{
left:10px;
background-position:-74px 0;
}
.ban-next{
right:10px;
background-position:-123px 0;
}
/*end *big-banner-img */
/*big-banner-board start*/
.banner .big-bg .big-banner .big-banner-board{
width:220px;height:260px;position:absolute;
top:20px;right:0;background: rgba(0,0,0,0.4);
/*opacity:0.8;filter:alpha(opacity=80);*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
}
.banner .big-bg .big-banner .big-banner-board ul{
list-style:square;padding:0 0 0 15px ;margin-left:20px;
font-size:14px;
}
.big-banner-board ul li{
padding:13px 0 1px;color:white;
}
.big-banner-board a{
color:white;text-decoration:none;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000)
}
.big-banner-board div{
color:white;position:relative;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000)
}
.big-banner-board ul li a:hover{
text-decoration:underline;
}
.big-banner-board .button{
width:110px;height:110px;text-align:center;
display:inline-block;margin-top:14px;float:left;
background:rgba(0,0,0,0.2);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000)
/*opacity:0.8;filter:alpha(opacity=80);*/
}
.big-banner-board .button:hover{
background:rgba(0,0,0,0.3);
/*opacity:0.7;filter:alpha(opacity=70);*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)
}
.big-banner-board .button i{
display:inline-block;width:44px;height:44px;
margin-top:10px;margin-right:2px;
}
.big-banner-board .button .download{
background:url("picture/button.png");
background-position:-123px -73px;
}
.big-banner-board .button i + p{
font-size:16px;margin-top:3px;margin-bottom:2px
}
.big-banner-board .button .weixin{
background:url("picture/button.png");
background-position:-172px -73px;
}
.big-banner-board #board-qr img{
position:absolute;top:-7px;left:-112px;
display:none;
}
/*end big-banner-board*/
/*end big-banner*/
/*end banner*/
/*course-actives start*/
.course-actives{
width:980px;height:125px;margin:0 auto;
border-right:1px solid #eaeaea;
border-bottom:1px solid #eaeaea;
padding-left:220px;
}
.course-actives a{
display:inline-block;margin-left: 0px;
margin-right: -4px;
}
/*end course-actives*/
/*course_hot start*/
.course_hot{
width:1200px;height:481px;margin:0 auto;padding:40px 0 20px 0;
}
.course_hot1{
height:280px;
}
.first-course{
height:271px
}
.course_hot .course-hot-nav{
width:1200px;height:40px;border-bottom:1px solid #ddd;
position:relative;
}
.course_hot .course-hot-nav h2{
font-weight:normal;height:36px;float:left;
}
.course_hot .course-hot-nav h2 .hot-tittle{
font-size:22px;width:222px;line-height:24px;
display:inline-block;color:#202020;
text-decoration:none;
}
.course_hot .course-hot-nav h2 .hot-tittle:hover{
color:#62b4f7
}
.course_hot .course-hot-nav h2 .hot-tittle2{
width:466px;
}
.course_hot .course-hot-nav ul{
float:left;width:970px;height:36px;
}
.course_hot .course-hot-nav .job-menu{
width:730px
}
.course_hot .course-hot-nav ul li{
float:left;list-style:none;font-size:14px;height:40px;
}
.course_hot .course-hot-nav ul li a{
text-decoration:none;display:block;width:90px;
text-align:center;color:#333;margin-top:8px;
}
.course_on{
color:#188eee;
}
.course_li_on{
border-bottom:2px solid #188eee;
}
.course_hot .course-hot-nav ul li a i{
width:18px;height:18px;display:inline-block;
background:url("picture/button.png");
background-position:-49px -99px;
margin-right:5px;vertical-align:-4px;
*height:22px;
}
.course_hot .course-hot-menu{
padding-top:30px;height:200px;
}
.course_hot .course-hot-menu ul{
list-style:none;width:1220px;height:200px;
}
.course_hot .course-hot-menu ul li{
float:left; width:220px;height:124px;
margin-left:-10px;margin-right:34px;
}
.course_hot .menu-course-card{
width:232px;height:180px;border:1px solid transparent;
padding:10px 0px 8px 11px;font-size:14px;
}
.course_hot .menu-course-card:hover{
border:1px solid #dddddd;
}
.course_hot .menu-course-card .course-img{
display:block;width:220px;height:124px;position:relative;
}
.course_hot .menu-course-card .course-img .icon-card-play{
position:absolute;background:url("picture/icon-card-play.png");
width:30px;height:30px;bottom:10px;left:10px;
}
.course-description{
display:block;color:#333;
white-space:nowrap;text-overflow:ellipsis;width:220px;padding-top:8px;
overflow:hidden;text-decoration:none;
}
.course_hot .menu-course-card .course-description:hover{
color:#62B4F7;
}
.course_hot .menu-course-card p{
padding-top:2px;color:#dedede;
}
.course_hot .menu-course-card .free{
color:#5FB41B;display:inline-block;vertical-align:4px;
*height:16px;
}
.course_hot .menu-course-card .charge{
color:#E85308;vertical-align:4px;margin-right:9px;*display:inline-block;*height:16px
}
.course_hot .menu-course-card .symbol{
display:inline-block;vertical-align:4px;margin-right:4px;
*height:16px;
}
.course_hot .menu-course-card p a{
color:#999;margin-left:7px;text-decoration:none;display:inline-block;overflow:hidden;
white-space:nowrap;text-overflow:ellipsis;width:128px;
}
.course_hot .menu-course-card p a:hover{
color:#62B4F7;
}
/*end course_hot*/
/*catalog start*/
.course_hot .catalog-menu{
height:200px;margin-top:-2px;position:relative
}
.course_hot .box{
border-bottom:0;
}
.course_hot .catalog-menu .mod-catalog-box{
display:inline-block;width:240px;height:420px;float:left;
margin-left:-20px;position:absolute;top:1px;left:0;
}
.course_hot .catalog-menu .mod-catalog-box2{
margin-left:0;height:220px;
}
.course_hot .catalog-menu .catalog-menu-div ul{
list-style:none;width:734px;float:left;
margin-top:20px;margin-left:242px;
}
.course_hot .catalog-menu .catalog-menu-div .catalog-menu-ul{
margin-left:491px;
}
.course_hot .catalog-menu .catalog-menu-div ul li{
float:left; width:220px;height:124px;
margin:0 34px 76px -10px;
}
.course_hot .menu-course-card{
width:232px;height:180px;border:1px solid transparent;
padding:10px 0px 8px 11px;font-size:14px;
}
.course_hot .menu-course-card:hover{
border:1px solid #dddddd;
}
.course_hot .menu-course-card .course-img{
display:block;width:220px;height:124px;position:relative;
}
.course_hot .menu-course-card .course-img .icon-card-play{
position:absolute;background:url("picture/icon-card-play.png");
width:30px;height:30px;bottom:10px;left:10px;
}
.course_hot .menu-course-card .course-description{
display:block;color:#333;
white-space:nowrap;text-overflow:ellipsis;width:220px;padding-top:8px;
overflow:hidden;text-decoration:none;
}
.course_hot .menu-course-card .course-description:hover{
color:#62B4F7;
}
.course_hot .menu-course-card p{
padding-top:2px;color:#dedede;
}
.free{
color:#5FB41B;display:inline-block;vertical-align:4px;
*height:16px;
}
.charge{
color:#E85308;vertical-align:4px;margin-right:9px;*display:inline-block;*height:16px
}
.course_hot .menu-course-card .symbol{
display:inline-block;vertical-align:4px;margin-right:4px;
*height:16px;
}
.course_hot .menu-course-card p a{
color:#999;margin-left:7px;text-decoration:none;display:inline-block;overflow:hidden;
white-space:nowrap;text-overflow:ellipsis;width:128px;
}
.course_hot .menu-course-card p a:hover{
color:#62B4F7;
}
.course_hot .catalog-menu .course-rank{
width:242px;height:390px;float:right;
margin-top:28px;margin-right:-24px;
}
.course_hot .catalog-menu .rank-type{
width:218px;height:29px;list-style:none;
border-bottom:1px solid #dfdfdf;margin-top:3px;
}
.course_hot .catalog-menu .rank-type li{
float:left;height:29px;text-align:center;
width:105px;font-size:16px;
color:#999;padding-left:1px
}
.course_hot .catalog-menu .rank-type li:last-child{
padding-left:5px
}
.rank-type-sel{
color:#331 ! important;border-bottom:1px solid #188eee
}
.course_hot .catalog-menu .course-rank .rank-menu{
margin-right:1px;width:242px;
}
.course_hot .catalog-menu .course-rank .rank-menu ul{
list-style:none;text-align:center;margin-top:10px;margin-left:-11px
}
.course-rank .rank-menu .rank-menu-ul li{
width:218px;height:32px;padding:0 12px;line-height:26px;
}
.course-rank .rank-menu .rank-menu-ul li:hover{
background:#e5e5e5;
}
.course-rank .rank-menu .rank-menu-ul .rank-menu-li-first{
height:83px;padding:6px 12px;
}
.course-rank .rank-menu .rank-menu-ul li .rank-menu-num{
display:inline-block;width:18px;height:18px;
background:url("picture/button.png");float:left;margin-left:1px;
}
.course-rank .rank-menu .rank-menu-ul li .rank-menu-num-1{
background-position:-105px -163px;margin:5px 11px 0 -1px;
}
.course-rank .rank-menu .rank-menu-ul li .rank-menu-num-2{
background-position:-84px -163px;margin:7px 14px 0 -1px;
}
.course-rank .rank-menu .rank-menu-ul li .rank-menu-num-3{
background-position:-21px -163px;margin:7px 14px 0 -1px;
}
.course-rank .rank-menu .rank-menu-ul li .rank-menu-num-4{
background-position:-174px -130px;margin:7px 14px 0 -1px;
}
.course-rank .rank-menu .rank-menu-ul li .rank-menu-num-5{
background-position:-49px -57px;margin:7px 14px 0 -1px;
}
.course-rank .rank-menu .rank-menu-ul li .rank-menu-num-6{
background-position:0 -163px;margin:7px 14px 0 -1px;
}
.course-rank .rank-menu .rank-menu-ul li .rank-menu-num-7{
background-position:-63px -163px;margin:7px 14px 0 -1px;
}
.course-rank .rank-menu .rank-menu-ul li .rank-menu-num-8{
background-position:-42px -163px;margin:7px 14px 0 -1px;
}
.course-rank .rank-menu .rank-menu-ul li .rank-menu-num-9{
background-position:-195px -130px;margin:7px 14px 0 -1px;
}
.rank-menu-num-1,.rank-menu-num-2,.rank-menu-num-3,.rank-menu-num-4,.rank-menu-num-5,.rank-menu-num-6,.rank-menu-num-7,.rank-menu-num-8,.rank-menu-num-9{
*margin-right:1px
}
.course-rank .rank-menu .rank-menu-ul .rank-menu-li-first .rank-menu-content{
display:inline-block;width:184px;height:84px;
float:left;
}
.rank-description{
display:block;color:#333;font-size:14px;
white-space:nowrap;text-overflow:ellipsis;width:180px;
overflow:hidden;text-decoration:none;margin-left:3px;
margin-bottom:3px;*margin-left:-5px;text-align:left;
}
.rank-description-other{
line-height:31px;text-align:left;
}
.course-rank .rank-menu .rank-menu-ul .rank-menu-li-first .rank-menu-content .rank-free-img{
*float:left;
}
.course-rank .rank-menu .rank-menu-ul .rank-menu-li-first .rank-menu-content span{
font-size:14px; display:block;margin-top:-1px;margin-bottom:3px;
}
.course-rank .rank-menu .rank-menu-ul .rank-menu-li-first .rank-menu-content .rank-college{
color:#999;text-decoration:none;display:inline-block;overflow:hidden;
white-space:nowrap;text-overflow:ellipsis;margin-left:-6px;
}
.course-rank .rank-menu .rank-menu-ul .rank-menu-li-first .rank-menu-content .rank-menu-course{
float:right;width:96px;margin-left:-8px;
}
/*end catalog*/
/*agency-div start*/
.agency-div{
height:95px;padding:80px 33px;
width:1200px;
}
.agency-div .agency-apply{
width:96px;height:96px;float:left;
}
.agency-apply h3{
font-size:22px;font-weight:normal;margin-top:21px;
margin-bottom:4px;display:block
}
.agency-div .apply{
font-size:14px;color:#188eee;
text-decoration:none;
}
.agency-div .agency-list{
width:1090px;height:92px;margin-left:14px;
float:left;position:relative;overflow:hidden;
}
.agency-pre,.agency-next{
width:26px;height:30px;display:block;position:absolute;
top:35px;background:url("picture/button.png");
}
.agency-list .agency-pre{
left:0px;background-position:-58px -130px;
}
.agency-list ul{
list-style:none;margin-left:45px;position:absolute;
}
.agency-list ul li{
float:left;padding-right:26px;
}
.agency-list ul li a{
display:inline-block;border:1px solid #eee;
}
.agency-list .agency-next{
right:0px;background-position:-116px -130px;
}
/*end agency-div*/
/*cooperation-div start*/
.cooperation-div{
width:1200px;height:250px;background:#444546;
padding:41px 33px;
}
.cooperation-div h3{
font-size:22px;color:#999;font-weight:normal;
}
.cooperation-div ul{
list-style:none;margin-top:27px;border-bottom:1px solid #4a4b4c;height:53px;
}
.cooperation-div ul li{
float:left;margin-right:40px;
}
.cooperation-div ul li a{
text-decoration:none;color:#999;font-size:14px
}
.cooperation-div ul li a:hover{
text-decoration:underline;
}
.cooperation-div .icon-logo-bottom{
margin:0 auto;width:42px;height:32px;display:block;
background:url("picture/icon_logo_bottom.png");
margin-top:40px;margin-bottom:5px;
}
.cooperation-div p{
text-align:center;color:#777;line-height:24px;
}
/*end cooperation-div*/
/*jump-container start*/
.jump-container{
width:50px;height:120px;position:fixed;
right:20px;bottom:50px;
}
.jump-top,.support{
display:block;
}
.jump-container .jump-container-div div{
width:50px;height:82px;overflow:hidden;cursor:pointer;position:absolute;top:0
}
.jump-container div .jump-plane{
background:url("picture/jump-plane.png") no-repeat;
display:block;width:42px;height:56px;position:absolute;top:82px;left:3px
}
.jump-top{
width:42px;height:56px;opacity:0;filter:alpha(opacity=0);
background:url("picture/bg-side-jump.png") no-repeat;
background-position:0px 7px;
margin-top:23px;margin-left:4px
}
.jump-top-hover{
background:url("picture/bg-side-jump-hover.png") no-repeat;
background-position:-4px -25px
}
.support{
width:40px;height:40px;
background:url("picture/button.png") no-repeat;
background-position:-74px -73px;margin-top:3px;
margin-left:5px;position:absolute;
}
.jump-container span{
position:absolute;z-index:2;line-height:18px;color:white;
width:40px;height:40px;font-size:14px;text-align:center;
background:#188eee;margin-top:3px;margin-left:5px;cursor:pointer;display:none
}
/*end jump-container*/
</style>
</head>
<body>
<!--header start-->
<div class="header">
<h1>
<a><img src="picture/bg-logo.png" alt="鑵捐璇惧爞" width="288" height="38"></a>
</h1>
<div class="search">
<input type="text" placeholder="鎼滅储璇剧▼">
<a href="#"><i></i></a>
</div>
<div class="login">
<a href="#" style="margin-right:5px">鐧诲綍</a> | <a href="#">甯姪</a>
</div>
<div class="clear"></div>
</div>
<!--end header-->
<!--banner start-->
<div class="banner">
<!--little-banner start-->
<div class="little-banner">
<a href="#"><img src="picture/banner-yunying-2.jpg" alt="缇や富璁㈤槄璇剧▼锛屾娊濂栦韩澶хぜ" width="760" width="50" border="0"></a>
</div>
<!--big-banner start-->
<div class="big-bg">
<div class="big-banner">
<!--big-banner-ul start-->
<div class="big-banner-ul">
<a href="#" id="course" class="course">
<i></i><span>鍏ㄩ儴璇剧▼</span>
</a>
<ul>
<li class="course-li">
<a href="#" class="course">鑱屼笟鎶€鑳?lt;/a><i></i>
<a href="#" class="course-hot">鑱屽満鎶€鑳?lt;/a>
<a href="#" class="course-hot">SNS钀ラ攢</a>
<a href="#" class="course-hot">鍏姟鍛?lt;/a>
<div class="course-list">
<ul>
<li>
<a href="#" class="course-child">鑱屽満/姹傝亴</a>
<div class="course-child-list">
<a href="#">灏变笟鎸囧</a>
<a href="#">鑱屼笟瑙勫垝</a>
<a href="#">鑱屽満鎶€鑳?lt;/a>
<a href="#">浼佷笟鍩硅</a>
<a href="#">鍒涗笟鎸囧</a>
</div>
</li>
<li>
<a href="#" class="course-child">甯傚満钀ラ攢</a>
<div class="course-child-list">
<a href="#">娣樺疂钀ラ攢</a>
<a href="#">缃戠粶鎺ㄥ箍</a>
<a href="#">SNS钀ラ攢</a>
<a href="#">SEO/SEM</a>
</div>
</li>
<li>
<a href="#" class="course-child">鑱屼笟绫昏€冭瘯</a>
<div class="course-child-list">
<a href="#">鍏姟鍛?lt;/a>
<a href="#">璐細绫?lt;/a>
<a href="#">寤虹瓚绫?lt;/a>
<a href="#">閲戣瀺绫?lt;/a>
<a href="#">鍏朵粬鑰冭瘯</a>
</div>
</li>
<li>
<a href="#" class="course-child">鍏朵粬鎶€鑳?lt;/a>
<div class="course-child-list">
<a href="#">缇庡鍩硅</a>
<a href="#">姹借溅缁翠慨</a>
<a href="#">鍏朵粬</a>
</div>
</li>
</ul>
</div>
</li>
<li class="course-li">
<a href="#" class="course">IT鍩硅</a><i></i>
<a href="#" class="course-hot">缃戠珯鍒朵綔</a>
<a href="#" class="course-hot">鎵嬫満寮€鍙?lt;/a>
<a href="#" class="course-hot">娓告垙鍒朵綔</a>
<div class="course-list" style="height:332px">
<ul>
<li>
<a href="#" class="course-child">缂栫▼寮€鍙?lt;/a>
<div class="course-child-list">
<a href="#">缃戠珯鍒朵綔</a>
<a href="#">娓告垙寮€鍙?lt;/a>
<a href="#">鎵嬫満寮€鍙?lt;/a>
<a href="#">鏁版嵁搴?lt;/a>
<a href="#">缂栫▼璇█</a>
</div>
</li>
<li>
<a href="#" class="course-child">宸ュ叿杞欢</a>
<div class="course-child-list">
<a href="#">缃戦〉鍒朵綔</a>
<a href="#">缃戦〉/骞抽潰璁捐</a>
<a href="#">瀹ゅ唴/寤虹瓚璁捐</a>
<a href="#">鏈烘/妯″叿璁捐</a>
<a href="#">娓告垙鍒朵綔</a>
<a href="#">瑙嗛澶勭悊</a>
<a href="#">鍔炲叕</a>
<a href="#">鍏朵粬</a>
</div>
</li>
<li>
<a href="#" class="course-child">娓告垙璁捐</a>
<div class="course-child-list">
<a href="#">鍘熺敾璁捐</a>
<a href="#">浜у搧璁捐</a>
</div>
</li>
<li>
<a href="#" class="course-child">鍔ㄦ极鍒朵綔</a>
<div class="course-child-list">
<a href="#">鍔ㄦ极鍒朵綔</a>
</div>
</li>
<li>
<a href="#" class="course-child">鍏朵粬</a>
<div class="course-child-list">
<a href="#">鍏朵粬</a>
</div>
</li>
</ul>
</div>
</li>
<li class="course-li">
<a href="#" class="course">璇█瀛︿範</a><i></i>
<a href="#" class="course-hot">鑻辫鍙ｈ</a>
<a href="#" class="course-hot">鏃ヨ</a>
<a href="#" class="course-hot">闊╄</a>
<div class="course-list">
<ul>
<li>
<a href="#" class="course-child">鑻辫鍙ｈ</a>
<div class="course-child-list">
<a href="#">鍒濈骇鍏ラ棬</a>
<a href="#">鑻辫璇硶</a>
<a href="#">闊虫爣璇嶆眹</a>
<a href="#">鍙ｈ杩涢樁</a>
<a href="#">鏃呰鑻辫</a>
</div>
</li>
<li>
<a href="#" class="course-child">鑻辫鑰冭瘯</a>
<div class="course-child-list">
<a href="#">鍥?鍏骇</a>
<a href="#">鑰冪爺鑻辫</a>
<a href="#">鑷€?鑱岀О鑻辫</a>
<a href="#">鍏朵粬</a>
</div>
</li>
<li>
<a href="#" class="course-child">鐣欏鑻辫</a>
<div class="course-child-list">
<a href="#">闆呮€?lt;/a>
<a href="#">鎵樼</a>
<a href="#">SAT</a>
<a href="#">GRE/GMAT</a>
<a href="#">鐣欏鎸囧</a>
<a href="#">鍏朵粬</a>
</div>
</li>
<li>
<a href="#" class="course-child">鍟嗗姟鑻辫</a>
<div class="course-child-list">
<a href="#">鑱屽満鑻辫</a>
<a href="#">琛屼笟鑻辫</a>
<a href="#">鍏朵粬</a>
</div>
</li>
<li>
<a href="#" class="course-child">姹夎</a>
<div class="course-child-list">
<a href="#">鏅€氳瘽</a>
<a href="#">绮よ</a>
</div>
</li>
<li>
<a href="#" class="course-child">闊╄</a>
<div class="course-child-list">
<a href="#">鏅€氳瘽</a>
<a href="#">绮よ</a>
</div>
</li>
<li>
<a href="#" class="course-child">鏃ヨ</a>
<div class="course-child-list">
<a href="#">鍒濈骇鍏ラ棬</a>
<a href="#">鏃ヨ杩涢樁</a>
</div>
</li>
<li>
<a href="#" class="course-child">鍏朵粬</a>
<div class="course-child-list">
<a href="#">鍏朵粬</a>
</div>
</li>
</ul>
</div>
</li>
<li class="course-li">
<a href="#" class="course">涓皬瀛?澶у</a><i></i>
<a href="#" class="course-hot">鑰冪爺/鑷€?lt;/a>
<a href="#" class="course-hot">涓€冨鎴?lt;/a>
<div class="course-list">
<ul>
<li>
<a href="#" class="course-child">灏忓</a>
<div class="course-child-list">
<a href="#">璇枃</a>
<a href="#">鏁板</a>
<a href="#">鑻辫</a>
<a href="#">鍏朵粬</a>
</div>
</li>
<li>
<a href="#" class="course-child">鍒濅腑</a>
<div class="course-child-list">
<a href="#">璇枃</a>
<a href="#">鏁板</a>
<a href="#">鑻辫</a>
<a href="#">鐞嗙患</a>
<a href="#">鏂囩患</a>
<a href="#">鍏朵粬</a>
</div>
</li>
<li>
<a href="#" class="course-child">楂樹腑</a>
<div class="course-child-list">
<a href="#">璇枃</a>
<a href="#">鏁板</a>
<a href="#">鑻辫</a>
<a href="#">鐞嗙患</a>
<a href="#">鏂囩患</a>
<a href="#">鍏朵粬</a>
</div>
</li>
<li>
<a href="#" class="course-child">灏忓崌鍒濆鎴?lt;/a>
<div class="course-child-list">
<a href="#">灏忓崌鍒濆鎴?lt;/a>
</div>
</li>
<li>
<a href="#" class="course-child">涓€冨鎴?lt;/a>
<div class="course-child-list">
<a href="#">涓€冨鎴?lt;/a>
</div>
</li>
<li>
<a href="#" class="course-child">楂樿€冨鎴?lt;/a>
<div class="course-child-list">
<a href="#">楂樿€冨鎴?lt;/a>
</div>
</li>
<li>
<a href="#" class="course-child">鑰冪爺/鑷€?lt;/a>
<div class="course-child-list">
<a href="#">鑰冪爺/鑷€?lt;/a>
</div>
</li>
</ul>
</div>
</li>
<li class="course-li">
<a href="#" class="course">鍏磋叮鐖卞ソ</a><i></i>
<a href="#" class="course-hot">鎶曡祫鐞嗚储</a>
<a href="#" class="course-hot">缇庡</a>
<a href="#" class="course-hot">鎽勫奖</a>
<div class="course-list">
<ul>
<li>
<a href="#" class="course-child">鎶曡祫鐞嗚储</a>
<div class="course-child-list">
<a href="#">鎶曡祫鐞嗚储</a>
</div>
</li>
<li>
<a href="#" class="course-child">鐢熸椿鐧剧</a>
<div class="course-child-list">
<a href="#">濠氭亱</a>
<a href="#">缇庡</a>
<a href="#">瀹惰</a>
<a href="#">椋庢按</a>
<a href="#">鍏朵粬</a>
</div>
</li>
<li>
<a href="#" class="course-child">鏂囧寲鑹烘湳</a>
<div class="course-child-list">
<a href="#">鍞辨瓕</a>
<a href="#">鑸炶箞</a>
<a href="#">涔︾敾</a>
<a href="#">涔愬櫒</a>
<a href="#">鎽勫奖</a>
<a href="#">鍏朵粬</a>
</div>
</li>
<li>
<a href="#" class="course-child">鏃跺皻鍋ュ悍</a>
<div class="course-child-list">
<a href="#">鏄熷骇</a>
<a href="#">鐟滀冀</a>
<a href="#">鍏荤敓</a>
<a href="#">鍏朵粬</a>
</div>
</li>
</ul>
</div>
</li>
<li class="course-li">
<a class="course">浜插瓙璇惧爞</a><i></i>
<a href="#" class="course-hot">骞煎効鏁欒偛</a>
<a href="#" class="course-hot">瀹堕暱璁粌钀?lt;/a>
<div class="course-list">
<ul>
<li>
<a href="#" class="course-child">骞煎効鏁欒偛</a>
<div class="course-child-list">
<a href="#">骞煎効鏁欒偛</a>
</div>
</li>
<li>
<a href="#" class="course-child">瀛﹀墠鏃╂暀</a>
<div class="course-child-list">
<a href="#">瀛﹀墠鏃╂暀</a>
</div>
</li>
<li>
<a href="#" class="course-child">瀹堕暱璁粌钀?lt;/a>
<div class="course-child-list">
<a href="#">瀹堕暱璁粌钀?lt;/a>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!--end big-banner-ul-->
<!--big-banner-img start-->
<div class="big-banner-img">
<ul id="ban-ul">
<li>
<a href="#" class="on">
<img src="picture/banner-1.jpg" alt="搴旇瘯瀹? width="760" height="300" border="0">
</a>
</li>
<li>
<a href="#" class="img-hide">
<img src="picture/banner-2.jpg" alt="涓叕-閲戣瀺浜? width="760" height="300" border="0">
</a>
</li>
<li>
<a href="#" class="img-hide">
<img src="picture/banner-3.jpg" alt="娼窞瀛﹂櫌" width="760" height="300" border="0">
</a>
</li>
<li>
<a href="#" class="img-hide">
<img src="picture/banner-4.jpg" alt="閭㈠竻鏁欒偛" width="760" height="300" border="0">
</a>
</li>
<li>
<a href="#" class="img-hide">
<img src="picture/banner-5.jpg" alt="浜戜腑甯嗘暀鑲? width="760" height="300" border="0">
</a>
</li>
</ul>
<ul id="ban-nav">
<li data-color="#a534d6"></li>
<li data-color="#3979ce"></li>
<li data-color="#4a4d9c"></li>
<li data-color="#523484"></li>
<li data-color="#009ee7"></li>
</ul>
<a href="javascript:void(0)" class="ban-button ban-pre"></a>
<a href="javascript:void(0)" class="ban-button ban-next"></a>
</div>
<!--end big-banner-img-->
<!--big-banner-board start-->
<div class="big-banner-board">
<ul>
<li><a href="#">2015鑰冪爺鑻辫鍚嶅笀瑙ｆ瀽</a></li>
<li><a href="#">鎵撶牬瀵屼笉杩囦笁浠ｇ殑榄斿拻</a></li>
<li><a href="#">缃戠珯鍒朵綔杈句汉鍒嗕韩</a></li>
<li><a href="#">娴峰綊鍨嬬敺鐨勪腑绉嬮倐閫?lt;/a></li>
</ul>
<a href="#" class="button"><i class="download"></i><p>涓嬭浇</p><p>涓撶敤QQ</p></a>
<div id="board-qr" class="button">
<i class="weixin"></i>
<p>鎵竴鎵?lt;/p><p>QQ鍏紬鍙?lt;/p>
<img src="picture/bg-board-qr.png" width="126" height="126">
</div>
<div class="clear"></div>
</div>
<!--end big-banner-board-->
</div>
</div>
<!--end big-banner-->
</div>
<!--end banner-->
<!--course-actives start-->
<div class="course-actives">
<a href="#"><img src="picture/yexuetang.jpg" alt="澶滃鍫? width="326" height="125" border="0"></a>
<a href="#"><img src="picture/yingfulunsi.jpg" alt="鑻辩浼︽柉" width="326" height="125" border="0"></a>
<a href="#"><img src="picture/korean.jpg" alt="闊╄" width="326" height="125" border="0"></a>
</div>
<!--end course-actives-->
<!--course-hot start-->
<div class="course_hot first-course">
<div class="course-hot-nav">
<h2><a href="#" class="hot-tittle">鐑棬璇剧▼</a></h2>
<ul id="course-type">
<li class="course_li_on"><a href="#" style="color:#188eee">鐩存挱璇?lt;/a></li>
<li><a href="#"><i id="video"></i>褰曟挱璇?lt;/a></li>
</ul>
</div>
<div class="course-hot-menu">
<ul>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/live1.jpg" alt="浼氳閭ｄ簺鍎夸簨鍎匡紝浼氳浠庝笟璇剧▼瓒ｈ" title="浼氳閭ｄ簺鍎夸簨鍎匡紝浼氳浠庝笟璇剧▼瓒ｈ" width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="浼氳閭ｄ簺鍎夸簨鍎匡紝浼氳浠庝笟璇剧▼瓒ｈ">浼氳閭ｄ簺鍎夸簨鍎匡紝浼氳浠庝笟璇剧▼瓒ｈ</a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="涓叕浼氳">涓叕浼氳</a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/live2.jpg" alt="鍥涘叚绾у悕甯堜綋楠岃" title="鍥涘叚绾у悕甯堜綋楠岃" width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="浼氳閭ｄ簺鍎夸簨鍎匡紝浼氳浠庝笟璇剧▼瓒ｈ">鍥涘叚绾у悕甯堜綋楠岃</a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="">搴旇瘯瀹?lt;/a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/live3.jpg" alt="鏂版爣鏃ュ垵绾т笂鍐? title="鏂版爣鏃ュ垵绾т笂鍐? width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="浼氳閭ｄ簺鍎夸簨鍎匡紝浼氳浠庝笟璇剧▼瓒ｈ">鏂版爣鏃ュ垵绾т笂鍐?lt;/a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="">澶╁拰鏅鸿儨鏁欒偛</a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/live4.png" alt="鎬庢牱鎴愪负涓€鍚嶅闇? title="鎬庢牱鎴愪负涓€鍚嶅闇? width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="浼氳閭ｄ簺鍎夸簨鍎匡紝浼氳浠庝笟璇剧▼瓒ｈ">鎬庢牱鎴愪负涓€鍚嶅闇?lt;/a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="">闃虫槑鏁欒偛</a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/live5.jpg" alt="Ps鏂囧瓧涓庡浘鐗囩粨鏋勬渚嬭搴с€愪簯涓竼鏁欒偛銆? title="Ps鏂囧瓧涓庡浘鐗囩粨鏋勬渚嬭搴с€愪簯涓竼鏁欒偛銆? width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="浼氳閭ｄ簺鍎夸簨鍎匡紝浼氳浠庝笟璇剧▼瓒ｈ">Ps鏂囧瓧涓庡浘鐗囩粨鏋勬渚嬭搴с€愪簯涓竼鏁欒偛銆?lt;/a>
<p><span class="charge">楼9.00</span><span class="symbol"> | </span><a href="#" title="">浜戜腑甯嗘暀鑲?lt;/a></p>
</div>
</li>
</ul>
<ul class="img-hide">
<li>
<div class="menu-course-card">
<a href="#" class="course-img">
<img src="picture/video1.jpg" alt="鑻辩浼︽柉Live Show" title="鑻辩浼︽柉Live Show" width="220" height="124" border="0">
<i class="icon-card-play"></i>
</a>
<a href="#" class="course-description" title="鑻辩浼︽柉Live Show">鑻辩浼︽柉Live Show</a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="">鑵捐璇惧爞銆愬畼鏂广€?lt;/a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img">
<img src="picture/video2.jpg" alt="涓€璧峰鍔ㄧ敾涔嬮€嗚娴疯醇鐜? title="涓€璧峰鍔ㄧ敾涔嬮€嗚娴疯醇鐜? width="220" height="124" border="0">
<i class="icon-card-play"></i>
</a>
<a href="#" class="course-description" title="涓€璧峰鍔ㄧ敾涔嬮€嗚娴疯醇鐜?>涓€璧峰鍔ㄧ敾涔嬮€嗚娴疯醇鐜?lt;/a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="">钃濋搮绗斿湪绾挎暀鑲?lt;/a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img">
<img src="picture/video3.jpg" alt="2澶╁浼氫簲鍗侀煶鍥俱€愭棭閬撴棩璇€? title="2澶╁浼氫簲鍗侀煶鍥俱€愭棭閬撴棩璇€? width="220" height="124" border="0">
<i class="icon-card-play"></i>
</a>
<a href="#" class="course-description" title="2澶╁浼氫簲鍗侀煶鍥俱€愭棭閬撴棩璇€?>2澶╁浼氫簲鍗侀煶鍥俱€愭棭閬撴棩璇€?lt;/a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="">鏃╅亾鏃ヨ缃戞牎</a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img">
<img src="picture/video4.jpg" alt="2014浼氳鑰冭瘉60涓繀鑰冪偣" title="2014浼氳鑰冭瘉60涓繀鑰冪偣" width="220" height="124" border="0">
<i class="icon-card-play"></i>
</a>
<a href="#" class="course-description" title="2014浼氳鑰冭瘉60涓繀鑰冪偣">2014浼氳鑰冭瘉60涓繀鑰冪偣</a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">| </span><a href="#" title="">瀵瑰晩缃?lt;/a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img">
<img src="picture/video5.jpg" alt="鏂版蹇佃嫳璇涓€鍐屽悓姝ワ紙鍏ラ棬锛? title="鏂版蹇佃嫳璇涓€鍐屽悓姝ワ紙鍏ラ棬锛? width="220" height="124" border="0">
<i class="icon-card-play"></i>
</a>
<a href="#" class="course-description" title="鏂版蹇佃嫳璇涓€鍐屽悓姝ワ紙鍏ラ棬锛?>鏂版蹇佃嫳璇涓€鍐屽悓姝ワ紙鍏ラ棬锛?lt;/a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">| </span><a href="#" title=""> 鍖椾含缃戣耽澶╁湴绉戞妧鏂囧寲浼犳挱鏈夐檺鍏徃</a></p>
</div>
</li>
</ul>
</div>
</div>
<!--end course-hot-->
<!--course_hot start-->
<div class="course_hot">
<div class="course-hot-nav">
<h2><a href="#" class="hot-tittle box">鑱屼笟鎶€鑳?lt;/a></h2>
<ul class="job-type">
<li class="course_li_on"><a href="#" style="color:#188eee">鎺ㄨ崘</a></li>
<li><a href="#">鑱屽満/姹傝亴</a></li>
<li><a href="#">鑱屼笟绫昏€冭瘯</a></li>
<li><a href="#">甯傚満钀ラ攢</a></li>
<li><a href="#">鏈€鏂板彂甯?lt;/a></li>
</ul>
</div>
<div class="catalog-menu">
<a href="#" class="mod-catalog-box"><img src="picture/catalog-box.png" alt="缃戠珯鍒朵綔闆跺熀纭€鍒伴」鐩疄鎴樼郴鍒楁暀瀛?" title="缃戠珯鍒朵綔闆跺熀纭€鍒伴」鐩疄鎴樼郴鍒楁暀瀛?" width="240" height="420" border="0"></a>
<div class="catalog-menu-div">
<ul>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/recommend1.jpg" alt="濡備綍鎵惧埌閫傚悎鑷韩鎬ф牸鐨勮亴涓氾紵" title="濡備綍鎵惧埌閫傚悎鑷韩鎬ф牸鐨勮亴涓氾紵" width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="濡備綍鎵惧埌閫傚悎鑷韩鎬ф牸鐨勮亴涓氾紵">濡備綍鎵惧埌閫傚悎鑷韩鎬ф牸鐨勮亴涓氾紵</a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="鑻辩洓缃?>鑻辩洓缃?lt;/a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/recommend2.jpg" alt="CAD鐭湡鍩硅閫熸垚/鎸戞垬鏈堣柂5000+" title="CAD鐭湡鍩硅閫熸垚/鎸戞垬鏈堣柂5000+" width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="CAD鐭湡鍩硅閫熸垚/鎸戞垬鏈堣柂5000+">CAD鐭湡鍩硅閫熸垚/鎸戞垬鏈堣柂5000+</a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="娼窞瀛﹂櫌">娼窞瀛﹂櫌</a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/recommend3.jpg" alt="宸ヤ笟绯诲垪鏇查潰宸ヤ笟寤烘ā绯荤粺鏁欑▼(rhino,鐘€鐗涳紝C4D锛? title="宸ヤ笟绯诲垪鏇查潰宸ヤ笟寤烘ā绯荤粺鏁欑▼(rhino,鐘€鐗涳紝C4D锛? width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="宸ヤ笟绯诲垪鏇查潰宸ヤ笟寤烘ā绯荤粺鏁欑▼(rhino,鐘€鐗涳紝C4D锛?>宸ヤ笟绯诲垪鏇查潰宸ヤ笟寤烘ā绯荤粺鏁欑▼(rhino,鐘€鐗涳紝C4D锛?lt;/a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="閭㈠竻鏁欒偛">閭㈠竻鏁欒偛</a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/recommend4.jpg" alt="寰俊鍏紬骞冲彴鍏ラ棬鍒扮簿閫? title="寰俊鍏紬骞冲彴鍏ラ棬鍒扮簿閫? width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="寰俊鍏紬骞冲彴鍏ラ棬鍒扮簿閫?>寰俊鍏紬骞冲彴鍏ラ棬鍒扮簿閫?lt;/a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="瀹岀編缃戠粶">瀹岀編缃戠粶</a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/recommend5.jpg" alt="100%鎵惧埌濂藉伐浣滅殑绉樿瘈" title="100%鎵惧埌濂藉伐浣滅殑绉樿瘈" width="220" height="124" border="0">
<i class="icon-card-play"></i>
</a>
<a href="#" class="course-description" title="100%鎵惧埌濂藉伐浣滅殑绉樿瘈">100%鎵惧埌濂藉伐浣滅殑绉樿瘈</a>
<p><span class="free" style="margin-right:9px">鍏嶈垂</span><span class="symbol">|</span><a href="#" title="杈炬ⅵ鏁欒偛">杈炬ⅵ鏁欒偛</a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/recommend6.jpg" alt="鏁欏笀璧勬牸鑰冭瘯锛?014骞撮浂鍩虹绮捐璇剧▼锛夈€愪腑澶х綉鏍°€? title="鏁欏笀璧勬牸鑰冭瘯锛?014骞撮浂鍩虹绮捐璇剧▼锛夈€愪腑澶х綉鏍°€? width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="鏁欏笀璧勬牸鑰冭瘯锛?014骞撮浂鍩虹绮捐璇剧▼锛夈€愪腑澶х綉鏍°€?>鏁欏笀璧勬牸鑰冭瘯锛?014骞撮浂鍩虹绮捐璇剧▼锛夈€愪腑澶х綉鏍°€?lt;/a>
<p><span class="free" style="margin-right:9px">鍏嶈垂</span><span class="symbol">|</span><a href="#" title="涓ぇ缃戞牎">涓ぇ缃戞牎</a></p>
</div>
</li>
</ul>
<ul class="img-hide">
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/jobmarket1.jpg" alt="浼犵粺閿€鍞彂灞曚箣閬擄紵閿€鍞汉鍛樺浣曞偓娆撅紵濡備綍鍒╃敤浜掕仈缃戝仛浼犵粺閿€鍞? title="浼犵粺閿€鍞彂灞曚箣閬擄紵閿€鍞汉鍛樺浣曞偓娆撅紵濡備綍鍒╃敤浜掕仈缃戝仛浼犵粺閿€鍞? width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="浼犵粺閿€鍞彂灞曚箣閬擄紵閿€鍞汉鍛樺浣曞偓娆撅紵濡備綍鍒╃敤浜掕仈缃戝仛浼犵粺閿€鍞?>浼犵粺閿€鍞彂灞曚箣閬擄紵閿€鍞汉鍛樺浣曞偓娆撅紵濡備綍鍒╃敤浜掕仈缃戝仛浼犵粺閿€鍞?lt;/a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="閭㈠竻鏁欒偛">閭㈠竻鏁欒偛</a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/jobmarket2.jpg" alt="浜洪檯鍏崇郴鍜屾惌璁矡閫氭妧宸с€愭江宸炲闄€? title="浜洪檯鍏崇郴鍜屾惌璁矡閫氭妧宸с€愭江宸炲闄€? width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="浜洪檯鍏崇郴鍜屾惌璁矡閫氭妧宸с€愭江宸炲闄€?>浜洪檯鍏崇郴鍜屾惌璁矡閫氭妧宸с€愭江宸炲闄€?lt;/a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="娼窞瀛﹂櫌">娼窞瀛﹂櫌</a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/jobmarket3.jpg" alt="缃戠珯鍒朵綔瀹炴垬鏁欏-鎶€鏈€荤洃甯︿綘鎷夸笅楂樺伐璧? title="缃戠珯鍒朵綔瀹炴垬鏁欏-鎶€鏈€荤洃甯︿綘鎷夸笅楂樺伐璧? width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="缃戠珯鍒朵綔瀹炴垬鏁欏-鎶€鏈€荤洃甯︿綘鎷夸笅楂樺伐璧?>缃戠珯鍒朵綔瀹炴垬鏁欏-鎶€鏈€荤洃甯︿綘鎷夸笅楂樺伐璧?lt;/a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="娼窞瀛﹂櫌">娼窞瀛﹂櫌</a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/jobmarket4.jpg" alt="銆愯亴鍦恒€佺敓娲诲繀澶囥€戠敓娲绘棤澶勪笉閿€鍞紝閿€鍞汉鍛樹笟缁╁€嶅鐨勭璇€" title="銆愯亴鍦恒€佺敓娲诲繀澶囥€戠敓娲绘棤澶勪笉閿€鍞紝閿€鍞汉鍛樹笟缁╁€嶅鐨勭璇€" width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="銆愯亴鍦恒€佺敓娲诲繀澶囥€戠敓娲绘棤澶勪笉閿€鍞紝閿€鍞汉鍛樹笟缁╁€嶅鐨勭璇€">銆愯亴鍦恒€佺敓娲诲繀澶囥€戠敓娲绘棤澶勪笉閿€鍞紝閿€鍞汉鍛樹笟缁╁€嶅鐨勭璇€</a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="閭㈠竻鏁欒偛">閭㈠竻鏁欒偛</a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/jobmarket5.jpg" alt="蹇冪悊淇蹇冪伒闇€瑕佷竴娆℃梾琛屾櫤鎱х簿鍝佸叕寮€璇? title="蹇冪悊淇蹇冪伒闇€瑕佷竴娆℃梾琛屾櫤鎱х簿鍝佸叕寮€璇? width="220" height="124" border="0">
<i class="icon-card-play"></i>
</a>
<a href="#" class="course-description" title="蹇冪悊淇蹇冪伒闇€瑕佷竴娆℃梾琛屾櫤鎱х簿鍝佸叕寮€璇?>蹇冪悊淇蹇冪伒闇€瑕佷竴娆℃梾琛屾櫤鎱х簿鍝佸叕寮€璇?lt;/a>
<p><span class="free" style="margin-right:9px">鍏嶈垂</span><span class="symbol">|</span><a href="#" title="閭㈠竻鏁欒偛">閭㈠竻鏁欒偛</a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/recommend5.jpg" alt="100%鎵惧埌濂藉伐浣滅殑绉樿瘈" title="100%鎵惧埌濂藉伐浣滅殑绉樿瘈" width="220" height="124" border="0">
<!doctype html>
<html>
<head>
<!--澹版槑褰撳墠椤甸潰鐨勭紪鐮侀泦锛歝harset=gbk,gb2312(涓枃缂栫爜)锛寀tf-8鍥介檯缂栫爜-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--褰撳墠椤甸潰鐨勪笁瑕佺礌-->
<title>鑵捐璇惧爞棣栭〉</title>
<meta name="Keywords" content="鍏抽敭璇?鍏抽敭璇?>
<meta name="description" content="">
<link rel="shortcut icon" href="http://www.ylcp.shop/files/files/1652954723262/images/favicon.ico">
<!--css,js-->
<style type="text/css">
*{margin:0;padding:0}
body{font-size:12px;font-family:"寰蒋闆呴粦";cursor:default;background-color:#fff}
.clear{clear:both;}
/*婊氬姩鏉″搴?/
::-webkit-scrollbar{width:10px;background-color:#dedbde;}
/* 杞ㄩ亾鏍峰紡 */
::-webkit-scrollbar-track {}
/* Handle鏍峰紡 */
::-webkit-scrollbar-thumb {border-radius: 10px;background: rgba(0,0,0,0.2);min-height: 28px;}
/*褰撳墠绐楀彛鏈縺娲荤殑鎯呭喌涓?/
::-webkit-scrollbar-thumb:window-inactive {
padding-top:100px;
-webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,0.1),inset -1px -1px 0 rgba(0,0,0,0.07);
background-clip:padding-box;background-color:#dadada;
min-height:28px;-webkit-border-radius:4px;
-moz-border-radius:4px;border-radius:4px
}
/*hover鍒版粴鍔ㄦ潯涓?/
::-webkit-scrollbar-thumb:vertical:hover{
background-color: rgba(0,0,0,0.4);
}
/*婊氬姩鏉℃寜涓?/
::-webkit-scrollbar-thumb:vertical:active{
background-color: rgba(0,0,0,0.5);
}
/*header start*/
.header{
width:1200px;height:85px;margin:0 auto;
padding-top:15px
}
.header h1{
float:left;margin-top:3px;
}
.header h1 a{
}
.header .search{
width:450px;height:36px;
float:left;margin-left:220px;
border:2px solid #188eee;
position:relative;
}
.header .search input{
width:370px;height:30px;border:0;line-height:30px;*position:absolute;
outline:0;color:#545454;font-family:"寰蒋闆呴粦";*left:0;
font-size:12px;padding:3px 10px;-webkit-writing-mode: horizontal-tb;
}
.header .search a{
display:inline-block;width:58px;height:36px;
position:absolute;right:0;line-height:36px;
text-align:center;background:#188eee
}
.header .search a i{
display:inline-block;width:20px;height:20px;
background:url("picture/icon-search-white.png");
margin-top:9px;margin-left:3px;
}
.header a{
text-decoration:none
}
.header .login{
height:40px;float:right;color:#dedede;
line-height:40px;margin-top:2px;
}
.header .login a{
color:#333;padding:0 0 0 6px;
}
/*end header*/
/*banner start*/
.banner{
width:100%;height:350px;
}
/*little-banner start*/
.banner .little-banner{
width:1200px;height:50px;position:relative;
margin:0 auto;
}
.banner .little-banner a{
position:absolute;left:220px;
padding:0;height:50px;
}
/*end little-banner*/
/*big-banner start*/
.banner .big-bg{
height:300px;background:#a534d6;
}
.banner .big-bg .big-banner{
width:1200px;height:300px;margin:0 auto;
position:relative;
}
/*big-banner-ul start*/
.banner .big-bg .big-banner .big-banner-ul{
width:220px;height:476px;position:absolute;
top:-50px;background:#188eee;
}
.big-banner-ul #course i{
display:inline-block;width:18px;height:14px;
background:url("picture/button.png") no-repeat center;
background-position:-126px -163px;
margin:0 10px -1px 15px;
}
.big-banner-ul #course{
display:block;width:220px;height:50px;
line-height:50px;
}
.big-banner-ul .course{
text-decoration:none;color:white;font-size:16px;
}
.big-banner-ul .course:hover{
text-decoration:underline;
}
.big-banner-ul ul{
list-style:none;
}
.big-banner-ul ul .course-li{
width:205px;height:59px;padding-top:11px;
padding-left:15px;border-bottom:1px solid #1681c4;
background:#0477C0;position:relative;
}
.big-banner-ul ul .course-li:hover{
background:#0264a3;
}
.big-banner-ul ul .course-li .course{
line-height:24px;display:block
}
.big-banner-ul ul .course-li i{
display:inline-block;width:6px;height:12px;
position:absolute;top:18px;right:16px;
background:url("picture/button.png");
background-position:-147px -163px;
}
.li-hover{
background-position:-157px -163px;
}
.big-banner-ul ul .course-li .course-hot{
display:inline-block;height:21px;
margin-right:8px;color:#97d2f7;text-decoration:none;
font-size:14px;margin-top:5px;
}
.big-banner-ul ul .course-li .course-hot:hover{
text-decoration:underline;
}
.big-banner-ul .course-list{
width:446px;position:absolute;
top:0;left:220px;z-index:1;
background:rgba(255,255,255,0.95);
*background:#fff;
/*opacity:0.95;filter:alpha(opacity=95);*/
border:2px solid #09699c;display:none
}
.big-banner-ul .course-list ul{
width:382px;
margin:0 auto;list-style:none;
}
.big-banner-ul .course-list ul li{
border-bottom:1px solid #e5e5e5;
width:382px;padding:15px 0 12px;
}
.big-banner-ul .course-list ul li .course-child{
color:#039ae3;font-weight:bold;font-size:14px;
text-decoration:none;width:80px;float:left;
margin-top:1px;
}
.big-banner-ul .course-list .course-child-list{
width:297px;
display:inline-block;
}
.big-banner-ul .course-list .course-child-list a{
display:inline-block;width:91px;height:21px;
text-decoration:none;color:#333;font-size:14px;
margin-bottom:3px;
}
.big-banner-ul .course-list .course-child-list a:hover{
color:#63b6f7;
}
/*end big-banner-ul*/
/*big-banner-img start*/
.banner .big-bg .big-banner .big-banner-img{
width:760px;height:300px;overflow:hidden;
position:absolute;top:0;left:220px;*z-index:-1
}
.banner .big-bg .big-banner .big-banner-img #ban-ul li{
list-style:none;float:left;
}
.img-hide{
display:none;
}
.on{
display:block;
}
.big-banner-img #ban-nav{
width:140px;height:24px;position:absolute;
bottom:15px;left:50%;list-style:none;
margin-left:-70px;border-radius:24px;
background:rgba(0,0,0,0.1);
/*opacity:0.9;filter:alpha(opacity=90);*/
}
.big-banner-img #ban-nav li{
float:left;width:10px;height:10px;
margin:8px -17px 0 25px;
background:url("picture/button.png");
background-position:-87px -116px;
}
.ban-button{
display:none;width:46px;height:70px;position:absolute;
top:110px;background:url("picture/button.png");
}
.ban-pre{
left:10px;
background-position:-74px 0;
}
.ban-next{
right:10px;
background-position:-123px 0;
}
/*end *big-banner-img */
/*big-banner-board start*/
.banner .big-bg .big-banner .big-banner-board{
width:220px;height:260px;position:absolute;
top:20px;right:0;background: rgba(0,0,0,0.4);
/*opacity:0.8;filter:alpha(opacity=80);*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
}
.banner .big-bg .big-banner .big-banner-board ul{
list-style:square;padding:0 0 0 15px ;margin-left:20px;
font-size:14px;
}
.big-banner-board ul li{
padding:13px 0 1px;color:white;
}
.big-banner-board a{
color:white;text-decoration:none;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000)
}
.big-banner-board div{
color:white;position:relative;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000)
}
.big-banner-board ul li a:hover{
text-decoration:underline;
}
.big-banner-board .button{
width:110px;height:110px;text-align:center;
display:inline-block;margin-top:14px;float:left;
background:rgba(0,0,0,0.2);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000)
/*opacity:0.8;filter:alpha(opacity=80);*/
}
.big-banner-board .button:hover{
background:rgba(0,0,0,0.3);
/*opacity:0.7;filter:alpha(opacity=70);*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)
}
.big-banner-board .button i{
display:inline-block;width:44px;height:44px;
margin-top:10px;margin-right:2px;
}
.big-banner-board .button .download{
background:url("picture/button.png");
background-position:-123px -73px;
}
.big-banner-board .button i + p{
font-size:16px;margin-top:3px;margin-bottom:2px
}
.big-banner-board .button .weixin{
background:url("picture/button.png");
background-position:-172px -73px;
}
.big-banner-board #board-qr img{
position:absolute;top:-7px;left:-112px;
display:none;
}
/*end big-banner-board*/
/*end big-banner*/
/*end banner*/
/*course-actives start*/
.course-actives{
width:980px;height:125px;margin:0 auto;
border-right:1px solid #eaeaea;
border-bottom:1px solid #eaeaea;
padding-left:220px;
}
.course-actives a{
display:inline-block;margin-left: 0px;
margin-right: -4px;
}
/*end course-actives*/
/*course_hot start*/
.course_hot{
width:1200px;height:481px;margin:0 auto;padding:40px 0 20px 0;
}
.course_hot1{
height:280px;
}
.first-course{
height:271px
}
.course_hot .course-hot-nav{
width:1200px;height:40px;border-bottom:1px solid #ddd;
position:relative;
}
.course_hot .course-hot-nav h2{
font-weight:normal;height:36px;float:left;
}
.course_hot .course-hot-nav h2 .hot-tittle{
font-size:22px;width:222px;line-height:24px;
display:inline-block;color:#202020;
text-decoration:none;
}
.course_hot .course-hot-nav h2 .hot-tittle:hover{
color:#62b4f7
}
.course_hot .course-hot-nav h2 .hot-tittle2{
width:466px;
}
.course_hot .course-hot-nav ul{
float:left;width:970px;height:36px;
}
.course_hot .course-hot-nav .job-menu{
width:730px
}
.course_hot .course-hot-nav ul li{
float:left;list-style:none;font-size:14px;height:40px;
}
.course_hot .course-hot-nav ul li a{
text-decoration:none;display:block;width:90px;
text-align:center;color:#333;margin-top:8px;
}
.course_on{
color:#188eee;
}
.course_li_on{
border-bottom:2px solid #188eee;
}
.course_hot .course-hot-nav ul li a i{
width:18px;height:18px;display:inline-block;
background:url("picture/button.png");
background-position:-49px -99px;
margin-right:5px;vertical-align:-4px;
*height:22px;
}
.course_hot .course-hot-menu{
padding-top:30px;height:200px;
}
.course_hot .course-hot-menu ul{
list-style:none;width:1220px;height:200px;
}
.course_hot .course-hot-menu ul li{
float:left; width:220px;height:124px;
margin-left:-10px;margin-right:34px;
}
.course_hot .menu-course-card{
width:232px;height:180px;border:1px solid transparent;
padding:10px 0px 8px 11px;font-size:14px;
}
.course_hot .menu-course-card:hover{
border:1px solid #dddddd;
}
.course_hot .menu-course-card .course-img{
display:block;width:220px;height:124px;position:relative;
}
.course_hot .menu-course-card .course-img .icon-card-play{
position:absolute;background:url("picture/icon-card-play.png");
width:30px;height:30px;bottom:10px;left:10px;
}
.course-description{
display:block;color:#333;
white-space:nowrap;text-overflow:ellipsis;width:220px;padding-top:8px;
overflow:hidden;text-decoration:none;
}
.course_hot .menu-course-card .course-description:hover{
color:#62B4F7;
}
.course_hot .menu-course-card p{
padding-top:2px;color:#dedede;
}
.course_hot .menu-course-card .free{
color:#5FB41B;display:inline-block;vertical-align:4px;
*height:16px;
}
.course_hot .menu-course-card .charge{
color:#E85308;vertical-align:4px;margin-right:9px;*display:inline-block;*height:16px
}
.course_hot .menu-course-card .symbol{
display:inline-block;vertical-align:4px;margin-right:4px;
*height:16px;
}
.course_hot .menu-course-card p a{
color:#999;margin-left:7px;text-decoration:none;display:inline-block;overflow:hidden;
white-space:nowrap;text-overflow:ellipsis;width:128px;
}
.course_hot .menu-course-card p a:hover{
color:#62B4F7;
}
/*end course_hot*/
/*catalog start*/
.course_hot .catalog-menu{
height:200px;margin-top:-2px;position:relative
}
.course_hot .box{
border-bottom:0;
}
.course_hot .catalog-menu .mod-catalog-box{
display:inline-block;width:240px;height:420px;float:left;
margin-left:-20px;position:absolute;top:1px;left:0;
}
.course_hot .catalog-menu .mod-catalog-box2{
margin-left:0;height:220px;
}
.course_hot .catalog-menu .catalog-menu-div ul{
list-style:none;width:734px;float:left;
margin-top:20px;margin-left:242px;
}
.course_hot .catalog-menu .catalog-menu-div .catalog-menu-ul{
margin-left:491px;
}
.course_hot .catalog-menu .catalog-menu-div ul li{
float:left; width:220px;height:124px;
margin:0 34px 76px -10px;
}
.course_hot .menu-course-card{
width:232px;height:180px;border:1px solid transparent;
padding:10px 0px 8px 11px;font-size:14px;
}
.course_hot .menu-course-card:hover{
border:1px solid #dddddd;
}
.course_hot .menu-course-card .course-img{
display:block;width:220px;height:124px;position:relative;
}
.course_hot .menu-course-card .course-img .icon-card-play{
position:absolute;background:url("picture/icon-card-play.png");
width:30px;height:30px;bottom:10px;left:10px;
}
.course_hot .menu-course-card .course-description{
display:block;color:#333;
white-space:nowrap;text-overflow:ellipsis;width:220px;padding-top:8px;
overflow:hidden;text-decoration:none;
}
.course_hot .menu-course-card .course-description:hover{
color:#62B4F7;
}
.course_hot .menu-course-card p{
padding-top:2px;color:#dedede;
}
.free{
color:#5FB41B;display:inline-block;vertical-align:4px;
*height:16px;
}
.charge{
color:#E85308;vertical-align:4px;margin-right:9px;*display:inline-block;*height:16px
}
.course_hot .menu-course-card .symbol{
display:inline-block;vertical-align:4px;margin-right:4px;
*height:16px;
}
.course_hot .menu-course-card p a{
color:#999;margin-left:7px;text-decoration:none;display:inline-block;overflow:hidden;
white-space:nowrap;text-overflow:ellipsis;width:128px;
}
.course_hot .menu-course-card p a:hover{
color:#62B4F7;
}
.course_hot .catalog-menu .course-rank{
width:242px;height:390px;float:right;
margin-top:28px;margin-right:-24px;
}
.course_hot .catalog-menu .rank-type{
width:218px;height:29px;list-style:none;
border-bottom:1px solid #dfdfdf;margin-top:3px;
}
.course_hot .catalog-menu .rank-type li{
float:left;height:29px;text-align:center;
width:105px;font-size:16px;
color:#999;padding-left:1px
}
.course_hot .catalog-menu .rank-type li:last-child{
padding-left:5px
}
.rank-type-sel{
color:#331 ! important;border-bottom:1px solid #188eee
}
.course_hot .catalog-menu .course-rank .rank-menu{
margin-right:1px;width:242px;
}
.course_hot .catalog-menu .course-rank .rank-menu ul{
list-style:none;text-align:center;margin-top:10px;margin-left:-11px
}
.course-rank .rank-menu .rank-menu-ul li{
width:218px;height:32px;padding:0 12px;line-height:26px;
}
.course-rank .rank-menu .rank-menu-ul li:hover{
background:#e5e5e5;
}
.course-rank .rank-menu .rank-menu-ul .rank-menu-li-first{
height:83px;padding:6px 12px;
}
.course-rank .rank-menu .rank-menu-ul li .rank-menu-num{
display:inline-block;width:18px;height:18px;
background:url("picture/button.png");float:left;margin-left:1px;
}
.course-rank .rank-menu .rank-menu-ul li .rank-menu-num-1{
background-position:-105px -163px;margin:5px 11px 0 -1px;
}
.course-rank .rank-menu .rank-menu-ul li .rank-menu-num-2{
background-position:-84px -163px;margin:7px 14px 0 -1px;
}
.course-rank .rank-menu .rank-menu-ul li .rank-menu-num-3{
background-position:-21px -163px;margin:7px 14px 0 -1px;
}
.course-rank .rank-menu .rank-menu-ul li .rank-menu-num-4{
background-position:-174px -130px;margin:7px 14px 0 -1px;
}
.course-rank .rank-menu .rank-menu-ul li .rank-menu-num-5{
background-position:-49px -57px;margin:7px 14px 0 -1px;
}
.course-rank .rank-menu .rank-menu-ul li .rank-menu-num-6{
background-position:0 -163px;margin:7px 14px 0 -1px;
}
.course-rank .rank-menu .rank-menu-ul li .rank-menu-num-7{
background-position:-63px -163px;margin:7px 14px 0 -1px;
}
.course-rank .rank-menu .rank-menu-ul li .rank-menu-num-8{
background-position:-42px -163px;margin:7px 14px 0 -1px;
}
.course-rank .rank-menu .rank-menu-ul li .rank-menu-num-9{
background-position:-195px -130px;margin:7px 14px 0 -1px;
}
.rank-menu-num-1,.rank-menu-num-2,.rank-menu-num-3,.rank-menu-num-4,.rank-menu-num-5,.rank-menu-num-6,.rank-menu-num-7,.rank-menu-num-8,.rank-menu-num-9{
*margin-right:1px
}
.course-rank .rank-menu .rank-menu-ul .rank-menu-li-first .rank-menu-content{
display:inline-block;width:184px;height:84px;
float:left;
}
.rank-description{
display:block;color:#333;font-size:14px;
white-space:nowrap;text-overflow:ellipsis;width:180px;
overflow:hidden;text-decoration:none;margin-left:3px;
margin-bottom:3px;*margin-left:-5px;text-align:left;
}
.rank-description-other{
line-height:31px;text-align:left;
}
.course-rank .rank-menu .rank-menu-ul .rank-menu-li-first .rank-menu-content .rank-free-img{
*float:left;
}
.course-rank .rank-menu .rank-menu-ul .rank-menu-li-first .rank-menu-content span{
font-size:14px; display:block;margin-top:-1px;margin-bottom:3px;
}
.course-rank .rank-menu .rank-menu-ul .rank-menu-li-first .rank-menu-content .rank-college{
color:#999;text-decoration:none;display:inline-block;overflow:hidden;
white-space:nowrap;text-overflow:ellipsis;margin-left:-6px;
}
.course-rank .rank-menu .rank-menu-ul .rank-menu-li-first .rank-menu-content .rank-menu-course{
float:right;width:96px;margin-left:-8px;
}
/*end catalog*/
/*agency-div start*/
.agency-div{
height:95px;padding:80px 33px;
width:1200px;
}
.agency-div .agency-apply{
width:96px;height:96px;float:left;
}
.agency-apply h3{
font-size:22px;font-weight:normal;margin-top:21px;
margin-bottom:4px;display:block
}
.agency-div .apply{
font-size:14px;color:#188eee;
text-decoration:none;
}
.agency-div .agency-list{
width:1090px;height:92px;margin-left:14px;
float:left;position:relative;overflow:hidden;
}
.agency-pre,.agency-next{
width:26px;height:30px;display:block;position:absolute;
top:35px;background:url("picture/button.png");
}
.agency-list .agency-pre{
left:0px;background-position:-58px -130px;
}
.agency-list ul{
list-style:none;margin-left:45px;position:absolute;
}
.agency-list ul li{
float:left;padding-right:26px;
}
.agency-list ul li a{
display:inline-block;border:1px solid #eee;
}
.agency-list .agency-next{
right:0px;background-position:-116px -130px;
}
/*end agency-div*/
/*cooperation-div start*/
.cooperation-div{
width:1200px;height:250px;background:#444546;
padding:41px 33px;
}
.cooperation-div h3{
font-size:22px;color:#999;font-weight:normal;
}
.cooperation-div ul{
list-style:none;margin-top:27px;border-bottom:1px solid #4a4b4c;height:53px;
}
.cooperation-div ul li{
float:left;margin-right:40px;
}
.cooperation-div ul li a{
text-decoration:none;color:#999;font-size:14px
}
.cooperation-div ul li a:hover{
text-decoration:underline;
}
.cooperation-div .icon-logo-bottom{
margin:0 auto;width:42px;height:32px;display:block;
background:url("picture/icon_logo_bottom.png");
margin-top:40px;margin-bottom:5px;
}
.cooperation-div p{
text-align:center;color:#777;line-height:24px;
}
/*end cooperation-div*/
/*jump-container start*/
.jump-container{
width:50px;height:120px;position:fixed;
right:20px;bottom:50px;
}
.jump-top,.support{
display:block;
}
.jump-container .jump-container-div div{
width:50px;height:82px;overflow:hidden;cursor:pointer;position:absolute;top:0
}
.jump-container div .jump-plane{
background:url("picture/jump-plane.png") no-repeat;
display:block;width:42px;height:56px;position:absolute;top:82px;left:3px
}
.jump-top{
width:42px;height:56px;opacity:0;filter:alpha(opacity=0);
background:url("picture/bg-side-jump.png") no-repeat;
background-position:0px 7px;
margin-top:23px;margin-left:4px
}
.jump-top-hover{
background:url("picture/bg-side-jump-hover.png") no-repeat;
background-position:-4px -25px
}
.support{
width:40px;height:40px;
background:url("picture/button.png") no-repeat;
background-position:-74px -73px;margin-top:3px;
margin-left:5px;position:absolute;
}
.jump-container span{
position:absolute;z-index:2;line-height:18px;color:white;
width:40px;height:40px;font-size:14px;text-align:center;
background:#188eee;margin-top:3px;margin-left:5px;cursor:pointer;display:none
}
/*end jump-container*/
</style>
</head>
<body>
<!--header start-->
<div class="header">
<h1>
<a><img src="picture/bg-logo.png" alt="鑵捐璇惧爞" width="288" height="38"></a>
</h1>
<div class="search">
<input type="text" placeholder="鎼滅储璇剧▼">
<a href="#"><i></i></a>
</div>
<div class="login">
<a href="#" style="margin-right:5px">鐧诲綍</a> | <a href="#">甯姪</a>
</div>
<div class="clear"></div>
</div>
<!--end header-->
<!--banner start-->
<div class="banner">
<!--little-banner start-->
<div class="little-banner">
<a href="#"><img src="picture/banner-yunying-2.jpg" alt="缇や富璁㈤槄璇剧▼锛屾娊濂栦韩澶хぜ" width="760" width="50" border="0"></a>
</div>
<!--big-banner start-->
<div class="big-bg">
<div class="big-banner">
<!--big-banner-ul start-->
<div class="big-banner-ul">
<a href="#" id="course" class="course">
<i></i><span>鍏ㄩ儴璇剧▼</span>
</a>
<ul>
<li class="course-li">
<a href="#" class="course">鑱屼笟鎶€鑳?lt;/a><i></i>
<a href="#" class="course-hot">鑱屽満鎶€鑳?lt;/a>
<a href="#" class="course-hot">SNS钀ラ攢</a>
<a href="#" class="course-hot">鍏姟鍛?lt;/a>
<div class="course-list">
<ul>
<li>
<a href="#" class="course-child">鑱屽満/姹傝亴</a>
<div class="course-child-list">
<a href="#">灏变笟鎸囧</a>
<a href="#">鑱屼笟瑙勫垝</a>
<a href="#">鑱屽満鎶€鑳?lt;/a>
<a href="#">浼佷笟鍩硅</a>
<a href="#">鍒涗笟鎸囧</a>
</div>
</li>
<li>
<a href="#" class="course-child">甯傚満钀ラ攢</a>
<div class="course-child-list">
<a href="#">娣樺疂钀ラ攢</a>
<a href="#">缃戠粶鎺ㄥ箍</a>
<a href="#">SNS钀ラ攢</a>
<a href="#">SEO/SEM</a>
</div>
</li>
<li>
<a href="#" class="course-child">鑱屼笟绫昏€冭瘯</a>
<div class="course-child-list">
<a href="#">鍏姟鍛?lt;/a>
<a href="#">璐細绫?lt;/a>
<a href="#">寤虹瓚绫?lt;/a>
<a href="#">閲戣瀺绫?lt;/a>
<a href="#">鍏朵粬鑰冭瘯</a>
</div>
</li>
<li>
<a href="#" class="course-child">鍏朵粬鎶€鑳?lt;/a>
<div class="course-child-list">
<a href="#">缇庡鍩硅</a>
<a href="#">姹借溅缁翠慨</a>
<a href="#">鍏朵粬</a>
</div>
</li>
</ul>
</div>
</li>
<li class="course-li">
<a href="#" class="course">IT鍩硅</a><i></i>
<a href="#" class="course-hot">缃戠珯鍒朵綔</a>
<a href="#" class="course-hot">鎵嬫満寮€鍙?lt;/a>
<a href="#" class="course-hot">娓告垙鍒朵綔</a>
<div class="course-list" style="height:332px">
<ul>
<li>
<a href="#" class="course-child">缂栫▼寮€鍙?lt;/a>
<div class="course-child-list">
<a href="#">缃戠珯鍒朵綔</a>
<a href="#">娓告垙寮€鍙?lt;/a>
<a href="#">鎵嬫満寮€鍙?lt;/a>
<a href="#">鏁版嵁搴?lt;/a>
<a href="#">缂栫▼璇█</a>
</div>
</li>
<li>
<a href="#" class="course-child">宸ュ叿杞欢</a>
<div class="course-child-list">
<a href="#">缃戦〉鍒朵綔</a>
<a href="#">缃戦〉/骞抽潰璁捐</a>
<a href="#">瀹ゅ唴/寤虹瓚璁捐</a>
<a href="#">鏈烘/妯″叿璁捐</a>
<a href="#">娓告垙鍒朵綔</a>
<a href="#">瑙嗛澶勭悊</a>
<a href="#">鍔炲叕</a>
<a href="#">鍏朵粬</a>
</div>
</li>
<li>
<a href="#" class="course-child">娓告垙璁捐</a>
<div class="course-child-list">
<a href="#">鍘熺敾璁捐</a>
<a href="#">浜у搧璁捐</a>
</div>
</li>
<li>
<a href="#" class="course-child">鍔ㄦ极鍒朵綔</a>
<div class="course-child-list">
<a href="#">鍔ㄦ极鍒朵綔</a>
</div>
</li>
<li>
<a href="#" class="course-child">鍏朵粬</a>
<div class="course-child-list">
<a href="#">鍏朵粬</a>
</div>
</li>
</ul>
</div>
</li>
<li class="course-li">
<a href="#" class="course">璇█瀛︿範</a><i></i>
<a href="#" class="course-hot">鑻辫鍙ｈ</a>
<a href="#" class="course-hot">鏃ヨ</a>
<a href="#" class="course-hot">闊╄</a>
<div class="course-list">
<ul>
<li>
<a href="#" class="course-child">鑻辫鍙ｈ</a>
<div class="course-child-list">
<a href="#">鍒濈骇鍏ラ棬</a>
<a href="#">鑻辫璇硶</a>
<a href="#">闊虫爣璇嶆眹</a>
<a href="#">鍙ｈ杩涢樁</a>
<a href="#">鏃呰鑻辫</a>
</div>
</li>
<li>
<a href="#" class="course-child">鑻辫鑰冭瘯</a>
<div class="course-child-list">
<a href="#">鍥?鍏骇</a>
<a href="#">鑰冪爺鑻辫</a>
<a href="#">鑷€?鑱岀О鑻辫</a>
<a href="#">鍏朵粬</a>
</div>
</li>
<li>
<a href="#" class="course-child">鐣欏鑻辫</a>
<div class="course-child-list">
<a href="#">闆呮€?lt;/a>
<a href="#">鎵樼</a>
<a href="#">SAT</a>
<a href="#">GRE/GMAT</a>
<a href="#">鐣欏鎸囧</a>
<a href="#">鍏朵粬</a>
</div>
</li>
<li>
<a href="#" class="course-child">鍟嗗姟鑻辫</a>
<div class="course-child-list">
<a href="#">鑱屽満鑻辫</a>
<a href="#">琛屼笟鑻辫</a>
<a href="#">鍏朵粬</a>
</div>
</li>
<li>
<a href="#" class="course-child">姹夎</a>
<div class="course-child-list">
<a href="#">鏅€氳瘽</a>
<a href="#">绮よ</a>
</div>
</li>
<li>
<a href="#" class="course-child">闊╄</a>
<div class="course-child-list">
<a href="#">鏅€氳瘽</a>
<a href="#">绮よ</a>
</div>
</li>
<li>
<a href="#" class="course-child">鏃ヨ</a>
<div class="course-child-list">
<a href="#">鍒濈骇鍏ラ棬</a>
<a href="#">鏃ヨ杩涢樁</a>
</div>
</li>
<li>
<a href="#" class="course-child">鍏朵粬</a>
<div class="course-child-list">
<a href="#">鍏朵粬</a>
</div>
</li>
</ul>
</div>
</li>
<li class="course-li">
<a href="#" class="course">涓皬瀛?澶у</a><i></i>
<a href="#" class="course-hot">鑰冪爺/鑷€?lt;/a>
<a href="#" class="course-hot">涓€冨鎴?lt;/a>
<div class="course-list">
<ul>
<li>
<a href="#" class="course-child">灏忓</a>
<div class="course-child-list">
<a href="#">璇枃</a>
<a href="#">鏁板</a>
<a href="#">鑻辫</a>
<a href="#">鍏朵粬</a>
</div>
</li>
<li>
<a href="#" class="course-child">鍒濅腑</a>
<div class="course-child-list">
<a href="#">璇枃</a>
<a href="#">鏁板</a>
<a href="#">鑻辫</a>
<a href="#">鐞嗙患</a>
<a href="#">鏂囩患</a>
<a href="#">鍏朵粬</a>
</div>
</li>
<li>
<a href="#" class="course-child">楂樹腑</a>
<div class="course-child-list">
<a href="#">璇枃</a>
<a href="#">鏁板</a>
<a href="#">鑻辫</a>
<a href="#">鐞嗙患</a>
<a href="#">鏂囩患</a>
<a href="#">鍏朵粬</a>
</div>
</li>
<li>
<a href="#" class="course-child">灏忓崌鍒濆鎴?lt;/a>
<div class="course-child-list">
<a href="#">灏忓崌鍒濆鎴?lt;/a>
</div>
</li>
<li>
<a href="#" class="course-child">涓€冨鎴?lt;/a>
<div class="course-child-list">
<a href="#">涓€冨鎴?lt;/a>
</div>
</li>
<li>
<a href="#" class="course-child">楂樿€冨鎴?lt;/a>
<div class="course-child-list">
<a href="#">楂樿€冨鎴?lt;/a>
</div>
</li>
<li>
<a href="#" class="course-child">鑰冪爺/鑷€?lt;/a>
<div class="course-child-list">
<a href="#">鑰冪爺/鑷€?lt;/a>
</div>
</li>
</ul>
</div>
</li>
<li class="course-li">
<a href="#" class="course">鍏磋叮鐖卞ソ</a><i></i>
<a href="#" class="course-hot">鎶曡祫鐞嗚储</a>
<a href="#" class="course-hot">缇庡</a>
<a href="#" class="course-hot">鎽勫奖</a>
<div class="course-list">
<ul>
<li>
<a href="#" class="course-child">鎶曡祫鐞嗚储</a>
<div class="course-child-list">
<a href="#">鎶曡祫鐞嗚储</a>
</div>
</li>
<li>
<a href="#" class="course-child">鐢熸椿鐧剧</a>
<div class="course-child-list">
<a href="#">濠氭亱</a>
<a href="#">缇庡</a>
<a href="#">瀹惰</a>
<a href="#">椋庢按</a>
<a href="#">鍏朵粬</a>
</div>
</li>
<li>
<a href="#" class="course-child">鏂囧寲鑹烘湳</a>
<div class="course-child-list">
<a href="#">鍞辨瓕</a>
<a href="#">鑸炶箞</a>
<a href="#">涔︾敾</a>
<a href="#">涔愬櫒</a>
<a href="#">鎽勫奖</a>
<a href="#">鍏朵粬</a>
</div>
</li>
<li>
<a href="#" class="course-child">鏃跺皻鍋ュ悍</a>
<div class="course-child-list">
<a href="#">鏄熷骇</a>
<a href="#">鐟滀冀</a>
<a href="#">鍏荤敓</a>
<a href="#">鍏朵粬</a>
</div>
</li>
</ul>
</div>
</li>
<li class="course-li">
<a class="course">浜插瓙璇惧爞</a><i></i>
<a href="#" class="course-hot">骞煎効鏁欒偛</a>
<a href="#" class="course-hot">瀹堕暱璁粌钀?lt;/a>
<div class="course-list">
<ul>
<li>
<a href="#" class="course-child">骞煎効鏁欒偛</a>
<div class="course-child-list">
<a href="#">骞煎効鏁欒偛</a>
</div>
</li>
<li>
<a href="#" class="course-child">瀛﹀墠鏃╂暀</a>
<div class="course-child-list">
<a href="#">瀛﹀墠鏃╂暀</a>
</div>
</li>
<li>
<a href="#" class="course-child">瀹堕暱璁粌钀?lt;/a>
<div class="course-child-list">
<a href="#">瀹堕暱璁粌钀?lt;/a>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!--end big-banner-ul-->
<!--big-banner-img start-->
<div class="big-banner-img">
<ul id="ban-ul">
<li>
<a href="#" class="on">
<img src="picture/banner-1.jpg" alt="搴旇瘯瀹? width="760" height="300" border="0">
</a>
</li>
<li>
<a href="#" class="img-hide">
<img src="picture/banner-2.jpg" alt="涓叕-閲戣瀺浜? width="760" height="300" border="0">
</a>
</li>
<li>
<a href="#" class="img-hide">
<img src="picture/banner-3.jpg" alt="娼窞瀛﹂櫌" width="760" height="300" border="0">
</a>
</li>
<li>
<a href="#" class="img-hide">
<img src="picture/banner-4.jpg" alt="閭㈠竻鏁欒偛" width="760" height="300" border="0">
</a>
</li>
<li>
<a href="#" class="img-hide">
<img src="picture/banner-5.jpg" alt="浜戜腑甯嗘暀鑲? width="760" height="300" border="0">
</a>
</li>
</ul>
<ul id="ban-nav">
<li data-color="#a534d6"></li>
<li data-color="#3979ce"></li>
<li data-color="#4a4d9c"></li>
<li data-color="#523484"></li>
<li data-color="#009ee7"></li>
</ul>
<a href="javascript:void(0)" class="ban-button ban-pre"></a>
<a href="javascript:void(0)" class="ban-button ban-next"></a>
</div>
<!--end big-banner-img-->
<!--big-banner-board start-->
<div class="big-banner-board">
<ul>
<li><a href="#">2015鑰冪爺鑻辫鍚嶅笀瑙ｆ瀽</a></li>
<li><a href="#">鎵撶牬瀵屼笉杩囦笁浠ｇ殑榄斿拻</a></li>
<li><a href="#">缃戠珯鍒朵綔杈句汉鍒嗕韩</a></li>
<li><a href="#">娴峰綊鍨嬬敺鐨勪腑绉嬮倐閫?lt;/a></li>
</ul>
<a href="#" class="button"><i class="download"></i><p>涓嬭浇</p><p>涓撶敤QQ</p></a>
<div id="board-qr" class="button">
<i class="weixin"></i>
<p>鎵竴鎵?lt;/p><p>QQ鍏紬鍙?lt;/p>
<img src="picture/bg-board-qr.png" width="126" height="126">
</div>
<div class="clear"></div>
</div>
<!--end big-banner-board-->
</div>
</div>
<!--end big-banner-->
</div>
<!--end banner-->
<!--course-actives start-->
<div class="course-actives">
<a href="#"><img src="picture/yexuetang.jpg" alt="澶滃鍫? width="326" height="125" border="0"></a>
<a href="#"><img src="picture/yingfulunsi.jpg" alt="鑻辩浼︽柉" width="326" height="125" border="0"></a>
<a href="#"><img src="picture/korean.jpg" alt="闊╄" width="326" height="125" border="0"></a>
</div>
<!--end course-actives-->
<!--course-hot start-->
<div class="course_hot first-course">
<div class="course-hot-nav">
<h2><a href="#" class="hot-tittle">鐑棬璇剧▼</a></h2>
<ul id="course-type">
<li class="course_li_on"><a href="#" style="color:#188eee">鐩存挱璇?lt;/a></li>
<li><a href="#"><i id="video"></i>褰曟挱璇?lt;/a></li>
</ul>
</div>
<div class="course-hot-menu">
<ul>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/live1.jpg" alt="浼氳閭ｄ簺鍎夸簨鍎匡紝浼氳浠庝笟璇剧▼瓒ｈ" title="浼氳閭ｄ簺鍎夸簨鍎匡紝浼氳浠庝笟璇剧▼瓒ｈ" width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="浼氳閭ｄ簺鍎夸簨鍎匡紝浼氳浠庝笟璇剧▼瓒ｈ">浼氳閭ｄ簺鍎夸簨鍎匡紝浼氳浠庝笟璇剧▼瓒ｈ</a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="涓叕浼氳">涓叕浼氳</a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/live2.jpg" alt="鍥涘叚绾у悕甯堜綋楠岃" title="鍥涘叚绾у悕甯堜綋楠岃" width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="浼氳閭ｄ簺鍎夸簨鍎匡紝浼氳浠庝笟璇剧▼瓒ｈ">鍥涘叚绾у悕甯堜綋楠岃</a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="">搴旇瘯瀹?lt;/a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/live3.jpg" alt="鏂版爣鏃ュ垵绾т笂鍐? title="鏂版爣鏃ュ垵绾т笂鍐? width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="浼氳閭ｄ簺鍎夸簨鍎匡紝浼氳浠庝笟璇剧▼瓒ｈ">鏂版爣鏃ュ垵绾т笂鍐?lt;/a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="">澶╁拰鏅鸿儨鏁欒偛</a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/live4.png" alt="鎬庢牱鎴愪负涓€鍚嶅闇? title="鎬庢牱鎴愪负涓€鍚嶅闇? width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="浼氳閭ｄ簺鍎夸簨鍎匡紝浼氳浠庝笟璇剧▼瓒ｈ">鎬庢牱鎴愪负涓€鍚嶅闇?lt;/a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="">闃虫槑鏁欒偛</a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/live5.jpg" alt="Ps鏂囧瓧涓庡浘鐗囩粨鏋勬渚嬭搴с€愪簯涓竼鏁欒偛銆? title="Ps鏂囧瓧涓庡浘鐗囩粨鏋勬渚嬭搴с€愪簯涓竼鏁欒偛銆? width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="浼氳閭ｄ簺鍎夸簨鍎匡紝浼氳浠庝笟璇剧▼瓒ｈ">Ps鏂囧瓧涓庡浘鐗囩粨鏋勬渚嬭搴с€愪簯涓竼鏁欒偛銆?lt;/a>
<p><span class="charge">楼9.00</span><span class="symbol"> | </span><a href="#" title="">浜戜腑甯嗘暀鑲?lt;/a></p>
</div>
</li>
</ul>
<ul class="img-hide">
<li>
<div class="menu-course-card">
<a href="#" class="course-img">
<img src="picture/video1.jpg" alt="鑻辩浼︽柉Live Show" title="鑻辩浼︽柉Live Show" width="220" height="124" border="0">
<i class="icon-card-play"></i>
</a>
<a href="#" class="course-description" title="鑻辩浼︽柉Live Show">鑻辩浼︽柉Live Show</a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="">鑵捐璇惧爞銆愬畼鏂广€?lt;/a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img">
<img src="picture/video2.jpg" alt="涓€璧峰鍔ㄧ敾涔嬮€嗚娴疯醇鐜? title="涓€璧峰鍔ㄧ敾涔嬮€嗚娴疯醇鐜? width="220" height="124" border="0">
<i class="icon-card-play"></i>
</a>
<a href="#" class="course-description" title="涓€璧峰鍔ㄧ敾涔嬮€嗚娴疯醇鐜?>涓€璧峰鍔ㄧ敾涔嬮€嗚娴疯醇鐜?lt;/a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="">钃濋搮绗斿湪绾挎暀鑲?lt;/a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img">
<img src="picture/video3.jpg" alt="2澶╁浼氫簲鍗侀煶鍥俱€愭棭閬撴棩璇€? title="2澶╁浼氫簲鍗侀煶鍥俱€愭棭閬撴棩璇€? width="220" height="124" border="0">
<i class="icon-card-play"></i>
</a>
<a href="#" class="course-description" title="2澶╁浼氫簲鍗侀煶鍥俱€愭棭閬撴棩璇€?>2澶╁浼氫簲鍗侀煶鍥俱€愭棭閬撴棩璇€?lt;/a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="">鏃╅亾鏃ヨ缃戞牎</a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img">
<img src="picture/video4.jpg" alt="2014浼氳鑰冭瘉60涓繀鑰冪偣" title="2014浼氳鑰冭瘉60涓繀鑰冪偣" width="220" height="124" border="0">
<i class="icon-card-play"></i>
</a>
<a href="#" class="course-description" title="2014浼氳鑰冭瘉60涓繀鑰冪偣">2014浼氳鑰冭瘉60涓繀鑰冪偣</a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">| </span><a href="#" title="">瀵瑰晩缃?lt;/a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img">
<img src="picture/video5.jpg" alt="鏂版蹇佃嫳璇涓€鍐屽悓姝ワ紙鍏ラ棬锛? title="鏂版蹇佃嫳璇涓€鍐屽悓姝ワ紙鍏ラ棬锛? width="220" height="124" border="0">
<i class="icon-card-play"></i>
</a>
<a href="#" class="course-description" title="鏂版蹇佃嫳璇涓€鍐屽悓姝ワ紙鍏ラ棬锛?>鏂版蹇佃嫳璇涓€鍐屽悓姝ワ紙鍏ラ棬锛?lt;/a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">| </span><a href="#" title=""> 鍖椾含缃戣耽澶╁湴绉戞妧鏂囧寲浼犳挱鏈夐檺鍏徃</a></p>
</div>
</li>
</ul>
</div>
</div>
<!--end course-hot-->
<!--course_hot start-->
<div class="course_hot">
<div class="course-hot-nav">
<h2><a href="#" class="hot-tittle box">鑱屼笟鎶€鑳?lt;/a></h2>
<ul class="job-type">
<li class="course_li_on"><a href="#" style="color:#188eee">鎺ㄨ崘</a></li>
<li><a href="#">鑱屽満/姹傝亴</a></li>
<li><a href="#">鑱屼笟绫昏€冭瘯</a></li>
<li><a href="#">甯傚満钀ラ攢</a></li>
<li><a href="#">鏈€鏂板彂甯?lt;/a></li>
</ul>
</div>
<div class="catalog-menu">
<a href="#" class="mod-catalog-box"><img src="picture/catalog-box.png" alt="缃戠珯鍒朵綔闆跺熀纭€鍒伴」鐩疄鎴樼郴鍒楁暀瀛?" title="缃戠珯鍒朵綔闆跺熀纭€鍒伴」鐩疄鎴樼郴鍒楁暀瀛?" width="240" height="420" border="0"></a>
<div class="catalog-menu-div">
<ul>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/recommend1.jpg" alt="濡備綍鎵惧埌閫傚悎鑷韩鎬ф牸鐨勮亴涓氾紵" title="濡備綍鎵惧埌閫傚悎鑷韩鎬ф牸鐨勮亴涓氾紵" width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="濡備綍鎵惧埌閫傚悎鑷韩鎬ф牸鐨勮亴涓氾紵">濡備綍鎵惧埌閫傚悎鑷韩鎬ф牸鐨勮亴涓氾紵</a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="鑻辩洓缃?>鑻辩洓缃?lt;/a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/recommend2.jpg" alt="CAD鐭湡鍩硅閫熸垚/鎸戞垬鏈堣柂5000+" title="CAD鐭湡鍩硅閫熸垚/鎸戞垬鏈堣柂5000+" width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="CAD鐭湡鍩硅閫熸垚/鎸戞垬鏈堣柂5000+">CAD鐭湡鍩硅閫熸垚/鎸戞垬鏈堣柂5000+</a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="娼窞瀛﹂櫌">娼窞瀛﹂櫌</a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/recommend3.jpg" alt="宸ヤ笟绯诲垪鏇查潰宸ヤ笟寤烘ā绯荤粺鏁欑▼(rhino,鐘€鐗涳紝C4D锛? title="宸ヤ笟绯诲垪鏇查潰宸ヤ笟寤烘ā绯荤粺鏁欑▼(rhino,鐘€鐗涳紝C4D锛? width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="宸ヤ笟绯诲垪鏇查潰宸ヤ笟寤烘ā绯荤粺鏁欑▼(rhino,鐘€鐗涳紝C4D锛?>宸ヤ笟绯诲垪鏇查潰宸ヤ笟寤烘ā绯荤粺鏁欑▼(rhino,鐘€鐗涳紝C4D锛?lt;/a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="閭㈠竻鏁欒偛">閭㈠竻鏁欒偛</a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/recommend4.jpg" alt="寰俊鍏紬骞冲彴鍏ラ棬鍒扮簿閫? title="寰俊鍏紬骞冲彴鍏ラ棬鍒扮簿閫? width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="寰俊鍏紬骞冲彴鍏ラ棬鍒扮簿閫?>寰俊鍏紬骞冲彴鍏ラ棬鍒扮簿閫?lt;/a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="瀹岀編缃戠粶">瀹岀編缃戠粶</a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/recommend5.jpg" alt="100%鎵惧埌濂藉伐浣滅殑绉樿瘈" title="100%鎵惧埌濂藉伐浣滅殑绉樿瘈" width="220" height="124" border="0">
<i class="icon-card-play"></i>
</a>
<a href="#" class="course-description" title="100%鎵惧埌濂藉伐浣滅殑绉樿瘈">100%鎵惧埌濂藉伐浣滅殑绉樿瘈</a>
<p><span class="free" style="margin-right:9px">鍏嶈垂</span><span class="symbol">|</span><a href="#" title="杈炬ⅵ鏁欒偛">杈炬ⅵ鏁欒偛</a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/recommend6.jpg" alt="鏁欏笀璧勬牸鑰冭瘯锛?014骞撮浂鍩虹绮捐璇剧▼锛夈€愪腑澶х綉鏍°€? title="鏁欏笀璧勬牸鑰冭瘯锛?014骞撮浂鍩虹绮捐璇剧▼锛夈€愪腑澶х綉鏍°€? width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="鏁欏笀璧勬牸鑰冭瘯锛?014骞撮浂鍩虹绮捐璇剧▼锛夈€愪腑澶х綉鏍°€?>鏁欏笀璧勬牸鑰冭瘯锛?014骞撮浂鍩虹绮捐璇剧▼锛夈€愪腑澶х綉鏍°€?lt;/a>
<p><span class="free" style="margin-right:9px">鍏嶈垂</span><span class="symbol">|</span><a href="#" title="涓ぇ缃戞牎">涓ぇ缃戞牎</a></p>
</div>
</li>
</ul>
<ul class="img-hide">
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/jobmarket1.jpg" alt="浼犵粺閿€鍞彂灞曚箣閬擄紵閿€鍞汉鍛樺浣曞偓娆撅紵濡備綍鍒╃敤浜掕仈缃戝仛浼犵粺閿€鍞? title="浼犵粺閿€鍞彂灞曚箣閬擄紵閿€鍞汉鍛樺浣曞偓娆撅紵濡備綍鍒╃敤浜掕仈缃戝仛浼犵粺閿€鍞? width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="浼犵粺閿€鍞彂灞曚箣閬擄紵閿€鍞汉鍛樺浣曞偓娆撅紵濡備綍鍒╃敤浜掕仈缃戝仛浼犵粺閿€鍞?>浼犵粺閿€鍞彂灞曚箣閬擄紵閿€鍞汉鍛樺浣曞偓娆撅紵濡備綍鍒╃敤浜掕仈缃戝仛浼犵粺閿€鍞?lt;/a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="閭㈠竻鏁欒偛">閭㈠竻鏁欒偛</a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/jobmarket2.jpg" alt="浜洪檯鍏崇郴鍜屾惌璁矡閫氭妧宸с€愭江宸炲闄€? title="浜洪檯鍏崇郴鍜屾惌璁矡閫氭妧宸с€愭江宸炲闄€? width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="浜洪檯鍏崇郴鍜屾惌璁矡閫氭妧宸с€愭江宸炲闄€?>浜洪檯鍏崇郴鍜屾惌璁矡閫氭妧宸с€愭江宸炲闄€?lt;/a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="娼窞瀛﹂櫌">娼窞瀛﹂櫌</a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/jobmarket3.jpg" alt="缃戠珯鍒朵綔瀹炴垬鏁欏-鎶€鏈€荤洃甯︿綘鎷夸笅楂樺伐璧? title="缃戠珯鍒朵綔瀹炴垬鏁欏-鎶€鏈€荤洃甯︿綘鎷夸笅楂樺伐璧? width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="缃戠珯鍒朵綔瀹炴垬鏁欏-鎶€鏈€荤洃甯︿綘鎷夸笅楂樺伐璧?>缃戠珯鍒朵綔瀹炴垬鏁欏-鎶€鏈€荤洃甯︿綘鎷夸笅楂樺伐璧?lt;/a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="娼窞瀛﹂櫌">娼窞瀛﹂櫌</a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/jobmarket4.jpg" alt="銆愯亴鍦恒€佺敓娲诲繀澶囥€戠敓娲绘棤澶勪笉閿€鍞紝閿€鍞汉鍛樹笟缁╁€嶅鐨勭璇€" title="銆愯亴鍦恒€佺敓娲诲繀澶囥€戠敓娲绘棤澶勪笉閿€鍞紝閿€鍞汉鍛樹笟缁╁€嶅鐨勭璇€" width="220" height="124" border="0"></a>
<a href="#" class="course-description" title="銆愯亴鍦恒€佺敓娲诲繀澶囥€戠敓娲绘棤澶勪笉閿€鍞紝閿€鍞汉鍛樹笟缁╁€嶅鐨勭璇€">銆愯亴鍦恒€佺敓娲诲繀澶囥€戠敓娲绘棤澶勪笉閿€鍞紝閿€鍞汉鍛樹笟缁╁€嶅鐨勭璇€</a>
<p><span class="free" style="margin-right:5px">鍏嶈垂</span> <span class="symbol">|</span><a href="#" title="閭㈠竻鏁欒偛">閭㈠竻鏁欒偛</a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/jobmarket5.jpg" alt="蹇冪悊淇蹇冪伒闇€瑕佷竴娆℃梾琛屾櫤鎱х簿鍝佸叕寮€璇? title="蹇冪悊淇蹇冪伒闇€瑕佷竴娆℃梾琛屾櫤鎱х簿鍝佸叕寮€璇? width="220" height="124" border="0">
<i class="icon-card-play"></i>
</a>
<a href="#" class="course-description" title="蹇冪悊淇蹇冪伒闇€瑕佷竴娆℃梾琛屾櫤鎱х簿鍝佸叕寮€璇?>蹇冪悊淇蹇冪伒闇€瑕佷竴娆℃梾琛屾櫤鎱х簿鍝佸叕寮€璇?lt;/a>
<p><span class="free" style="margin-right:9px">鍏嶈垂</span><span class="symbol">|</span><a href="#" title="閭㈠竻鏁欒偛">閭㈠竻鏁欒偛</a></p>
</div>
</li>
<li>
<div class="menu-course-card">
<a href="#" class="course-img"><img src="picture/recommend5.jpg" alt="100%鎵惧埌濂藉伐浣滅殑绉樿瘈" title="100%鎵惧埌濂藉伐浣滅殑绉樿瘈" width="220" height="124" border="0"> 鍏€侌煡?濡備綍璁╁涔犱笉鍐嶇洸鐩?/h2>
绗竴銆佸甫鐫€鐩爣鍘诲涔狅紝鏃犺鐪嬩功鎶ヨ杩樻槸鍚勭绾夸笅娲诲姩銆? 棣栧厛瑕佹槑纭嚜宸辩殑瀛︿範鐩爣鏄粈涔堬紝鏄兂瑙ｅ喅浠€涔堥棶棰橈紝瀹炵幇鎬庢牱鐨勭洰鏍囥€?
绗簩銆佸涔犺寤虹珛涓汉鐭ヨ瘑浣撶郴
鐭ヨ瘑鏄涓嶅畬鐨勶紝涔︾睄鏄旦濡傜儫娴风殑銆傛垜浠敖鎯呭緶寰夊叾涓殑鏃跺€欙紝鍗冧竾涓嶈琚捣姘存饭姝伙紝娌℃湁鑷垜浜嗐€傚湪瀛︿範杩囩▼涓紝鎴戜滑浼氬彂鐜版瘡涓€涓煡璇嗙偣閮芥槸鏈夊ス鐨勮竟鐣屽拰鑳屾櫙鐨勶紝鎴戜滑瑕佸杽浜庡綊绾虫暣鐞嗙煡璇?
![Spring MVC 自学杂记（五） -- SpringMVC与前台的json数据交互[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)