/*全局变量*/
*{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. wordpress woodstock主题导入demo xml文件 execution time out

    1.已设置php.ini max_execution_time = 240 导入显示设置60 2.wp-config.php 添加 set_time_limit(600); 无效 3. .htacce ...

  2. Caused by: java.lang.NoSuchMethodError: javax.persistence.spi.PersistenceUnitInfo.getValidationMode

    进行 spring mvc jpa整合时.Junit方法测试时. 异常: org.springframework.beans.factory.BeanCreationException: Error ...

  3. Webservice简介

    一.序言 大家或多或少都听过WebService(Web服务),有一段时间很多计算机期刊.书籍和网站都大肆的提及和宣传WebService技术,其中不乏很多吹嘘和做广告的成分.但是不得不承认的是Web ...

  4. C# DataGridView显示行号的三种方法

    方法一: 网上最常见的做法是用DataGridView的RowPostPaint事件在RowHeaderCell中绘制行号: private void dgGrid_RowPostPaint( obj ...

  5. Word设置首页不同

    Sub 批量格式设置()  '此代码为指定文件夹中所有选取的WORD文件的进行格式设置 Dim MyDialog As FileDialog, vrtSelectedItem As Variant, ...

  6. VideoToolbox硬件编解码H.264视频流错误码

    如果你不能找到在VTD中的错误代码我决定只包括他们在这里. (同样,所有这些错误,并更可以在里面VideoToolbox在Project Navigator中找到.本身).  您将获得无论是在VTD中 ...

  7. Build OpenCV text(OCR) module on windows

    Background. AOI software needs to use the OCR feature to recognize the texts on the chips. Because o ...

  8. make[2]: *** No rule to make target `/root/.pyenv/versions/anaconda3-2.4.0/lib/libpython3.5m.so', needed by `evaluation.so'. Stop.

    当出现No rule to make target ,肯定是Makefile有问题. 有的makefile是脚本生成的,你得看脚本的配置文件对不对. 我的是这个脚本生成的.发现是Pythondir的配 ...

  9. PHP中使用cURL实现Get和Post请求的方法

    1.cURL介绍  cURL 是一个利用URL语法规定来传输文件和数据的工具,支持很多协议,如HTTP.FTP.TELNET等.最爽的是,PHP也支持 cURL 库.本文将介绍 cURL 的一些高级特 ...

  10. MVP模式和MVVM模式

    MVP模式 模型-视图-表示器,也就是MVP模式.是mvc模式的一种衍生模式,专注于改进表示逻辑. 与MVC不同,来自view的调用将委托给presenter(表示器),表示器通过接口与view对话. ...