@charset "utf-8";
/* CSS Document */ 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,a,p,blockquote,th,td{margin:0;padding:0;color:#333;} 
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} 
ul,li{list-style:none; margin:0; padding:0;}
a img{border:0;display: block;}
em,i{font-style: normal;}
a:hover *,*:hover{-webkit-transition: all 320ms ease-out 0s;-moz-transition: all 320ms ease-out 0s;
  -o-transition: all 320ms ease-out 0s;transition: all 320ms ease-out 0s;}
/*颜色字体设置-start-*/
a,li:hover a,a:hover,a:active,a:focus{text-decoration: none;}
body{background:#f7f7f7;overflow-x:hidden;font-size:24px;color: #333;font-family: "微软雅黑",Verdana, Arial, Helvetica, sans-serif;line-height:30px;}
html,body{height:auto;width: 750px;margin: 0 auto;}
/*颜色字体设置-end-*/
/******base*******/ 
.bk5,.bk10,.bk20,.bk30,.bk40,.bk50,.bk60,.bk70,.bk80,.bk90,.bk100,.bk120,.bk140{width:100%;overflow: hidden;clear: both;display: block;}
.bk5{height:5px;}
.bk10{height:10px;}
.bk20{height:20px;}
.bk30{height:30px;}
.bk40{height:40px;}
.bk50{height:50px;}
.bk60{height:60px;}
.bk70{height:70px;}
.bk80{height:80px;}
.bk90{height:90px;}
.bk100{height:100px;}
.bk120{height:120px;}
.bk140{height:140px;}
/******other*******/ 
.fl{float:left;display: inline-block;}
.fr{float:right;display: inline-block;}
/******clear float*******/ 
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 
.clearfix {display: inline-table;} 
/* Hides from IE-mac \*/ 
* html .clearfix {height: 1%;} 
.clearfix {display: block;} 
/*padding*/
.box_pd_40{padding: 0 40px;}
.box_pd_20{padding: 20px;}
/*border*/
.boder_50{-ms-border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;-o-border-radius: 50%; border-radius: 50%;}
.boder_80{-ms-border-radius: 80px; -moz-border-radius: 80px; -webkit-border-radius: 80px;-o-border-radius: 80px; border-radius: 80px;}
.boder_20{-ms-border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;-o-border-radius: 20px; border-radius: 20px;}
.boder_5{-ms-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius:5px;-o-border-radius:5px; border-radius:5px;}
.boder_10{-ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius:10px;-o-border-radius:10px; border-radius:10px;}
.boder_15{-ms-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius:15px;-o-border-radius:15px; border-radius:15px;}
/*btn*/
.btn_sty_1{width: 100%;height:80px;line-height:80px;text-align: center;color: #fff;
  background:#ff5500;font-size: 32px;
  background:-webkit-linear-gradient(left, #ff9701, #ff5301);
  background:-moz-linear-gradient(left, #ff9701, #ff5301);
  background:-o-linear-gradient(left, #ff9701, #ff5301);
  background:linear-gradient(left, #ff9701, #ff5301);
  -ms-border-radius: 80px; -moz-border-radius: 80px; -webkit-border-radius: 80px;-o-border-radius: 80px; border-radius: 80px;}
.btn_sty_2{width: 100%;height:100px;line-height:100px;text-align: center;color: #fff;
  background:#ff5500;font-size: 32px;position: fixed;left: 0;bottom: 0;z-index: 99;
  background:-webkit-linear-gradient(left, #ff9701, #ff5301);
  background:-moz-linear-gradient(left, #ff9701, #ff5301);
  background:-o-linear-gradient(left, #ff9701, #ff5301);
  background:linear-gradient(left, #ff9701, #ff5301);}
.box_sty_1{position: fixed;left: 0;bottom: 0;z-index: 9999;height: 100px;width: 100%;line-height: 100px;display: block;
  text-align: center;color: #a6a6a6;font-size: 32px;border: 1px solid #e5e5e5;background: #fff;}
.btn_sty_3:hover{color: #a6a6a6;}
/*bg*/
.back_grd_1{background:#ff5500;
  background:-webkit-linear-gradient(left, #ff9701, #ff5301);
  background:-moz-linear-gradient(left, #ff9701, #ff5301);
  background:-o-linear-gradient(left, #ff9701, #ff5301);
  background:linear-gradient(left, #ff9701, #ff5301);}
/*input*/
input,button,textarea,select{border: none;background: #fff;}

input::-webkit-input-placeholder{color:#a6a6a6;}
input::-moz-placeholder{color:#a6a6a6;}
input:-moz-placeholder{color:#a6a6a6;}
input:-ms-input-placeholder{color:#a6a6a6;}
/*other*/
.disnone{display: none;}
.text-c{text-align: center;}
.text_oh{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block;width: 100%;}
.m20{margin: 0 20px;}
/*导航样式*/
.nav_sty_1{width: 100%;height:100px;line-height: 100px;}
.nav_sty_1 .back{color: #fff;font-size: 48px;line-height: 100px;}
.nav_sty_1 .sear{color: #fff;font-size: 32px;line-height: 100px;}
.nav_sty_1 .tit{font-size: 32px;color: #fff;display: block;}
.nav_sty_1 .lq{width: 100%;display: block;text-align: right;color: #fff;line-height: 100px;}
.fixed_top{position: fixed;top:0;left: 0;z-index: 999999999;}
/*导航样式2*/
.nav_sty_2{width: 100%;height:100px;line-height: 100px;}
.nav_sty_2 .col-xs-1{padding: 0;text-align:center;}
.nav_sty_2 .back{color: #fff;font-size: 48px;line-height: 100px;}
.nav_sty_2 .box{margin: 20px 0 0;display: block;background: rgba(255,255,255,.9);overflow: hidden;
  width: 100%;height: 60px;line-height: 60px;padding: 0 0 0 20px;}
.nav_sty_2 .box i{font-size: 32px;line-height: 60px;color: #ff5500;display: inline-block;width: 10%;}
.nav_sty_2 .box input{width: 90%;background: transparent;line-height: 60px;}
.nav_sty_2 .btns{margin: 20px 0 0;
  font-size: 28px;color: #fff;display: block;background: #fff;color:#ff5500;width: 100%;height: 60px;line-height: 60px;}
/*导航样式2*/
.nav_sty_3{width: 100%;height:100px;line-height: 100px;}
.nav_sty_3 .col-xs-1{padding: 0;text-align:center;}
.nav_sty_3 .back{color: #fff;font-size: 48px;line-height: 100px;}
.nav_sty_3 .box{margin: 20px 0 0;display: block;background:#fff;overflow: hidden;
  width: 100%;height: 60px;line-height: 60px;padding: 0 0 0 20px;}
.nav_sty_3 .box a{font-size: 32px;line-height: 60px;color: #ccc;display: inline-block;width: 10%;}
.nav_sty_3 .box input{width: 90%;background: transparent;line-height: 60px;}
.nav_sty_3 .btns{margin: 20px 0 0;
  font-size: 28px;color: #fff;display: block;background: #fff;color:#ff5500;width: 100%;height: 60px;line-height: 60px;}
/*导航样式2*/
.nav_sty_4{width: 100%;height:100px;line-height: 100px;text-align: center;padding: 0 20px;}
.nav_sty_4 .search{margin: 20px 0 0;display: block;background:#fff;overflow: hidden;text-align: center;color:#a6a6a6
  -ms-border-radius: 80px; -moz-border-radius: 80px; -webkit-border-radius: 80px;-o-border-radius: 80px; border-radius: 80px;
  width: 100%;height: 60px;line-height: 60px;padding: 0 0 0 20px;}
/*表单样式*/
.form_sty_1 .li{line-height: 80px;background: #fff;margin: 0 0 2px;padding: 0 40px;display: block;}
.form_sty_1 .li .s1{line-height: 80px;width:160px;}
.form_sty_1 .li i{color: #999;font-size: 48px;line-height: 80px;}
.form_sty_1 .li input{text-align: right;width:460px;}
.form_sty_1 .li textarea{width: 100%;line-height: 40px;padding: 20px 0;}
/*选项卡*/
.tabbable_sty_1{}
.tabbable_sty_1 .nav-tabs{
    border-bottom: 1px solid #e5e5e5;background: #fff;margin: 0 0 10px;}
.tabbable_sty_1 .nav-tabs li{width: 25%;text-align: center;padding: 0 5%;}
.tabbable_sty_1 .nav-tabs>li>a {margin:0;line-height:100px;border: none;border-radius: 0;font-size: 32px;}
.tabbable_sty_1 .nav>li>a {padding:0;}
.tabbable_sty_1 .nav-tabs>li.active>a,.tabbable_sty_1 .nav-tabs>li.active>a:focus,.tabbable_sty_1 .nav-tabs>li.active>a:hover {
    color: #ff5500;background: #fff;
    border:none;border-bottom: 1px solid #ff5500;}
.tabbable_sty_1 .nav>li>a:focus,.tabbable_sty_1 .nav>li>a:hover {text-decoration: none;background:none;}


/*选项卡2*/
.tabbable_sty_2{}
.tabbable_sty_2 .nav-tabs{
    border-bottom: 1px solid #e5e5e5;background: #fff;margin: 0 0 10px;}
.tabbable_sty_2 .nav-tabs li{width: 33.33333%;text-align: center;}
.tabbable_sty_2 .nav-tabs>li>a {margin:0;line-height:100px;border: none;border-radius: 0;font-size: 32px;}
.tabbable_sty_2 .nav>li>a {padding:0;}
.tabbable_sty_2 .nav-tabs>li.active>a,.tabbable_sty_2 .nav-tabs>li.active>a:focus,.tabbable_sty_2 .nav-tabs>li.active>a:hover {
    color: #ff5500;background: #fff;
    border:none;border-bottom: 1px solid #ff5500;}
.tabbable_sty_2 .nav>li>a:focus,.tabbable_sty_2 .nav>li>a:hover {text-decoration: none;background:none;}

/*选项卡*/
.tabbable_sty_3{}
.tabbable_sty_3 .nav-tabs{
    border-bottom: 1px solid #e5e5e5;background: #fff;margin: 0 0 10px;}
.tabbable_sty_3 .nav-tabs li{width: 50%;text-align: center;padding: 0 5%;}
.tabbable_sty_3 .nav-tabs>li>a {margin:0;line-height:100px;border: none;border-radius: 0;font-size: 32px;}
.tabbable_sty_3 .nav>li>a {padding:0;}
.tabbable_sty_3 .nav-tabs>li.active>a,.tabbable_sty_3 .nav-tabs>li.active>a:focus,.tabbable_sty_3 .nav-tabs>li.active>a:hover {
    color: #ff5500;background: #fff;
    border:none;border-bottom: 1px solid #ff5500;}
.tabbable_sty_3 .nav>li>a:focus,.tabbable_sty_3 .nav>li>a:hover {text-decoration: none;background:none;}

/*底部固定*/
.fixed_box_1{position: fixed;left: 0;bottom: 0;z-index: 9999;background: #f7f7f7;height: 120px;padding: 20px;width: 100%;}
.fixed_box_1 a{width: 350px;height: 80px;line-height: 80px;text-align: center;color: #fff;font-size: 32px;display: inline-block;}
.fixed_box_1 a.a1{background: #ff9002;}
.fixed_box_1 a.a2{background: #ff5500;}

/*底部固定*/
.fixed_box_2{position: fixed;left: 0;bottom: 0;z-index: 9999;background: #fff;height: 100px;width: 100%;border-top: 1px solid #e5e5e5;}
.fixed_box_2 button{width: 50%;height:100px;line-height:100px;text-align: center;color: #fff;font-size: 32px;display: inline-block;border: none;}
.fixed_box_2 a{width: 50%;height:100px;line-height:100px;text-align: center;color: #fff;font-size: 32px;display: inline-block;border: none;}
.fixed_box_2 .a1{background: #fff;color: #333;}
.fixed_box_2 .a2{background: #ff5500;}
/*底部固定*/
.fixed_box_3{position: fixed;left: 0;bottom: 0;z-index: 9999;background: #fff;height: 120px;width: 100%;border-top: 1px solid #e5e5e5;}
.fixed_box_3 a{width: 25%;float: left;display: inline-block;text-align: center;padding: 10px 0 0;}
.fixed_box_3 a i{width: 60px;height: 60px;display: inline-block;}
.fixed_box_3 a i.ic_1{background: url(../images/ic_h1.png) center no-repeat;}
.fixed_box_3 a i.ic_2{background: url(../images/ic_h2.png) center no-repeat;}
.fixed_box_3 a i.ic_3{background: url(../images/ic_h3.png) center no-repeat;}
.fixed_box_3 a i.ic_4{background: url(../images/ic_h4.png) center no-repeat;}
.fixed_box_3 a.on span,.fixed_box_3 a:hover span{color:#ff5500;}
.fixed_box_3 a.on i.ic_1,.fixed_box_3 a:hover i.ic_1{background: url(../images/ic_h1b.png) center no-repeat;}
.fixed_box_3 a.on i.ic_2,.fixed_box_3 a:hover i.ic_2{background: url(../images/ic_h2b.png) center no-repeat;}
.fixed_box_3 a.on i.ic_3,.fixed_box_3 a:hover i.ic_3{background: url(../images/ic_h3b.png) center no-repeat;}
.fixed_box_3 a.on i.ic_4,.fixed_box_3 a:hover i.ic_4{background: url(../images/ic_h4b.png) center no-repeat;}

.fixed_box_3 a span{line-height: 40px;display: block;}
/**/
.fixed_box_4{position: fixed;left: 0;bottom: 0;z-index: 9999;text-align: right;padding: 20px;
  background: #fff;height: 100px;width: 100%;border-top: 1px solid #e5e5e5;}
.fixed_box_4 a{width: 160px;height: 60px;line-height: 60px;text-align: center;margin: 0 0 0 20px;display: inline-block;
  -ms-border-radius: 80px; -moz-border-radius: 80px; -webkit-border-radius: 80px;-o-border-radius: 80px; border-radius: 80px;}
.fixed_box_4 a.a1{border: 1px solid #ccc;}
.fixed_box_4 a.a2{color:#ff5500;border: 1px solid #ff5500;}
/**/
.fixed_box_5{position: fixed;left: 0;bottom: 0;z-index: 9999;background: #fff;height: 100px;width: 100%;border-top: 1px solid #e5e5e5;}
.fixed_box_5 .btns{width: 30%;height: 100px;line-height: 100px;display: inline-block;text-align: center;
  background: #ff5500;color: #fff;font-size: 32px;}
.fixed_box_5 .txt{margin: 0 20px 0 0;line-height: 100px;}
.fixed_box_5 .txt span{color:#ff5500;}

/**/
.fixed_box_6{position: fixed;left: 0;bottom: 0;z-index: 99;background: #fff;height: 120px;width: 100%;border-top: 1px solid #e5e5e5;
  padding:10px 20px;text-align: center;}
.fixed_box_6 .aa{width: 14%;float: left;display: inline-block;padding: 10px 0 0;}
.fixed_box_6 .aa i{width: 60px;height: 60px;display: inline-block;}
.fixed_box_6 .aa .ic_1{background: url(../images/ic_h1.png) center no-repeat;}
.fixed_box_6 .aa .ic_2{background: url(../images/ic_h5.png) center no-repeat;}
.fixed_box_6 .aa .ic_3{background: url(../images/ic_h6.png) center no-repeat;}
.fixed_box_6 .aa span{display: block;}
.fixed_box_6 .aa:hover .ic_1{background: url(../images/ic_h1b.png) center no-repeat;}
.fixed_box_6 .aa:hover .ic_2{background: url(../images/ic_h5b.png) center no-repeat;}
.fixed_box_6 .aa:hover .ic_3,.fixed_box_6 .aa.on .ic_3{background: url(../images/ic_h6b.png) center no-repeat;}
.fixed_box_6 .aa:hover span,.fixed_box_6 .aa.on span{color:#ff5500;}

.fixed_box_6 .a2,.fixed_box_6 .a3{width: 200px;height: 80px;line-height: 80px;color: #fff;font-size: 28px;margin: 10px 0 0;}
.fixed_box_6 .a2 p,.fixed_box_6 .a3 p{color: #fff;line-height: 30px;}
.fixed_box_6 .a2 .a2a,.fixed_box_6 .a3 .a2a{margin: 10px 0 0;}
.fixed_box_6 .a2{background: #ff5500;
  -ms-border-top-right-radius:60px; -moz-border-top-right-radius:60px; -webkit-border-top-right-radius:60px;
  -o-border-top-right-radius: 60px; border-top-right-radius:60px;
  -ms-border-bottom-right-radius:60px; -moz-border-bottom-right-radius:60px; -webkit-border-bottom-right-radius:60px;
  -o-border-bottom-right-radius:60px; border-bottom-right-radius:60px;}
.fixed_box_6 .a3{background: #ff9002;
  -ms-border-top-left-radius:60px; -moz-border-top-left-radius:60px; -webkit-border-top-left-radius:60px;
  -o-border-top-left-radius: 60px; border-top-left-radius:60px;
  -ms-border-bottom-left-radius:60px; -moz-border-bottom-left-radius:60px; -webkit-border-bottom-left-radius:60px;
  -o-border-bottom-left-radius:60px; border-bottom-left-radius:60px;}
/*图标*/
.ic_mr{background: #fff2ec;color:#ff9002;padding: 0 10px;}

/*开关*/
.Switch input {display: none}
.Switch label {float: right;width:110px;height:60px;background: #e5e5e5;
  border-radius:40px;margin: 10px 0 0;box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;}
.Switch label em{width:56px;height:56px;float: left;
  margin: 2px;border-radius:40px;box-shadow: 2px 3px 8px rgba(0,0,0,.1);background: #fff;}
.Switch input:checked + label {background:#ff5500;}
.Switch input:checked + label em {float: right;}
.Switch input:disabled + label {opacity: 0.5}

/*标题*/
.warp_sty_1{background: #fff;overflow: hidden;}
.warp_sty_1 .warp_tit{line-height: 100px;padding: 0 20px;font-size: 32px;}
.warp_sty_1 .warp_box{padding: 0 20px 20px;}

/*标题2*/
.warp_sty_2{background: #fff;overflow: hidden;}
.warp_sty_2 .warp_tit{line-height: 100px;padding: 0 20px;font-size: 32px;}
.warp_sty_2 .warp_tit span{border-left: 5px solid #ff5500;padding: 0 0 0 15px;}
.warp_sty_2 .warp_tit a{color:#ff5500}
.warp_sty_2 .warp_box{padding: 0 20px 20px;}

/*标题3*/
.warp_sty_3{background: #fff;overflow: hidden;}
.warp_sty_3 .warp_tit{line-height: 100px;padding: 0 20px;font-size: 32px;}
.warp_sty_3 .warp_tit span{border-left: 5px solid #ff5500;padding: 0 0 0 15px;}
.warp_sty_3 .warp_tit a{color:#ff5500}
.warp_sty_3 .warp_box{padding: 0 20px 20px;}

/*进度条*/
.progress {height:30px;overflow: hidden;margin:0;background:#ffb7b8;border-radius:30px;-webkit-box-shadow: none;box-shadow: none;}
.progress-bar-danger{background-color:#ff5500;}
/*弹出窗口*/
.modal-dialog {position: relative;width:80%;margin:0 auto; }
.modal-content {background: #fff;border:none;border-radius: 0;-webkit-box-shadow: none;}

/**/








/*
字体 24px 28px 32px  48px
红色 color:#ff5500   金色 color:#fbedc6     绿色 color:#1fae20    橙色 color:#ff9002;
灰色 color:#333  color:#a6a6a6
background: #f7f7f7;  background: #fff2ec;橙色
border-bottom: 1px solid #e5e5e5;
line-height:80px;
渐变 #ff9701, #ff5301
头像120
颜色  
hvr-shutter-out-horizontal   fa-angle-right
<img  class="lazy" data-original="images/example.jpg">
返回上一页 <a href="javascript :;" class="fa-angle-left fa" onClick="javascript :history.back(-1);"></a>

多行隐藏   display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;
行业省略   overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block;

border    -ms-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;-o-border-radius: 5px; border-radius: 5px;
          -ms-border-radius: 40px; -moz-border-radius: 40px; -webkit-border-radius: 40px;-o-border-radius: 40px; border-radius: 40px;
          -ms-border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;-o-border-radius: 50%; border-radius: 50%;          

缓冲      -ms-transition: all 320ms ease-out 0s;-moz-transition: all 320ms ease-out 0s;
          -webkit-transition: all 320ms ease-out 0s;-o-transition: all 320ms ease-out 0s;transition: all 320ms ease-out 0s;

旋转      -ms-transform:rotate(360deg);-moz-transform:rotate(360deg);
          -webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);

          -ms-transform:rotate(180deg);-moz-transform:rotate(180deg);
          -webkit-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg); 

缩放      transform: scale(1);-moz-transform: scale(1);-webkit-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);
          transform: scale(0);-moz-transform: scale(0);-webkit-transform: scale(0);-o-transform: scale(0);-ms-transform: scale(0);

缩放      transform: scale(1.2);-moz-transform: scale(1.2);-webkit-transform: scale(1.2);-o-transform: scale(1.2);-ms-transform: scale(1.2); 
          -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.2, M12=0, M21=0, M22=1.2, SizingMethod='auto expand')"; 
          filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.2, M12=0, M21=0, M22=1.2, SizingMethod='auto expand'); 
          background-position:center;

透明度    filter:alpha(opacity=80);-ms-opacity:0.8;-moz-opacity:0.8;-webkit-opacity:0.8;-o-opacity:0.8;opacity: 0.8;

灰度      -ms-filter: grayscale(1);-moz-filter:grayscale(1);-webkit-filter:grayscale(1);-o-filter: grayscale(1);filter:grayscale(1);

位移      -ms-transform:translateY(-20px);-moz-transform:translateY(-20px);-webkit-transform:translateY(-20px);
          -o-transform:translateY(-20px);transform:translateY(-20px); 

          -ms-transform:translateX(-20px);-moz-transform:translateX(-20px);-webkit-transform:translateX(-20px);
          -o-transform:translateX(-20px);transform:translateX(-20px); 
          
定义字体   @font-face {font-family: fzlej;src: url(../font/fzlej.ttf);}
两边对齐   text-align:justify; text-justify:inter-ideograph;
背景透明   background: rgba(0,0,0,.6);
清除属性   float:none; position:static;
空元素     font-size:0;display:none;overflow:hidden;height:0;width: 0;
字体       font-family: "微软雅黑",Verdana, Arial, Helvetica, sans-serif;
空格       span style="white-space:pre";
背景透明   background:transparent;   
轮廓线     outline:#00ff00 dotted thick;
边框阴影   box-shadow:4px 2px 6px 6px #333333 inset;
文本阴影   text-shadow: X-Offset Y-Offset blur color;
分列       columns:100px 3;
文本颜色   input::-webkit-input-placeholder{color:#fff;}
          input::-moz-placeholder{color:#fff;}
          input:-moz-placeholder{color:#fff;}
          input:-ms-input-placeholder{color:#fff;}

不常用
图片居中   .img_center {display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;
            -webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;
            justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}
          .img_center img{max-width: 100%;max-height: 100%;display: block;vertical-align: middle;}

渐变       background:#c90900;
           background:-webkit-radial-gradient(top, circle cover, #d8140b 0%, #950800 80%);
           background:-moz-radial-gradient(top, circle cover, #d8140b 0%, #950800 80%);
           background:-o-radial-gradient(top, circle cover, #d8140b 0%, #950800 80%);
           background:radial-gradient(top, circle cover, #d8140b 0%, #950800 80%);
           线性 -webkit-linear-gradient(left, #00DAEE, #00EA8F);

背景      background: radial-gradient(white, #EEF6F9);   渐变
          background-attachment: fixed;    背景固定
          background-clip:content-box;     背景裁剪  border-box 背景被裁剪到边框盒。 padding-box 背景被裁剪到内边距框。 content-box 背景被裁剪到内容框。
          background-size:80px 60px;       背景大小  length值    percentage百分比    cover完全覆盖    contain完全适应

边框      border: medium double rgb(250,0,255) 
          borde-with: thin细的边框。 medium  默认;中等的边框。thick粗的边框。length宽度。inherit规定应该从父元素继承边框宽度。
          border-style: dotted点状边框。   dashed虚线。solid 实线。  double 双线。               groove  3D凹槽边框。
                        ridge 3D垄状边框。 inset 3Dinset边框。       outset 3Doutset边框。

边框图片  border:15px solid transparent;border-image:url(/i/border.png) 30 30 round;
          border-image-source 图片路径。  border-image-slice  图片边框向内偏移。 border-image-width  图片边框的宽度。     
          border-image-outset 边框图像区域超出边框的量。                         
          border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。


H5样式
阴影      box-shadow:4px 2px 6px 6px #333333 inset;
          h-shadow  必需。水平阴影的位置。允许负值。  v-shadow  必需。垂直阴影的位置。允许负值。  
          blur  可选。模糊距离。                      spread  可选。阴影的尺寸。 
          color 可选。阴影的颜色。                    inset 可选。将外部阴影 (outset) 改为内部阴影。
缩放      -ms-transform:scale(1.2);-moz-transform:scale(1.2);-webkit-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2);  
          scale(x,y)  定义 2D 缩放转换。                    scale3d(x,y,z)  定义 3D 缩放转换。 
          scaleX(x)   通过设置 X 轴的值来定义缩放转换。     scaleY(y) 通过设置 Y 轴的值来定义缩放转换。 
          scaleZ(z)   通过设置 Z 轴的值来定义 3D 缩放转换。
旋转      -ms-transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg); 
          rotate(angle)   定义 2D 旋转，在参数中规定角度。  rotate3d(x,y,z,angle) 定义 3D 旋转。 
          rotateX(angle)  定义沿着 X 轴的 3D 旋转。         rotateY(angle)  定义沿着 Y 轴的 3D 旋转。  
          rotateZ(angle)  定义沿着 Z 轴的 3D 旋转。
位移      -ms-transform:translateX(45px);-moz-transform:translateX(45px);-webkit-transform:translateX(45px);-o-transform:translateX(45px);transform:translateX(45px);    
          translate(x,y)  定义 2D 转换。                    translate3d(x,y,z)  定义 3D 转换。 
          translateX(x)   定义转换，只是用 X 轴的值。       translateY(y) 定义转换，只是用 Y 轴的值。 
          translateZ(z)   定义 3D 转换，只是用 Z 轴的值。
倾斜      -ms-transform:skew(160deg,160deg);-moz-transform:skew(160deg,160deg);-webkit-transform:skew(160deg,160deg);-o-transform:skew(160deg,160deg);transform:skew(160deg,160deg);     
          skewX(angle)  定义沿着 X 轴的 2D 倾斜转换。       skewY(angle)  定义沿着 Y 轴的 2D 倾斜转换。
          skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。


优化

<script>
  (function(){
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      if (curProtocol === 'https') {
          bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
      }
      else {
          bp.src = 'http://push.zhanzhang.baidu.com/push.js';
      }
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
  })();
</script>


*/