写单独页面的一些通用css样式，做了一点点兼容

/*全局变量*/
*{margin:0;padding:0;}
body{font-size:14px;font-family:"microsoft yahei";overflow:visible;background:url('../images/bg.jpg') top center;}
.phone{max-width:640px;min-width:300px;margin:0 auto}

/*需要宋体添加其class*/
.song{font-family: Hiragino Sans GB,Arial,Helvetica,"宋体",sans-serif;}
html{overflow-x:hidden;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);font-size: 20px;-webkit-tap-highlight-color: transparent;}
.xianzhi{display:block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
/*两端对齐*/
.justify{text-align:justify}
/*分割线*/
hr {display: block;height: 1px;border: 0;border-top: 1px solid #ccc;margin: 1em 0;padding: 0;}
/*合模型PC端ie8以下不兼容*/
*{-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
/*清除下边据空隙或者或者font-size:0*/
img{border:none;vertical-align:bottom;}
img{width:100%;height:auto}
/*--------自定义链接颜色(可选)--------*/
a{color:#333;text-decoration:none;color: inherit;/*继承-不支持IE8以下*/} /*链接-颜色*/
.clearfix:before,.clearfix:after{ content:""; display:table; }
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}
ul li{list-style:none;}
ul{display:block;}
.wapper{width:100%}
.indent{text-indent:2em;}
.pointer{cursor:pointer;}
.fl{float:left;}
.fr{float:right;}
.absolute{position:absolute;}
.relative{position:relative;}
.hidden{overflow:hidden;position:relative;/*IE*/}
.none{display:none;}
.block{display:block;}
.displaybox{display:-webkit-box;display:-moz-box;display:box;}
.displayflex{-webkit-box-flex:3}
.inlineblock{display:inline-block; _zoom:1;*display:inline;}
textarea,input{word-wrap:break-word;word-break:break-all;padding:0px;}
/*圆角*/
.radius-small{border-radius:3px}
.radius{border-radius:5px}
.radius-big{border-radius:10px;}
.radius-circle{border-radius:50%}
/*--边框--*/
.border{border:1px solid black;}
/*--文字间距--*/
.ls{letter-spacing: 1px;}
/*--对齐--*/
.text-left{text-align:left;}
.text-center{text-align:center;}
.text-right{text-align:right;}
/*--text-color--*/
.white{color:white;}
.black{color:black;}
.blue{color:blue}
.red{color:red}
.gray{color:gray}
.yellow{color:yellow}
/*--font-weight--*/
.weight{font-weight:bold;}
b,strong {
font-weight: bold;
}
/*--background-color--*/
.bg-black{background:black !important;}
.bg-white{background:white !important;}
.bg-blue{background:blue !important;}
.bg-red{background:red !important;}
.bg-gray{background:gray !important;}
.bg-yellow{background:yellow !important;}
/*--margin--*/
.mt-little{margin-top: 5px;zoom:1;}
.mt-small{margin-top:10px;zoom:1;}
.mt{margin-top:15px;zoom:1;}
.mt-big{margin-top:20px;zoom:1;}
.mt-large{margin-top:25px;zoom:1;}
.mt-vb{margin-top:30px;zoom:1;}
.mb-little{margin-bottom: 5px;}
.mb-small{margin-bottom:10px;zoom:1;}
.mb{margin-bottom:15px;zoom:1;}
.mb-big{margin-bottom:20px;zoom:1;}
.mb-large{margin-bottom:25px;zoom:1;}
.mb-vb{margin-bottom:30px;zoom:1;}
.ml-little{margin-left: 5px;}
.ml-small{margin-left:10px;zoom:1;}
.ml{margin-left:15px;zoom:1;}
.ml-big{margin-left:20px;zoom:1;}
.ml-large{margin-left:25px;zoom:1;}
.ml-vb{margin-left:30px;zoom:1;}
.mr-little{margin-right: 5px;}
.mr-small{margin-right:10px;zoom:1;}
.mr{margin-right:15px;zoom:1;}
.mr-big{margin-right:20px;zoom:1;}
.mr-large{margin-right:25px;zoom:1;}
.mr-vb{margin-right:30px;zoom:1;}
/*--padding--*/
.pt-little{padding-top:5px;}
.pt-small{padding-top:10px;}
.pt{padding-top:15px;}
.pt-big{padding-top:20px;}
.pt-large{padding-top:25px;}
.pt-vb{padding-top:30px;}
.pb-little{padding-bottom:5px;}
.pb-small{padding-bottom:10px;}
.pb{padding-bottom:15px;}
.pb-big{padding-bottom:20px;}
.pb-large{padding-bottom:25px;}
.pb-vb{padding-bottom:30px;}
.pl-little{padding-left:5px;}
.pl-small{padding-left:10px;}
.pl{padding-left:15px;}
.pl-big{padding-left:20px;}
.pl-large{padding-left:25px;}
.pl-vb{padding-left:30px;}
.pr-little{padding-right:5px;}
.pr-small{padding-right:10px;}
.pr{padding-right:15px;}
.pt-big{padding-right:20px;}
.pr-large{padding-right:25px;}
.pr-vb{padding-right:30px;}
/*--opacity--*/
.opacity1{filter:alpha(opacity=10);opacity:.1;}
.opacity2{filter:alpha(opacity=20);opacity:.2;}
.opacity3{filter:alpha(opacity=30);opacity:.3;}
.opacity4{filter:alpha(opacity=40);opacity:.4;}
.opacity5{filter:alpha(opacity=50);opacity:.5;}
.opacity6{filter:alpha(opacity=60);opacity:.6;}
.opacity7{filter:alpha(opacity=70);opacity:.7;}
.opacity8{filter:alpha(opacity=80);opacity:.8;}
/*line-height*/
.height-large{line-height:40px;}
.height-big{line-height:30px;}
.height{line-height:24px;}
.height-small{line-height:20px;}
.height-little{line-height:16px;}
/*边框,全,上,下,左,右*/
.border{border:solid 1px #ddd;}
.border-top{border-top:solid 1px #ddd;}
.border-right{border-right:solid 1px #ddd;}
.border-bottom{border-bottom:solid 1px #ddd;}
.border-left{border-left:solid 1px #ddd;}
.border-left-right{border-left:solid 1px #ddd;border-right:solid 1px #ddd;}
.border-top-bottom{border-top:solid 1px #ddd;border-bottom:solid 1px #ddd;}
/*水平线*/
hr{background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:1px;margin:10px 0;border:none;-moz-box-sizing:content-box;box-sizing:content-box;}
hr.space{background:#fff;color:#fff;visibility:hidden;}
/*图片样式*/
.img-border{border:solid 1px #ddd;padding:4px;}
/*xiangyingshi-start*/
.container{padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;}
.container:before,.container:after{ content:""; display:table; }
.container:after{clear:both;}
.container{*zoom:1;}
.container-fluid{padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;}
.container-fluid:before,.container-fluid:after{ content:""; display:table; }
.container-fluid:after{clear:both;}
.container-fluid{*zoom:1;}
@media (min-width: 768px) {.container {width: 750px;}}
@media (min-width: 992px) {.container {width: 970px;}}
@media (min-width: 1200px) {.container {width: 1170px;}}
.row:before,.row:after{ content:""; display:table; }
.row:after{clear:both;}
.row{*zoom:1;}
.row-big{margin-left:-15px;margin-right:-15px}
/*响应式显示*/
@media (max-width:760px){
.show-l{display:block !important;}
.hidden-l{display:none !important;}
}
@media (min-width:761px) and (max-width:1000px){
.show-s{display:block !important;}
.hidden-s{display:none !important;}
}
@media (min-width:1001px) and (max-width:1200px){
.show-m{display:block !important;}
.hidden-m{display:none !important;}
}
@media (min-width:1201px){
.show-b{display:block !important;}
.hidden-b{display:none !important;}
}
.xs-1, .sm-1, .md-1, .lg-1, .xs-2, .sm-2, .md-2, .lg-2, .xs-3, .sm-3, .md-3, .lg-3, .xs-4, .sm-4, .md-4, .lg-4, .xs-5, .sm-5, .md-5, .lg-5, .xs-6, .sm-6, .md-6, .lg-6, .xs-7, .sm-7, .md-7, .lg-7, .xs-8, .sm-8, .md-8, .lg-8, .xs-9, .sm-9, .md-9, .lg-9, .xs-10, .sm-10, .md-10, .lg-10, .xs-11, .sm-11, .md-11, .lg-11, .xs-12, .sm-12, .md-12, .lg-12 {
position: relative;
min-height: 1px;
padding-left:5px;
padding-right:5px;
}
.xs-1, .xs-2, .xs-3, .xs-4, .xs-5, .xs-6, .xs-7, .xs-8, .xs-9, .xs-10, .xs-11, .xs-12 {float: left;}
.xs-12 {width: 100%;}
.xs-11 {width: 91.66666667%;}
.xs-10 {width: 83.33333333%;}
.xs-9 {width: 75%;}
.xs-8 {width: 66.66666667%;}
.xs-7 {width: 58.33333333%;}
.xs-6 {width: 50%;}
.xs-5 {width: 41.66666667%;}
.xs-4 {width: 33.33333333%;}
.xs-3 {width: 25%;}
.xs-2 {width: 16.66666667%;}
.xs-1 {width: 8.33333333%;}
.xs-12 {width: 100%;}
.xs-11 {width: 91.66666667%;}
.xs-10 {width: 83.33333333%;}
.xs-9 {width: 75%;}
.xs-8 {width: 66.66666667%;}
.xs-7 {width: 58.33333333%;}
.xs-6 {width: 50%;*width:47%}
.xs-5 {width: 41.66666667%;}
.xs-4 {width: 33.33333333%;}
.xs-3 {width: 25%;*width:24%}
.xs-2 {width: 16.66666667%;}
.xs-1 {width: 8.33333333%;}
.xs-pull-0 {right: auto;}
.xs-push-12 {left: 100%;}
.xs-push-11 {left: 91.66666667%;}
.xs-push-10 {left: 83.33333333%;}
.xs-push-9 {left: 75%;}
.xs-push-8 {left: 66.66666667%;}
.xs-push-7 {left: 58.33333333%;}
.xs-push-6 {left: 50%;}
.xs-push-5 {left: 41.66666667%;}
.xs-push-4 {left: 33.33333333%;}
.xs-push-3 {left: 25%;}
.xs-push-2 {left: 16.66666667%;}
.xs-push-1 {left: 8.33333333%;}
.xs-push-0 {left: auto;}
.xs-offset-12 {margin-left: 100%;}
.xs-offset-11 {margin-left: 91.66666667%;}
.xs-offset-10 {margin-left: 83.33333333%;}
.xs-offset-9 {margin-left: 75%;}
.xs-offset-8 {margin-left: 66.66666667%;}
.xs-offset-7 {margin-left: 58.33333333%;}
.xs-offset-6 {margin-left: 50%;}
.xs-offset-5 {margin-left: 41.66666667%;}
.xs-offset-4 {margin-left: 33.33333333%;}
.xs-offset-3 {margin-left: 25%;}
.xs-offset-2 {margin-left: 16.66666667%;}
.xs-offset-1 {margin-left: 8.33333333%;}
.xs-offset-0 {margin-left: 0;}
@media (min-width: 768px) {
.sm-1, .sm-2, .sm-3, .sm-4, .sm-5, .sm-6, .sm-7, .sm-8, .sm-9, .sm-10, .sm-11, .sm-12 {float: left;}
.sm-12 {width: 100%;}
.sm-11 {width: 91.66666667%;}
.sm-10 {width: 83.33333333%;}
.sm-9 {width: 75%;}
.sm-8 {width: 66.66666667%;}
.sm-7 {width: 58.33333333%;}
.sm-6 {width: 50%;}
.sm-5 {width: 41.66666667%;}
.sm-4 {width: 33.33333333%;}
.sm-3 {width: 25%;}
.sm-2 {width: 16.66666667%;}
.sm-1 {width: 8.33333333%;}
.sm-pull-12 {right: 100%;}
.sm-pull-11 {right: 91.66666667%;}
.sm-pull-10 {right: 83.33333333%;}
.sm-pull-9 {right: 75%;}
.sm-pull-8 {right: 66.66666667%;}
.sm-pull-7 {right: 58.33333333%;}
.sm-pull-6 {right: 50%;}
.sm-pull-5 {right: 41.66666667%;}
.sm-pull-4 {right: 33.33333333%;}
.sm-pull-3 {right: 25%;}
.sm-pull-2 {right: 16.66666667%;}
.sm-pull-1 {right: 8.33333333%;}
.sm-pull-0 {right: auto;}
.sm-push-12 {left: 100%;}
.sm-push-11 {left: 91.66666667%;}
.sm-push-10 {left: 83.33333333%;}
.sm-push-9 {left: 75%;}
.sm-push-8 {left: 66.66666667%;}
.sm-push-7 {left: 58.33333333%;}
.sm-push-6 {left: 50%;}
.sm-push-5 {left: 41.66666667%;}
.sm-push-4 {left: 33.33333333%;}
.sm-push-3 {left: 25%;}
.sm-push-2 {left: 16.66666667%;}
.sm-push-1 {left: 8.33333333%;}
.sm-push-0 {left: auto;}
.sm-offset-12 {margin-left: 100%;}
.sm-offset-11 {margin-left: 91.66666667%;}
.sm-offset-10 {margin-left: 83.33333333%;}
.sm-offset-9 {margin-left: 75%;}
.sm-offset-8 {margin-left: 66.66666667%;}
.sm-offset-7 {margin-left: 58.33333333%;}
.sm-offset-6 {margin-left: 50%;}
.sm-offset-5 {margin-left: 41.66666667%;}
.sm-offset-4 {margin-left: 33.33333333%;}
.sm-offset-3 {margin-left: 25%;}
.sm-offset-2 {margin-left: 16.66666667%;}
.sm-offset-1 {margin-left: 8.33333333%;}
.sm-offset-0 {margin-left: 0;}
}
@media (min-width: 992px) {
.md-1, .md-2, .md-3, .md-4, .md-5, .md-6, .md-7, .md-8, .md-9, .md-10, .md-11, .md-12 {float: left;}
.md-12 {width: 100%;}
.md-11 {width: 91.66666667%;}
.md-10 {width: 83.33333333%;}
.md-9 {width: 75%;}
.md-8 {width: 66.66666667%;}
.md-7 {width: 58.33333333%;}
.md-6 {width: 50%;}
.md-5 {width: 41.66666667%;}
.md-4 {width: 33.33333333%;}
.md-3 {width: 25%;}
.md-2 {width: 16.66666667%;}
.md-1 {width: 8.33333333%;}
.md-pull-12 {right: 100%;}
.md-pull-11 {right: 91.66666667%;}
.md-pull-10 {right: 83.33333333%;}
.md-pull-9 {right: 75%;}
.md-pull-8 {right: 66.66666667%;}
.md-pull-7 {right: 58.33333333%;}
.md-pull-6 {right: 50%;}
.md-pull-5 {right: 41.66666667%;}
.md-pull-4 {right: 33.33333333%;}
.md-pull-3 {right: 25%;}
.md-pull-2 {right: 16.66666667%;}
.md-pull-1 {right: 8.33333333%;}
.md-pull-0 {right: auto;}
.md-push-12 {left: 100%;}
.md-push-11 {left: 91.66666667%;}
.md-push-10 {left: 83.33333333%;}
.md-push-9 {left: 75%;}
.md-push-8 {left: 66.66666667%;}
.md-push-7 {left: 58.33333333%;}
.md-push-6 {left: 50%;}
.md-push-5 {left: 41.66666667%;}
.md-push-4 {left: 33.33333333%;}
.md-push-3 {left: 25%;}
.md-push-2 {left: 16.66666667%;}
.md-push-1 {left: 8.33333333%;}
.md-push-0 {left: auto;}
.md-offset-12 {margin-left: 100%;}
.md-offset-11 {margin-left: 91.66666667%;}
.md-offset-10 {margin-left: 83.33333333%;}
.md-offset-9 {margin-left: 75%;}
.md-offset-8 {margin-left: 66.66666667%;}
.md-offset-7 {margin-left: 58.33333333%;}
.md-offset-6 {margin-left: 50%;}
.md-offset-5 {margin-left: 41.66666667%;}
.md-offset-4 {margin-left: 33.33333333%;}
.md-offset-3 {margin-left: 25%;}
.md-offset-2 {margin-left: 16.66666667%;}
.md-offset-1 {margin-left: 8.33333333%;}
.md-offset-0 {margin-left: 0;}
}
@media (min-width: 1200px) {
.lg-1, .lg-2, .lg-3, .lg-4, .lg-5, .lg-6, .lg-7, .lg-8, .lg-9, .lg-10, .lg-11, .lg-12 {float: left;}
.lg-12 {width: 100%;}
.lg-11 {width: 91.66666667%;}
.lg-10 {width: 83.33333333%;}
.lg-9 {width: 75%;}
.lg-8 {width: 66.66666667%;}
.lg-7 {width: 58.33333333%;}
.lg-6 {width: 50%;}
.lg-5 {width: 41.66666667%;}
.lg-4 {width: 33.33333333%;}
.lg-3 {width: 25%;}
.lg-2 {width: 16.66666667%;}
.lg-1 {width: 8.33333333%;}
.lg-pull-12 {right: 100%;}
.lg-pull-11 {right: 91.66666667%;}
.lg-pull-10 {right: 83.33333333%;}
.lg-pull-9 {right: 75%;}
.lg-pull-8 {right: 66.66666667%;}
.lg-pull-7 {right: 58.33333333%;}
.lg-pull-6 {right: 50%;}
.lg-pull-5 {right: 41.66666667%;}
.lg-pull-4 {right: 33.33333333%;}
.lg-pull-3 {right: 25%;}
.lg-pull-2 {right: 16.66666667%;}
.lg-pull-1 {right: 8.33333333%;}
.lg-pull-0 {right: auto;}
.lg-push-12 {left: 100%;}
.lg-push-11 {left: 91.66666667%;}
.lg-push-10 {left: 83.33333333%;}
.lg-push-9 {left: 75%;}
.lg-push-8 {left: 66.66666667%;}
.lg-push-7 {left: 58.33333333%;}
.lg-push-6 {left: 50%;}
.lg-push-5 {left: 41.66666667%;}
.lg-push-4 {left: 33.33333333%;}
.lg-push-3 {left: 25%;}
.lg-push-2 {left: 16.66666667%;}
.lg-push-1 {left: 8.33333333%;}
.lg-push-0 {left: auto;}
.lg-offset-12 {margin-left: 100%;}
.lg-offset-11 {margin-left: 91.66666667%;}
.lg-offset-10 {margin-left: 83.33333333%;}
.lg-offset-9 {margin-left: 75%;}
.lg-offset-8 {margin-left: 66.66666667%;}
.lg-offset-7 {margin-left: 58.33333333%;}
.lg-offset-6 {margin-left: 50%;}
.lg-offset-5 {margin-left: 41.66666667%;}
.lg-offset-4 {margin-left: 33.33333333%;}
.lg-offset-3 {margin-left: 25%;}
.lg-offset-2 {margin-left: 16.66666667%;}
.lg-offset-1 {margin-left: 8.33333333%;}
.lg-offset-0 {margin-left: 0;}
}