/*全局变量*/
*{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;}
}

写单独页面的一些通用css样式，做了一点点兼容的更多相关文章

  1. wap开发使用jquery mobile之后页面不加载外部css样式文件/js文件

    场景: wap开发,使用jquery mobile之后不会加载外部自定义的css文件了,需要手动刷新才会加载,查看外部自定义的js文件也是一样. 解决办法: 1.在page下面添加css样式,就不要写 ...

  2. 通过node.js读取html页面及其页面中引入的css样式

    Node 是什么? Node 是一个基于Chrome V8 引擎的JavaScript 运行环境. Node 不是一种独立的语言.Node不是 JavaScript 框架, Node是一个除了浏览器之 ...

  3. CSS样式做圆角

    我处理圆角的版本是由内置的绝对定位的四个div组成,每个div都有唯一的圆角图片作CSS Sprite操作.我们将会这样做:  是什么方式导致这项技术表现得这么了不起呢(What makes this ...

  4. js用currentStyle和getComputedStyle获取css样式（非行间） 兼容ie与火狐

    用js的style属性可以获得html标签的样式,但是不能获取非行间样式.那么怎么用js获取css的非行间样式呢?在IE下可以用currentStyle,而在火狐下面我们需要用到getComputed ...

  5. Github上html页面(包括CSS样式和JS效果)如何显示出来

    在看Github上项目时,发现有的html页面效果能很好的展现出来,而有的则不能.对这个问题很好奇,因此研究了一下,最终做到了将页面展示出来的目的.下面以我的Github的开源项目bootstrap- ...

  6. CSS样式简介

    层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态 ...

  7. 四种CSS样式的引入方式

    准备 1.首先准备一个html文件:test.html,不建议使用记事本创建文件,建议使用Notepad++来创建并编辑文件,注意编码格式为:以UTF-8无BOM格式编码,否则会出现中文乱码,内容如下 ...

  8. 使用less函数实现不同背景的CSS样式

    今天在公司遇到一个比较特殊的需求,需要完成这样的布局,如下图: 每一个块的背景需要不同,而其他都是相同的,这时候就应该把背景提出来单独写成一个CSS样式类. 那么问题来了,有四个不同的背景需要写4个基 ...

  9. iOS 加载本地 HTML 文件 CSS 样式图片无效果

    在开发的过程中,有时候需要加载一些 HTML 页面,对于不太复杂的界面,基本上都可以放到本地用 UIWebview 来加载,但是在开发过程中会碰到 UIWebview 加载出来的 HTML 页面没有图 ...

随机推荐

  1. According to TLD or attribute directive in tag file, attribute test does not accept any expressions

    HTTP Status 500 - /WEB-INF/views/emp/list.jsp (line: 30, column: 4) According to TLD or attribute di ...

  2. Spark学习笔记之SparkRDD

    Spark学习笔记之SparkRDD 一.   基本概念 RDD(resilient distributed datasets)弹性分布式数据集. 来自于两方面 ①   内存集合和外部存储系统 ②   ...

  3. ORACLE 实例及RAC

    ORACLE 实例及RAC 一.问题 (1)现象 部署一个sh脚本到生产oracle服务器上,该sh脚本负责读取外系统提供的txt文件,然后用sql loader入库,由oracle服务器的cront ...

  4. python--day2--基础数据类型与变量

    笔者:QQ:   360212316 python控制语句 for循环语句示例: for i in range(10): print(i) for循环语句示例1: for i in range(10) ...

  5. C#中string在内存中是如何表示的

    不知道你是否有过和我一样的疑问,不同编码的字符串是如何存储在运行时的内存中的呢,计算机在操作string类型的对象时,如何知道这个string是什么编码呢?和文本文件那样有类似BOM的东东在strin ...

  6. 01.Sencha ExtJS 6 - Generate Workspace and Application

    生成workspace         下载gpl版本的ExtJs6         在https://www.sencha.com/legal/GPL/页面的右侧申请链接来下载,或者使用链接http ...

  7. VC++ Post 方法 上传数据到web服务器

    最近在做一个项目,需要与WEB服务器交互一些信息.其中一项就是文件的上传与下载.现来一个上传的代码 #include "stdio.h" #include "WinSoc ...

  8. macbook 重装win7

    若是第一次已经成功好了,并且把第一次的安装U盘WININSTALL内容保存完好的前提下, win7要重新安装. 先进入Boot Camp移除Windows,备份好你的WIN系统的重要文件. 把第一次的 ...

  9. lisp中的nil

    ANSI Common Lisp 第二章 课后习题 7.只使用本章所介绍的操作符,定义一个函数,它接受一个列表作为实参,如果有一个元素是列表时,就返回真. (defun have-list (lst) ...

  10. PadLeft 和 PadRight

    1 PadLeft 即:向已知字符串左边补充字符,使整个字符串到达指定长度 CREATE FUNCTION PadLeft ( ),/*原始字符*/ @TotalLength int,/*总长度*/ ...