@charset utf-8;

 CSS Document 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td,img { padding 0; margin 0;}
fieldset,img { border 0;}
address,caption,cite,code,dfn,em,strong,th,var,i { font-weight normal; font-style normal;}
ol,ul,li { list-style none;}
caption,th { text-align left;}
h1,h2,h3,h4,h5,h6 { font-weight normal; font-size 100%;}
qbefore,qafter { content'utf-8';}
abbr,acronym { border 0;}

-- All --
html{ min-width1000px;}
body{ color#333;font12px20px Arial,Microsoft YaHei,宋体,sans-serif;  background#fff;}
a{ color#333; text-decorationnone; outlinenone;}
ahover {color#f00; text-decorationunderline;}
table { border-collapse collapse; border-spacing 0; empty-cellsshow;}
table td,table th{ border#ddd solid 1px; padding 5px 0;}
table th{ background#39A4DC; color#fff;}
table .new td{ color#f60; font-weightbold;}


 css三角形 
.arrow,.arrow s { positionrelative;  displayblock; font-size 0; line-height 0; width 0; height 0; border-colortransparent; border-styledashed; border-width5px;}
.arrowR,.arrowR s{ border-left-color#aaa; border-left-stylesolid;}
.arrowR s{ border-left-color#fff; positionabsolute; left-7px; top-5px;}
.arrowRhover{ border-left-color#f60;}

.arrowL,.arrowL s{ border-right-color#aaa; border-right-stylesolid;}
.arrowL s{ border-right-color#fff; positionabsolute; right-7px; top-5px;}
.arrowLhover{ border-right-color#f60;}

.arrowT,.arrowT s{ border-bottom-color#aaa; border-bottom-stylesolid;}
.arrowT s{ border-bottom-color#fff; positionabsolute; left-5px; top-3px;}
.arrowThover{ border-bottom-color#f60;}

.arrowB,.arrowB s{ border-top-color#aaa; border-top-stylesolid;}
.arrowB s{ border-top-color#fff; positionabsolute; left-5px; bottom-3px;}
.arrowBhover{ border-top-color#f60;}

 css圆形 
.circle{ line-height100%; overflowhidden;  font-familyTahoma,Helvetica; font-size18px; color#aaa;}
.circlehover{ color#f60;}

 顶部导航条 
	#header{ width100%; left0; top0; positionfixed; z-index10;  height32px; line-height32px; color#fff; text-alignleft; overflowhidden;}
	#header .headerBg{ width100%; height32px; left0; top0; positionabsolute; z-index0; background#000; filteralpha(opacity=70);opacity0.7;}
	#header a{ color#fff;}
	#header #logo{ positionrelative; z-index1; displayinline-block; displayinline; zoom1; font-size14px; margin-right5px; padding-left10px;}
	#header .nav{ positionrelative; z-index2; floatright; padding-right10px;}
	#header .nav a{ padding0 10px;}
	#header .nav a.imp{ color#ff0;}
	#header .title{ positionrelative; z-index1; height32px; overflowhidden;}

	#content{ margin0 auto; padding62px 30px 30px 30px;  positionrelative; text-alignleft; z-index0;}
	#footer{ height34px; line-height34px; text-aligncenter;}

 首页 - index.html  ---------------------------------------------- 



	.indBtn{ text-aligncenter; displaynone;}
	.indBtn a{ vertical-alignmiddle; margin15px 15px 0 0; displayinline-block; displayinline; zoom1; padding14px 22px 3px 22px;  line-height26px;
		color#bede9a; font-size14px;
		-webkit-border-radius5px; -moz-border-radius5px; border-radius5px;
		background#89c941;
		background -webkit-gradient(linear, 0 0, 0 bottom, from(#89c941), to(#72b238));
		background -webkit-linear-gradient(#89c941, #72b238);
		background -moz-linear-gradient(#89c941, #72b238);
		background -ms-linear-gradient(#89c941, #72b238);
		background -o-linear-gradient(#89c941, #72b238);
		background linear-gradient(#89c941, #72b238);
		-pie-background linear-gradient(#89c941, #72b238);
		-webkit-box-shadow #39591c 2px 2px 3px;
		-moz-box-shadow #39591c 2px 2px 3px;
		box-shadow #39591c 2px 2px 3px;}
	.indBtn a em{ font-size30px; displayblock; color#fff;}
	.indIntro ahover{ text-decorationnone; margin11px 15px 0 0;}

	.indTips{ positionfixed; _positionabsolute; width14px; right0; top90px; background#333; padding5px; line-height18px; color#fff; cursorpointer;
		-webkit-border-radius4px; -moz-border-radius4px; border-radius4px;}
	.indTips a{ color#fff; text-decorationnone;}
	#indTips1{ displaynone;}
	#ind2{ displaynone;}
	#ind2 .topic{ font-size60px; height120px; line-height120px;}

 参数 - param.html ---------------------------------------------- 
	.paramPage .param{ width100%;  margin-bottom20px;  background#fff;}
	.paramPage .param th{ text-aligncenter;}
	.paramPage .param td{ text-alignleft; padding5px 2px;}
	.paramPage .param .intro{ text-alignleft;}
	.paramPage .param .link{ color#39A4DC; text-decorationunderline;}
	.paramPage .param .t b{ color#f60;}
	.paramPage .param i{ color#f60;}
	.paramPage .param .on td{ background#ffffaa;}
	.paramPage .param tr.n td{ color#999;  }
	.paramPage .intro a{ text-decorationunderline;}
	.paramPage .notice{ overflowhidden;  text-alignleft; padding-bottom10px;}
	.paramPage .notice li{ width120px; height30px; line-height30px; text-aligncenter; floatleft; margin-right10px; color#fff; background#666; cursorpointer;}
	.paramPage .notice .on{ background#f60;}


 联系作者 ---------------------------------------------- 
	#content .contact{ displaynone;  color#f60;  margin-bottom20px;}


 案例 - demo.html ---------------------------------------------- 

	.demoBox{  padding0 20px 60px 20px;  background#f2f2f2; border-bottom3px dotted #ccc;}
	.demoBox .hd{ padding40px 10px 0 10px;}
	.demoBox .hd h3{ font-size30px; font-weightbold; color#39A4DC; line-height60px;}
	.demoBox .hd h3 span{ color#ccc; font-styleitalic; font-size60px;}
	.demoBox .bd{ padding20px; overflowhidden; zoom1;}
	.demoBox .bd .iframeWrap{ overflowhidden; floatleft;}
	.demoBox iframe{ width100%; height100%;  vertical-alignmiddle;}
	.demoBox .botTit{ height22px; line-height22px; overflowhidden; background#eee; text-alignright; padding5px 0; overflowhidden; displaynone;}
	.demoBox .botTit em{ floatleft; font-weightbold; padding-left10px;}
	.demoBox .botTit span a{ displayblock; floatright; height20px; line-height20px; padding0 5px; background#f60; margin-right10px; color#fff; -webkit-border-radius3px; -moz-border-radius3px; border-radius3px; cursorpointer; displaynone;}
	.demoBox .botTit span ahover{ text-decorationnone; background#f60;}

	.params{ width580px; height100%; margin-left20px; floatleft; _displayinline; background#fff; padding-bottom10px; border1px solid #ddd;}
	.params table{ background#fff;}
	.params table .tit td{ padding 5px 10px; background#39A4DC; color#fff;}
	.params table td{ border1px solid #fff;}
	.params table .n{  width 153px; text-alignright;}
	.params table .new{ color#f00;}
	.params table i{ color#999;}
	.params p{ padding10px 0 0 10px;}
	.params .curJsCode{ color#f60; displayblock; font-familySimSun;}

	.rightNav{ positionfixed; width140px;  right0; top100px; _positionabsolute; text-alignleft; cursorpointer; background-imageurl(......);}
	.rightNav a{ displayblock; positionrelative; height30px; line-height30px; margin-bottom2px; background#fff; padding-right10px; width130px; overflowhidden;  cursorpointer; right-110px;}
	.rightNav ahover{ text-decorationnone; color#39A4DC;}
	.rightNav ahover em{ background#00b700;}
	.rightNav a em{ displayblock; floatleft; width30px; background#39A4DC; color#fff; font-size16px; text-aligncenter; margin-right10px;}
	.rightNav a.new em{ background#f60;}
	.demoBox .iframeWrap{ width452px;}
	.demoBox .iframeWrap iframe{ width452px; height232px;  backgroundurl(imagesloading.jpg) center center no-repeat;}

	#picScroll-left iframe{  height174px;}
	#picScroll-top iframe{  height415px;}
	#picMarquee-left iframe{  height172px;}
	#picMarquee-top iframe{  height415px;}
	#txtScroll-left iframe{  height80px;}
	#txtScroll-top iframe{  height182px;}
	#txtMarquee-left iframe{  height107px;}
	#txtMarquee-top iframe{  height184px;}
	#sideMenu iframe{  height227px;}


	 隐藏代码盒子 
	#displayBox{ z-index10; displaynone; positionfixed; _positionabsolute;   width1000px; height500px;   left50%; top60px; margin-left-500px; background#fff;
	border5px solid #eee; 
	-webkit-box-shadow #333 0 0 8px;
	-moz-box-shadow #333 0 0 8px;
	box-shadow #333 0 0 8px;}
	#displayBox .hd{ height30px; line-height30px; background#eee; padding0 10px; positionrelative;
		background -webkit-gradient(linear, 0 0, 0 bottom, from(#F7F7F7), to(#eee));
		background -webkit-linear-gradient(#F7F7F7, #eee);
		background -moz-linear-gradient(#F7F7F7, #eee);
		background -ms-linear-gradient(#F7F7F7, #eee);
		background -o-linear-gradient(#F7F7F7, #eee);
		background linear-gradient(#F7F7F7, #eee);}
	#displayBox .hd h3{ font-weightbold; color#39A4DC;}
	#displayBox .hd a{ displayblock; positionabsolute; right10px; top7px; width20px; height16px; line-height16px; text-aligncenter;  background#f60; color#fff; cursorpointer;}
	#displayBox .hd ahover{ text-decorationnone;}
	#displayBox .bd{ padding10px 0;  background#fff;}
	#displayBox textarea{ width458px; height230px; padding10px;  border1px solid #ccc; displayblock;}
	#displayBox .bd p{ padding-top10px;}
	#displayBox iframe{ width1000px; height440px; margin0 auto;}


 扩展效果 ---------------------------------------------- 
.authorWord{ margin-bottom25px;   text-alignleft; background#fff;}
.authorWord h3{ padding0 20px;  height30px;  fontnormal 14px30px Microsoft YaHei; overflowhidden; cursorpointer; border-bottom1px dotted #ccc;}
.authorWord h3 .arrow{ floatright; border-top-color#fff; margin-top11px;}
.authorWord .con{ padding10px 20px; line-height22px;}
.authorWord .con p{ margin-bottom5px ;}
.authorWord a{ color#f60; text-decorationunderline;}

.demoList{ overflowhidden; padding-top10px;}
.demoList li{
		positionrelative;  cursorpointer; floatleft; width160px;  text-aligncenter; margin0 30px 30px 0; 
		padding4px 4px 0 4px; background#e3e3e3; color#000;}
.demoList li img{ displayblock; width160px; height120px; backgroundurl(imagesloading.jpg) center center no-repeat;}
.demoList li h3{ height28px; line-height28px;}
.demoList li.new i{ displayblock; positionabsolute; top4px; right4px; z-index1; width31px; height31px;  backgroundurl(imagesnew.jpg) 0 0 no-repeat;}

.demoList li.on{ 	
	background#666; color#fff; 
	-webkit-transform translateY(-10px);
	-moz-transform translateY(-10px);
	-o-transform translateY(-10px);
	-webkit-transition-duration0.3s;
	-o-transition-duration0.3s;
	-moz-transition-duration0.3s;}


	.demoBoxEven{ background#fff;}
	.demoBoxEven .demoList li{}
	.demoBoxEven .demoList li.on{  background#666; color#fff;}

 如何使用 ---------------------------------------------- 
.usePageDl{ width1000px;}
.usePageDl dt h2{ fontnormal 22px150% Microsoft YaHei; _font-weightbold; color#39A4DC;}
.usePageDl dt h2 a{ color#f60; text-decorationunderline;}
.usePageDl dt p{ padding5px 0 10px 33px;}
.usePageDl dt p b{ color#f60;}
.usePageDl dd{ margin-bottom50px;}
.usePage .demoBox{ padding0;}
.usePage .demoBox .bd .iframeWrap{ backgroundnone;}


 下载页面 ----------------------------------------------- 
.downLoadDl{ width1000px;}
.downLoadDl dt h2{ fontnormal 22px150% Microsoft YaHei; _font-weightbold; color#39A4DC;}
.downLoadDl dt h2 a{ font-size12px; color#333; margin-left20px; text-decorationunderline;}
.downLoadDl dd{ margin-bottom50px; padding10px 0;}

.dBtn{ cursorpointer; displayblock;  height30px; line-height30px; width100px; text-aligncenter; font-size16px;  background#6ddb00; color#fff; _font-weightbold;
	-webkit-border-radius4px; -moz-border-radius4px; border-radius4px;
	-webkit-box-shadow #666 1px 1px 2px;
	-moz-box-shadow #666 1px 1px 2px;
	box-shadow #666 1px 1px 2px;}
.dBtnhover{ text-decorationnone; background#65ca00; color#fff; margin-left2px;}
.pBtn{ background#FFA241; font-size12px;}
.pBtnhover{ background#ff8635;}
.pBtn i{ font-familyArial; _font-weightbold; font-size20px;}

.downPage .inculde{ margin-top20px; padding10px; border1px dotted #eee; background#f3f3f3;}
.downPage .inculde li{ color#666;}
.downPage .inculde em{ font-weightbold; color#333;}
.downPage .inculde h3{ font-size14px; font-weightbold; color#c00; padding-bottom10px  ;}
.downPage .inculde a{ color#39A4DC; text-decorationunderline; margin0 2px;}
#whyPay p,#howPay p{ text-indent20px; margin-bottom10px  ;}

.pay{ overflowhidden; padding-bottom5px; vertical-aligntop;}
.pay .pBtn{ floatleft;}
.pay p{ margin-left120px;}
.pay p span{ color#c00;}
.downPage .imp{ color#c00; font-size14px;}

 颜色代码 
#39A4DC 浅蓝色




 校史长廊 
.about-history{
width1200px;height333px;backgroundurl(..imagesclback.png) no-repeat; -webkit-background-size100% 100%; background-size100% 100%;}
.about-history-list 
{width1000px;height333px; padding30px 50px 5px 50px;margin0 auto;}
.about-title {margin-bottom 25px;}
.about-title h3 {margin 0 0 10px;font-size34px;font-weight400;color #2c2c2c;}
.about-title p {margin 0;font-size 36px;font-weight 300;color #ECECEC;}
.title-white h3{ color#d6d6d6;}
.title-white p{ colorrgba(222,222,222,.09);}
.about-history-list{ positionrelative;}
.about-history-list .flex-viewport{ padding0 31px;}
.about-history-list .flex-viewportbefore{ positionabsolute; top50%; right0; left0; border-top1px solid #C7C7C7; content'';}
.about-history-list .slides li{ positionrelative; width150px; height270px; margin-right31px;}
.about-history-list .slides li .item{ positionabsolute; right-32px; bottom0; left-32px; min-height40px; padding44px 0 0 0; background-color#fff; -webkit-transitionall .2s ease; -moz-transitionall .2s ease; -ms-transitionall .2s ease; -o-transitionall .2s ease; transitionall .2s ease;}
.about-history-list .slides li .itembefore{ positionabsolute; top-49px; left50%; width20px; height20px; overflowhidden; margin-left-10px; -webkit-border-radius100%; -moz-border-radius100%; border-radius100%; background-colorrgba(218,183,101,.6); content'';}
.about-history-list .slides li .itemafter{ positionabsolute; top-45px; left50%; width12px; height12px; overflowhidden; margin-left-6px; -webkit-border-radius100%; -moz-border-radius100%; border-radius100%; background-color#850202; content'';}
.about-history-list .slides linth-child(even) .item{ top0; bottomauto; padding0 0 44px;}
.about-history-list .slides linth-child(even) .itembefore{ topauto; bottom-49px;}
.about-history-list .slides linth-child(even) .itemafter{ topauto; bottom-45px;}
.about-history-list .slides li .itemhover{ background-color#850202;}
.about-history-list .slides li .item h3{ positionabsolute; top0; right0; left0; height44px; line-height44px; margin0; font-size20px; font-weight400; colorwhite; text-aligncenter; background-color#850202; -webkit-transitionall .2s ease; -moz-transitionall .2s ease; -ms-transitionall .2s ease; -o-transitionall .2s ease; transitionall .2s ease;}
.about-history-list .slides li .itemhover h3{ color#232323; background-color#fff;}
.about-history-list .slides li .item h3before{ positionabsolute; bottom100%; left50%; margin-left-9px; border-width0 9px 18px; border-stylesolid; border-colortransparent transparent #E2E2E2; content'';}
.about-history-list .slides linth-child(even) .item h3{ topauto; bottom0;}
.about-history-list .slides linth-child(even) .item h3before{ top100%; bottomauto; border-width18px 9px 0; border-color#E2E2E2 transparent transparent;}
.about-history-list .slides li .item .desc{ line-height28px; padding5px 5px; font-size16px; color#333;}
.about-history-list .slides li .itemhover .desc{ color#ffffff;}

.about-history-list .slides li .item .desc p{ margin0;text-alingcenter}
.about-history-list .flex-direction-nav{ padding0; margin0; list-stylenone;}
.about-history-list .flex-direction-nav a{ positionabsolute; top50%; width48px; height160px; line-height160px; overflowhidden; margin-top-80px; font-size50px; font-familysimsun; color#850202; text-aligncenter;}
.about-history-list .flex-direction-nav a.flex-prev{ left-48px;}
.about-history-list .flex-direction-nav a.flex-next{ right-48px;}
.about-history-swiper{ width100%;}
.about-history-swiper .swiper-slide .item{ overflowhidden; -webkit-border-radius5px; -moz-border-radius5px; border-radius5px; background-color#fff;}
.about-history-swiper .swiper-slide .item h3{ margin0; height40px; line-height40px; overflowhidden; font-size20px; text-aligncenter; colorwhite; background-color#e2e2e2;}
.about-history-swiper .swiper-slide .item .desc{ line-height20px; padding10px; font-size14px; color#929292;}
.about-history-swiper .swiper-slide .item .desc p{ margin0;}
.about-history-swiper .about-history-pagination{ positionstatic; margin-top10px;}
.about-history-swiper .about-history-pagination .swiper-pagination-bullet{ background#fff;}
.about-history-swiper .about-history-pagination .swiper-pagination-bullet-active{ background#C91523;}
a{color#414141;text-decorationnone; -webkit-transitionall .2s ease; -moz-transitionall .2s ease; -ms-transitionall .2s ease; -o-transitionall .2s ease; transitionall .2s ease;}ahover{text-decorationnone;}.pull-left{floatleft;}.pull-right{floatright;}.pull-none{floatnone;}.clearfixafter{clearboth;displayblock;visibilityhidden;height0;content.;font-size0;} html .clearfix{zoom1;}first-child+html .clearfix{zoom1;}.container{width980px;margin0 auto;}img{max-width100%;}img.full{displayblock;width100%;}.list{padding0;margin0;list-stylenone;}.hidden{ displaynone;}.col-1{ floatleft; width8.33333333%;}.col-2{ floatleft; width16.66666667%;}.col-3{ floatleft; width25%;}.col-4{ floatleft; width33.33333333%;}.col-5{ floatleft; width41.66666667%;}.col-6{ floatleft; width50%;}.col-7{ floatleft; width58.33333333%;}.col-8{ floatleft; width66.66666667%;}.col-9{ floatleft; width75%;}.col-10{ floatleft; width83.33333333%;}.col-11{ floatleft; width91.66666667%;}.col-12{ floatleft; width100%;}.col-13{ floatleft; width20%;}.col-offset-3{ margin-left25%;}.tb{displaytable; width100%; height100%;}.tbr{displaytable-row;}.tbc{displaytable-cell;vertical-alignmiddle;}