@charset "utf-8";
/* -----------非响应式前端框架-------------
* 版本号 v1.0
* Created & Modified by Desen
* Date modified 2019.10.23
* Licensed under MIT license.
* http://opensource.org/licenses/MIT
*/
/*
目录结构
1. 重定义浏览器默认样式
2. 格栅系统
3. 基础CSS
3.1 排版
3.1.1 标题
3.1.2 段落
3.1.3 强调
3.1.4 对齐
3.1.4 定位
3.1.5 浮动
3.1.6 文字单行溢出省略号
3.1.7 水平线
3.1.8 外边距
3.1.9 内填充
3.1.10 边框 边框颜色 圆角
3.1.11 阴影
3.1.12 行内分割竖线
3.1.13 文字尺寸
3.1.14 文字行距
3.1.15 文字颜色
3.1.16 缩略语
3.1.17 地址
3.1.18 引用
3.1.19 上标 下标
3.1.20 列表
3.1.21 描述
3.1.22 隐藏 显示
*/
/*1 重定义浏览器默认样式
Name: style_reset
Explain: 重定义浏览器默认样式
*/
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
font:14px/1.5 "\5FAE\8F6F\96C5\9ED1","\5b8b\4f53";
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,hr,p,pre,form,fieldset,input,button,legend,textarea,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
td,th {
padding: 0;
}
caption,th {
text-align: center;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
}
address,cite,code,em,dfn,var,th,i,b {
font-style:normal;
font-weight:normal;
}
fieldset,img {
border:0;
}
ol,ul {
list-style:none;
}
li {
list-style-type:none;
}
a {
text-decoration:none;
cursor: pointer;
}
a:hover,a:visited,a:link,a:active {
text-decoration:underline;
outline:none;
}
/*清除浮动
Name: style_clearfix
Example: class="clearfix|cl"
Explain: clearfix（简写cl）避免因子元素浮动而导致的父元素高度缺失能问题
*/
.cl:after,.clearfix:after {
content:"\20";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.cl,.clearfix {
zoom:1;
}
/*2栅格系统
Name: style_container
Example:
Explain: 栅格系统
*/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}/*上述代码是把所有元素的盒模型都设置为了boeder-box*/
.container {
width: 1170px;
/*max-width: none !important;*/
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row.cl{}
.row {
box-sizing:border-box;
margin-right: -15px;
margin-left: -15px;
}
.row:before,
.row:after {
display: table;
content: " ";
}
.row:before,
.row:after {
clear: both;
}/*用于清除浮动*/
.col-x1, .col-x2, .col-x3, .col-x4, .col-x5, .col-x6, .col-x7, .col-x8, .col-x9, .col-x10, .col-x11, .col-x12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
box-sizing:border-box;
-webkit-transition:all 0.3s ease-in;
-moz-transition:all 0.3s ease-in;
-o-transition:all 0.3s ease-in;
transition:all 0.3s ease-in;
float: left;
}
.col-x12 {
width: 100%;
}
.col-x11 {
width: 91.66666667%;
}
.col-x10 {
width: 83.33333333%;
}
.col-x9 {
width: 75%;
}
.col-x8 {
width: 66.66666667%;
}
.col-x7 {
width: 58.33333333%;
}
.col-x6 {
width: 50%;
}
.col-x5 {
width: 41.66666667%;
}
.col-x4 {
width: 33.33333333%;
}
.col-x3 {
width: 25%;
}
.col-x2 {
width: 16.66666667%;
}
.col-x1 {
width: 8.33333333%;
}
.col-x-pull-12 {
right: 100%;
}
.col-x-pull-11 {
right: 91.66666667%;
}
.col-x-pull-10 {
right: 83.33333333%;
}
.col-x-pull-9 {
right: 75%;
}
.col-x-pull-8 {
right: 66.66666667%;
}
.col-x-pull-7 {
right: 58.33333333%;
}
.col-x-pull-6 {
right: 50%;
}
.col-x-pull-5 {
right: 41.66666667%;
}
.col-x-pull-4 {
right: 33.33333333%;
}
.col-x-pull-3 {
right: 25%;
}
.col-x-pull-2 {
right: 16.66666667%;
}
.col-x-pull-1 {
right: 8.33333333%;
}
.col-x-pull-0 {
right: auto;
}
.col-x-push-12 {
left: 100%;
}
.col-x-push-11 {
left: 91.66666667%;
}
.col-x-push-10 {
left: 83.33333333%;
}
.col-x-push-9 {
left: 75%;
}
.col-x-push-8 {
left: 66.66666667%;
}
.col-x-push-7 {
left: 58.33333333%;
}
.col-x-push-6 {
left: 50%;
}
.col-x-push-5 {
left: 41.66666667%;
}
.col-x-push-4 {
left: 33.33333333%;
}
.col-x-push-3 {
left: 25%;
}
.col-x-push-2 {
left: 16.66666667%;
}
.col-x-push-1 {
left: 8.33333333%;
}
.col-x-push-0 {
left: auto;
}
.col-x-offset-12 {
margin-left: 100%;
}
.col-x-offset-11 {
margin-left: 91.66666667%;
}
.col-x-offset-10 {
margin-left: 83.33333333%;
}
.col-x-offset-9 {
margin-left: 75%;
}
.col-x-offset-8 {
margin-left: 66.66666667%;
}
.col-x-offset-7 {
margin-left: 58.33333333%;
}
.col-x-offset-6 {
margin-left: 50%;
}
.col-x-offset-5 {
margin-left: 41.66666667%;
}
.col-x-offset-4 {
margin-left: 33.33333333%;
}
.col-x-offset-3 {
margin-left: 25%;
}
.col-x-offset-2 {
margin-left: 16.66666667%;
}
.col-x-offset-1 {
margin-left: 8.33333333%;
}
.col-x-offset-0 {
margin-left: 0;
}
/*3.0 基础样式*/
/*3.1 排版*/
/*3.1.1 标题
Example：
h1. 大标题小标题
h2. 大标题小标题
h3. 大标题小标题
h4. 大标题小标题
h5. 大标题小标题
h6. 大标题小标题
*/
h1,h2,h3,h4,h5,h6 {
font-weight:500;
line-height:1.1;
color:inherit;
}
h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small {
font-weight:400;
line-height:1;
color:#999;
}
h1,h2,h3 {
padding-top:20px;
padding-bottom:10px;
}
h1 small,h2 small,h3 small,h1 .small,h2 .small,h3 .small {
font-size:65%;
}
h4,h5,h6 {
margin-top:10px;
margin-bottom:10px;
}
h4 small,h5 small,h6 small,h4 .small,h5 .small,h6 .small {
font-size:75%;
}
h1 {
font-size:36px;
}
h2 {
font-size:30px;
}
h3 {
font-size:24px;
}
h4 {
font-size:18px;
}
h5 {
font-size:14px;
}
h6 {
font-size:12px;
}
/*3.1.2 段落
Example:
这是段落，向下10像素间距
段落突出显示
段落缩进2个字符
*/
p {
margin: 0 0 10px;
line-height: 1.8;
}
.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 300;
line-height: 1.4;
}
.text-indent {
text-indent:2em;
}
/*3.1.3 强调
Example:
小型文本，是父容器字体大小的85%
重要文本，加粗显示
被强调的文本，斜体显示
带下划线的文本
引用
突出显示文本
带删除线的文本
*/
small {
font-size:85%;
}
b,strong {
font-weight: bold;
}
em {
font-style:italic;
}
i{} /*斜体*/
u{} /*加下划线*/
cite {
font-style:normal;
}
mark {
color:#000;
background:#ff0;
}
del{} /*删除线*/
.text-uppercase {
text-transform:uppercase;
} /*文字大写*/
.text-lowercase {
text-transform:lowercase;
} /*文字小写*/
.text-capitalize {
text-transform:capitalize;
} /*首字母大写*/
.en {
font-family:Arial!important;
}
/*3.1.4 对齐
Name: style_text-align
Example: class="text-left|text-right|text-center|va-t|va-m|va-b"
Explain: .text-水平对齐 （.text-left左对齐|.text-right右对齐|.text-center居中对齐|.text-justify段落中超出屏幕部分文字自动换行|.text-nowrap段落中超出屏幕部分不换行）
.va-上下对齐 （.va-t 居上对齐|.va-m 居中对齐|.va-b 居下对齐）
*/
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}
.text-nowrap {
white-space: nowrap;
}
.va-t {
vertical-align:top!important;
}
.va-m {
vertical-align:middle!important;
}
.va-b {
vertical-align:bottom!important;
}
/*3.1.5 浮动
Name: style_float
Example: class="float-left|float-right|clearfix"
Explain: .float-left 左浮动|.float-right 右浮动|.clearfix 清除浮动
*/
.float-left {
float:left!important;
_display:inline;
}
.float-right {
float:right!important;
_display:inline;
}
.clearfix:before,.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
/*3.1.6 文字单行溢出省略号
Name: style_text-overflow
Example: class="text-overflow"
*/
.text-overflow {
overflow:hidden;/*内容超出后隐藏*/
text-overflow:ellipsis;/*超出内容显示为省略号*/
white-space:nowrap;/*文本不进行换行*/
}
/*3.1.7 水平线
Name: style_line
Example: class="line"
*/
.line {
font-size:0;
line-height:0;
border-top: solid 1px #eee;
float: none;
}
/*3.1.8 外边距
Name: style_margin
Example: class="margin-top-5|margin-top-10..."
Explain: .margin-top表示上边距|.margin-bottom表示下边距|.margin-left表示左边距|.margin-right表示右边距
*/
.margin-top-5 {
margin-top:5px;
}
.margin-top-10 {
margin-top:10px;
}
.margin-top-15 {
margin-top:15px;
}
.margin-top-20 {
margin-top:20px;
}
.margin-top-25 {
margin-top:25px;
}
.margin-top-30 {
margin-top:30px;
}
.margin-top-35 {
margin-top:35px;
}
.margin-top-40 {
margin-top:40px;
}
.margin-top-50 {
margin-top:50px;
}
.margin-bottom-5 {
margin-bottom:5px;
}
.margin-bottom-10 {
margin-bottom:10px;
}
.margin-bottom-15 {
margin-bottom:15px;
}
.margin-bottom-20 {
margin-bottom:20px;
}
.margin-bottom-30 {
margin-bottom:30px;
}
.margin-bottom-40 {
margin-bottom:40px;
}
.margin-bottom-50 {
margin-bottom:50px;
}
.margin-left-5 {
margin-left:5px;
}
.margin-left-10 {
margin-left:10px;
}
.margin-left-15 {
margin-left:15px;
}
.margin-left-20 {
margin-left:20px;
}
.margin-left-30 {
margin-left:30px;
}
.margin-left-40 {
margin-left:40px;
}
.margin-left-50 {
margin-left:50px;
}
.margin-right-5 {
margin-right:5px;
}
.margin-right-10 {
margin-right:10px;
}
.margin-right-15 {
margin-right:15px;
}
.margin-right-20 {
margin-right:20px;
}
.margin-right-30 {
margin-right:30px;
}
.margin-right-40 {
margin-right:40px;
}
.margin-right-50 {
margin-right:50px;
}
/*3.1.9 内填充
Name: style_padding
Example: class="padding-top-5|padding-top-10|……"
Explain: .padding-top表示上填充|.padding-bottom表示下填充|.padding-left表示左填充|.padding-right表示右填充
*/
.padding-top-5 {
padding-top:5px;
}
.padding-top-10 {
padding-top:10px;
}
.padding-top-15 {
padding-top:15px;
}
.padding-top-20 {
padding-top:20px;
}
.padding-top-25 {
padding-top:25px;
}
.padding-top-30 {
padding-top:30px;
}
.padding-bottom-5 {
padding-bottom:5px;
}
.padding-bottom-10 {
padding-bottom:10px;
}
.padding-bottom-15 {
padding-bottom:15px;
}
.padding-bottom-20 {
padding-bottom:20px;
}
.padding-bottom-25 {
padding-bottom:25px;
}
.padding-bottom-30 {
padding-bottom:30px;
}
.padding-left-5 {
padding-left:5px;
}
.padding-left-10 {
padding-left:10px;
}
.padding-left-15 {
padding-left:15px;
}
.padding-left-20 {
padding-left:20px;
}
.padding-left-25 {
padding-left:25px;
}
.padding-left-30 {
padding-left:30px;
}
.padding-right-5 {
padding-right:5px;
}
.padding-right-10 {
padding-right:10px;
}
.padding-right-15 {
padding-right:15px;
}
.padding-right-20 {
padding-right:20px;
}
.padding-right-25 {
padding-right:25px;
}
.padding-right-30 {
padding-right:30px;
}
.padding-5 {
padding:5px;
}
.padding-10 {
padding:10px;
}
.padding-15 {
padding:15px;
}
.padding-20 {
padding:20px;
}
.padding-25 {
padding:25px;
}
.padding-30 {
padding:30px;
}
.padding-40 {
padding:40px;
}
/*3.1.10 边框，边框颜色，圆角
Name: style-border
Example: class="bk_gray radius"
Explain: .bk_gray 边框|radius 圆角|round 椭圆 | circle 圆形
*/
.border-primary {
background-color:#5a98de;
}/*边框主要颜色*/
.border-secondary {
background-color:#555;
}/*次主色*/
.border-color-333 {
background-color:#333;
}/*辅助色浅黑*/
.border-color-666 {
background-color:#666;
}/*辅助色灰色*/
.border-color-999 {
background-color:#999;
}/*辅助色浅灰*/
.border-success {
background-color:#5eb95e;
}
.border-danger {
background-color:#dd514c;
}
.border-warning {
background-color:#f37b1d;
}
.border-error {
background-color:#c00;
}
.border-red {
background-color:red;
}
border-green {
background-color:green;
}
border-blue {
background-color:blue;
}
border-orange {
background-color:orange;
}
border-white {
background-color:white;
}
.bk-gray {
border:solid 1px #eee;
}
.radius {
border-radius:4px;
}
.size-MINI.radius {
border-radius:3px;
}
.size-L.radius {
border-radius:5px;
}
.size-XL.radius {
border-radius:6px;
}
.round {
border-radius:1000px;
overflow:hidden;
}
.circle {
border-radius:50%;
overflow:hidden;
}
/*3.1.11 阴影
Name: style_shadow
Example: class="box_shadow|text-shadow"
Explain: box_shadow 块级元素阴影，全局样式，可用在表格，文本框，文本域，div等块级元素上。
text-shadow 文字阴影
*/
.box-shadow-none {
-webkit-box-shadow:0 0 0 rgba(0,0,0,0.5);
box-shadow:0 0 0 rgba(0,0,0,0.5);
}
.box-shadow-2 {
-webkit-box-shadow:0 3px 5px rgba(0,0,0,0.5);
box-shadow:0 3px 5px rgba(0,0,0,0.5);
}
.box-shadow-4 {
-webkit-box-shadow:0 3px 9px rgba(0,0,0,0.5);
box-shadow:0 3px 9px rgb