961 lines
16 KiB
CSS
961 lines
16 KiB
CSS
/*
|
||
政工网通用样式表
|
||
part1:reset.css
|
||
part2:grid.css w1008-24
|
||
part3:base.css
|
||
创建时间: 2015-06-29
|
||
最后更新时间：2016-07-03
|
||
未压缩版：4.0.2
|
||
制作：lhh
|
||
*/
|
||
/*----------------------------part1:reset.css----------------------------*/
|
||
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, main, mark, menu, meter, nav, object, ol, output, p, pre, progress, q, rp, rt, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video, xmp {
|
||
border: 0;
|
||
margin: 0;
|
||
padding: 0;
|
||
font-size: 100%;
|
||
}
|
||
html, body {
|
||
_background-attachment: fixed;
|
||
overflow-x:hidden;
|
||
}
|
||
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
|
||
display: block;
|
||
}
|
||
b, strong {
|
||
font-weight: bold;
|
||
}
|
||
img {
|
||
font-size: 0;
|
||
vertical-align: middle;
|
||
-ms-interpolation-mode: bicubic;
|
||
}
|
||
ol, ul {
|
||
list-style: none;
|
||
}
|
||
li {
|
||
display: list-item;
|
||
list-style: none;
|
||
}
|
||
table {
|
||
border-collapse: collapse;
|
||
border-spacing: 0;
|
||
}
|
||
th, td, caption {
|
||
font-weight: normal;
|
||
vertical-align: top;
|
||
text-align: left;
|
||
}
|
||
q {
|
||
quotes: none;
|
||
}
|
||
q:before, q:after {
|
||
content: "";
|
||
content: none;
|
||
}
|
||
sub, sup, small {
|
||
font-size: 75%;
|
||
}
|
||
sub, sup {
|
||
line-height: 0;
|
||
position: relative;
|
||
vertical-align: baseline;
|
||
}
|
||
sub {
|
||
bottom: -0.25em;
|
||
}
|
||
sup {
|
||
top: -0.5em;
|
||
}
|
||
svg {
|
||
overflow: hidden;
|
||
}
|
||
body {
|
||
min-width: 1008px;
|
||
}
|
||
/*----------------------------part2:grid.css----------------------------*/
|
||
/* `Container
|
||
----------------------------------------------------------------------------------------------------*/
|
||
|
||
.container_24 {
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
width: 1008px;
|
||
}
|
||
/* Grid >> Global
|
||
----------------------------------------------------------------------------------------------------*/
|
||
|
||
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16, .grid_17, .grid_18, .grid_19, .grid_20, .grid_21, .grid_22, .grid_23, .grid_24 {
|
||
display: inline;
|
||
float: left;
|
||
margin-left: 6px;
|
||
margin-right: 6px;
|
||
}
|
||
.push_1, .pull_1, .push_2, .pull_2, .push_3, .pull_3, .push_4, .pull_4, .push_5, .pull_5, .push_6, .pull_6, .push_7, .pull_7, .push_8, .pull_8, .push_9, .pull_9, .push_10, .pull_10, .push_11, .pull_11, .push_12, .pull_12, .push_13, .pull_13, .push_14, .pull_14, .push_15, .pull_15, .push_16, .pull_16, .push_17, .pull_17, .push_18, .pull_18, .push_19, .pull_19, .push_20, .pull_20, .push_21, .pull_21, .push_22, .pull_22, .push_23, .pull_23 {
|
||
position: relative;
|
||
}
|
||
/* Grid >> Children (Alpha ~ First, Omega ~ Last)
|
||
----------------------------------------------------------------------------------------------------*/
|
||
|
||
.alpha {
|
||
margin-left: 0;
|
||
}
|
||
.omega {
|
||
margin-right: 0;
|
||
}
|
||
/* Grid >> 24 Columns 宽度30 + 左边距6＋右边距 ６
|
||
----------------------------------------------------------------------------------------------------*/
|
||
|
||
.container_24 .grid_1 {
|
||
width: 30px;
|
||
}
|
||
.container_24 .grid_2 {
|
||
width: 72px;
|
||
}
|
||
.container_24 .grid_3 {
|
||
width: 114px;
|
||
}
|
||
.container_24 .grid_4 {
|
||
width: 156px;
|
||
}
|
||
.container_24 .grid_5 {
|
||
width: 198px;
|
||
}
|
||
.container_24 .grid_6 {
|
||
width: 240px;
|
||
}
|
||
.container_24 .grid_7 {
|
||
width: 282px;
|
||
}
|
||
.container_24 .grid_8 {
|
||
width: 324px;
|
||
}
|
||
.container_24 .grid_9 {
|
||
width: 366px;
|
||
}
|
||
.container_24 .grid_10 {
|
||
width: 408px;
|
||
}
|
||
.container_24 .grid_11 {
|
||
width: 450px;
|
||
}
|
||
.container_24 .grid_12 {
|
||
width: 492px;
|
||
}
|
||
.container_24 .grid_13 {
|
||
width: 534px;
|
||
}
|
||
.container_24 .grid_14 {
|
||
width: 576px;
|
||
}
|
||
.container_24 .grid_15 {
|
||
width: 618px;
|
||
}
|
||
.container_24 .grid_16 {
|
||
width: 660px;
|
||
}
|
||
.container_24 .grid_17 {
|
||
width: 702px;
|
||
}
|
||
.container_24 .grid_18 {
|
||
width: 744px;
|
||
}
|
||
.container_24 .grid_19 {
|
||
width: 786px;
|
||
}
|
||
.container_24 .grid_20 {
|
||
width: 828px;
|
||
}
|
||
.container_24 .grid_21 {
|
||
width: 870px;
|
||
}
|
||
.container_24 .grid_22 {
|
||
width: 912px;
|
||
}
|
||
.container_24 .grid_23 {
|
||
width: 954px;
|
||
}
|
||
.container_24 .grid_24 {
|
||
width: 996px;
|
||
}
|
||
/* `Prefix Extra Space >> 24 Columns
|
||
----------------------------------------------------------------------------------------------------*/
|
||
|
||
.container_24 .prefix_1 {
|
||
padding-left: 42px;
|
||
}
|
||
.container_24 .prefix_2 {
|
||
padding-left: 84px;
|
||
}
|
||
.container_24 .prefix_3 {
|
||
padding-left: 126px;
|
||
}
|
||
.container_24 .prefix_4 {
|
||
padding-left: 168px;
|
||
}
|
||
.container_24 .prefix_5 {
|
||
padding-left: 210px;
|
||
}
|
||
.container_24 .prefix_6 {
|
||
padding-left: 252px;
|
||
}
|
||
.container_24 .prefix_7 {
|
||
padding-left: 294px;
|
||
}
|
||
.container_24 .prefix_8 {
|
||
padding-left: 336px;
|
||
}
|
||
.container_24 .prefix_9 {
|
||
padding-left: 378px;
|
||
}
|
||
.container_24 .prefix_10 {
|
||
padding-left: 420px;
|
||
}
|
||
.container_24 .prefix_11 {
|
||
padding-left: 462px;
|
||
}
|
||
.container_24 .prefix_12 {
|
||
padding-left: 504px;
|
||
}
|
||
.container_24 .prefix_13 {
|
||
padding-left: 546px;
|
||
}
|
||
.container_24 .prefix_14 {
|
||
padding-left: 588px;
|
||
}
|
||
.container_24 .prefix_15 {
|
||
padding-left: 630px;
|
||
}
|
||
.container_24 .prefix_16 {
|
||
padding-left: 672px;
|
||
}
|
||
.container_24 .prefix_17 {
|
||
padding-left: 714px;
|
||
}
|
||
.container_24 .prefix_18 {
|
||
padding-left: 756px;
|
||
}
|
||
.container_24 .prefix_19 {
|
||
padding-left: 798px;
|
||
}
|
||
.container_24 .prefix_20 {
|
||
padding-left: 820px;
|
||
}
|
||
.container_24 .prefix_21 {
|
||
padding-left: 864px;
|
||
}
|
||
.container_24 .prefix_22 {
|
||
padding-left: 924px;
|
||
}
|
||
.container_24 .prefix_23 {
|
||
padding-left: 966px;
|
||
}
|
||
/* `Suffix Extra Space >> 24 Columns
|
||
----------------------------------------------------------------------------------------------------*/
|
||
|
||
.container_24 .suffix_1 {
|
||
padding-right: 42px;
|
||
}
|
||
.container_24 .suffix_2 {
|
||
padding-right: 84px;
|
||
}
|
||
.container_24 .suffix_3 {
|
||
padding-right: 126px;
|
||
}
|
||
.container_24 .suffix_4 {
|
||
padding-right: 168px;
|
||
}
|
||
.container_24 .suffix_5 {
|
||
padding-right: 210px;
|
||
}
|
||
.container_24 .suffix_6 {
|
||
padding-right: 252px;
|
||
}
|
||
.container_24 .suffix_7 {
|
||
padding-right: 294px;
|
||
}
|
||
.container_24 .suffix_8 {
|
||
padding-right: 336px;
|
||
}
|
||
.container_24 .suffix_9 {
|
||
padding-right: 378px;
|
||
}
|
||
.container_24 .suffix_10 {
|
||
padding-right: 420px;
|
||
}
|
||
.container_24 .suffix_11 {
|
||
padding-right: 462px;
|
||
}
|
||
.container_24 .suffix_12 {
|
||
padding-right: 504px;
|
||
}
|
||
.container_24 .suffix_13 {
|
||
padding-right: 546px;
|
||
}
|
||
.container_24 .suffix_14 {
|
||
padding-right: 588px;
|
||
}
|
||
.container_24 .suffix_15 {
|
||
padding-right: 630px;
|
||
}
|
||
.container_24 .suffix_16 {
|
||
padding-right: 672px;
|
||
}
|
||
.container_24 .suffix_17 {
|
||
padding-right: 714px;
|
||
}
|
||
.container_24 .suffix_18 {
|
||
padding-right: 756px;
|
||
}
|
||
.container_24 .suffix_19 {
|
||
padding-right: 798px;
|
||
}
|
||
.container_24 .suffix_20 {
|
||
padding-right: 820px;
|
||
}
|
||
.container_24 .suffix_21 {
|
||
padding-right: 864px;
|
||
}
|
||
.container_24 .suffix_22 {
|
||
padding-right: 924px;
|
||
}
|
||
.container_24 .suffix_23 {
|
||
padding-right: 966px;
|
||
}
|
||
/* `Push Space >> 24 Columns
|
||
----------------------------------------------------------------------------------------------------*/
|
||
|
||
.container_24 .push_1 {
|
||
left: 42px;
|
||
}
|
||
.container_24 .push_2 {
|
||
left: 84px;
|
||
}
|
||
.container_24 .push_3 {
|
||
left: 126px;
|
||
}
|
||
.container_24 .push_4 {
|
||
left: 168px;
|
||
}
|
||
.container_24 .push_5 {
|
||
left: 210px;
|
||
}
|
||
.container_24 .push_6 {
|
||
left: 252px;
|
||
}
|
||
.container_24 .push_7 {
|
||
left: 294px;
|
||
}
|
||
.container_24 .push_8 {
|
||
left: 336px;
|
||
}
|
||
.container_24 .push_9 {
|
||
left: 378px;
|
||
}
|
||
.container_24 .push_10 {
|
||
left: 420px;
|
||
}
|
||
.container_24 .push_11 {
|
||
left: 462px;
|
||
}
|
||
.container_24 .push_12 {
|
||
left: 504px;
|
||
}
|
||
.container_24 .push_13 {
|
||
left: 546px;
|
||
}
|
||
.container_24 .push_14 {
|
||
left: 588px;
|
||
}
|
||
.container_24 .push_15 {
|
||
left: 630px;
|
||
}
|
||
.container_24 .push_16 {
|
||
left: 672px;
|
||
}
|
||
.container_24 .push_17 {
|
||
left: 714px;
|
||
}
|
||
.container_24 .push_18 {
|
||
left: 756px;
|
||
}
|
||
.container_24 .push_19 {
|
||
left: 798px;
|
||
}
|
||
.container_24 .push_20 {
|
||
left: 820px;
|
||
}
|
||
.container_24 .push_21 {
|
||
left: 864px;
|
||
}
|
||
.container_24 .push_22 {
|
||
left: 924px;
|
||
}
|
||
.container_24 .push_23 {
|
||
left: 966px;
|
||
}
|
||
/* `Pull Space >> 24 Columns
|
||
----------------------------------------------------------------------------------------------------*/
|
||
|
||
.container_24 .pull_1 {
|
||
left: -42px;
|
||
}
|
||
.container_24 .pull_2 {
|
||
left: -84px;
|
||
}
|
||
.container_24 .pull_3 {
|
||
left: -126px;
|
||
}
|
||
.container_24 .pull_4 {
|
||
left: -168px;
|
||
}
|
||
.container_24 .pull_5 {
|
||
left: -210px;
|
||
}
|
||
.container_24 .pull_6 {
|
||
left: -252px;
|
||
}
|
||
.container_24 .pull_7 {
|
||
left: -294px;
|
||
}
|
||
.container_24 .pull_8 {
|
||
left: -336px;
|
||
}
|
||
.container_24 .pull_9 {
|
||
left: -378px;
|
||
}
|
||
.container_24 .pull_10 {
|
||
left: -420px;
|
||
}
|
||
.container_24 .pull_11 {
|
||
left: -462px;
|
||
}
|
||
.container_24 .pull_12 {
|
||
left: -504px;
|
||
}
|
||
.container_24 .pull_13 {
|
||
left: -546px;
|
||
}
|
||
.container_24 .pull_14 {
|
||
left: -588px;
|
||
}
|
||
.container_24 .pull_15 {
|
||
left: -630px;
|
||
}
|
||
.container_24 .pull_16 {
|
||
left: -672px;
|
||
}
|
||
.container_24 .pull_17 {
|
||
left: -714px;
|
||
}
|
||
.container_24 .pull_18 {
|
||
left: -756px;
|
||
}
|
||
.container_24 .pull_19 {
|
||
left: -798px;
|
||
}
|
||
.container_24 .pull_20 {
|
||
left: -820px;
|
||
}
|
||
.container_24 .pull_21 {
|
||
left: -864px;
|
||
}
|
||
.container_24 .pull_22 {
|
||
left: -924px;
|
||
}
|
||
.container_24 .pull_23 {
|
||
left: -966px;
|
||
}
|
||
/* `清除浮动 */
|
||
.clear {
|
||
clear: both;
|
||
display: block;
|
||
overflow: hidden;
|
||
visibility: hidden;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
.clearfix:before, .clearfix:after, .container_24:before, .container_24:after {
|
||
content: '.';
|
||
display: block;
|
||
overflow: hidden;
|
||
visibility: hidden;
|
||
font-size: 0;
|
||
line-height: 0;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
.clearfix:after, .container_24:after {
|
||
clear: both;
|
||
}
|
||
.clearfix, .container_24 {
|
||
zoom: 1;
|
||
}
|
||
/*----------------------------part3:base.css----------------------------*/
|
||
/*1 标题
|
||
Example：
|
||
<h1> 大标题<small>小标题</small></h1>
|
||
<h2> 大标题<small>小标题</small></h2>
|
||
<h3> 大标题<small>小标题</small></h3>
|
||
<h4> 大标题<small>小标题</small></h4>
|
||
<h5> 大标题<small>小标题</small></h5>
|
||
<h6> 大标题<small>小标题</small></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: 10px;
|
||
padding-bottom: 8px;
|
||
}
|
||
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;
|
||
}
|
||
/*2 文字效果
|
||
Name: 文字效果
|
||
Example: style_b,style_strong,style_em,style_pre,style_uppercase,style_lowercase,style_capitalize,style_en
|
||
*/
|
||
/*小型文本*/
|
||
b, strong {
|
||
font-weight: bold;
|
||
}
|
||
/*重要的文本，加粗*/
|
||
em {
|
||
font-style: italic;
|
||
}
|
||
pre {
|
||
white-space: pre-wrap;
|
||
}
|
||
/*预格式化的文本*/
|
||
.uppercase {
|
||
text-transform: uppercase;
|
||
}
|
||
/*文字大写*/
|
||
.lowercase {
|
||
text-transform: lowercase;
|
||
}
|
||
/*文字小写*/
|
||
.capitalize {
|
||
text-transform: capitalize;
|
||
}
|
||
/*首字母大写*/
|
||
.en {
|
||
font-family: Arial !important;
|
||
}
|
||
/*3 对齐
|
||
Name: style_text-align
|
||
Example: class="text-l|text-r|text-c|va-t|va-m|va-b"
|
||
Explain: .text-水平对齐 （.text-l左对齐|.text-r右对齐|.text-c居中对齐）
|
||
.va-上下对齐 （.va-t 居上对齐|.va-m 居中对齐|.va-b 居下对齐）
|
||
*/
|
||
.text-l {
|
||
text-align: left;
|
||
}
|
||
.text-r {
|
||
text-align: right;
|
||
}
|
||
.text-c {
|
||
text-align: center;
|
||
}
|
||
.va * {
|
||
vertical-align: sub !important;
|
||
*vertical-align: middle !important;
|
||
_vertical-align: middle !important;
|
||
}
|
||
.va-t {
|
||
vertical-align: top !important;
|
||
}
|
||
.va-m {
|
||
vertical-align: middle !important;
|
||
}
|
||
.va-b {
|
||
vertical-align: bottom !important;
|
||
}
|
||
/*4 定位
|
||
Name: style_position
|
||
Example: class="pos-r|pos-a|pos-f"
|
||
Explain: .pos-r 相对定位|.pos-a 绝对定位|.pos-f 固定
|
||
*/
|
||
.pos-r {
|
||
position: relative;
|
||
}
|
||
.pos-a {
|
||
position: absolute;
|
||
}
|
||
.pos-f {
|
||
position: fixed;
|
||
}
|
||
/*5 浮动
|
||
Name: style_float
|
||
Example: class="l|r"
|
||
Explain: .l 左浮动|.r 右浮动
|
||
*/
|
||
.l, .f-l {
|
||
float: left !important;
|
||
_display: inline;
|
||
}
|
||
.r, .f-r {
|
||
float: right !important;
|
||
_display: inline;
|
||
}
|
||
[class*="span"].r, [class*="span"].f-r {
|
||
float: right;
|
||
}
|
||
/*控制元素对定位的位置：居左|居右|j居上|居下*/
|
||
.left {
|
||
left: 0;
|
||
right: auto;
|
||
}
|
||
.right {
|
||
right: 0;
|
||
left: auto;
|
||
}
|
||
.top {
|
||
top: auto;
|
||
bottom: 0;
|
||
}
|
||
.bottom {
|
||
top: 0;
|
||
bottom: auto;
|
||
}
|
||
/*6 文字单行溢出省略号
|
||
Name: style_text-overflow
|
||
Example: class="text-overflow"
|
||
*/
|
||
.text-overflow {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
/*7 线条
|
||
Name: style_line
|
||
Example: class="line"
|
||
*/
|
||
.line {
|
||
font-size: 0px;
|
||
line-height: 0px;
|
||
border-top: solid 1px #eee;
|
||
float: none;
|
||
}
|
||
/*8 外边距
|
||
Name: style_margin
|
||
Example: class="mt-5|mt-10..."
|
||
Explain: .mt表示上边距|.mb表示下边距|.ml表示左边距|.mr表示右边距
|
||
*/
|
||
.mt-5 {
|
||
margin-top: 5px;
|
||
}
|
||
.mt-10 {
|
||
margin-top: 10px;
|
||
}
|
||
.mt-15 {
|
||
margin-top: 15px;
|
||
}
|
||
.mt-20 {
|
||
margin-top: 20px;
|
||
}
|
||
.mt-25 {
|
||
margin-top: 25px;
|
||
}
|
||
.mt-30 {
|
||
margin-top: 30px;
|
||
}
|
||
.mt-35 {
|
||
margin-top: 35px;
|
||
}
|
||
.mt-40 {
|
||
margin-top: 40px;
|
||
}
|
||
.mt-50 {
|
||
margin-top: 50px;
|
||
}
|
||
.mb-5 {
|
||
margin-bottom: 5px;
|
||
}
|
||
.mb-10 {
|
||
margin-bottom: 10px;
|
||
}
|
||
.mb-15 {
|
||
margin-bottom: 15px;
|
||
}
|
||
.mb-20 {
|
||
margin-bottom: 20px;
|
||
}
|
||
.mb-30 {
|
||
margin-bottom: 30px;
|
||
}
|
||
.mb-40 {
|
||
margin-bottom: 40px;
|
||
}
|
||
.mb-50 {
|
||
margin-bottom: 50px;
|
||
}
|
||
.ml-5 {
|
||
margin-left: 5px;
|
||
}
|
||
.ml-10 {
|
||
margin-left: 10px;
|
||
}
|
||
.ml-15 {
|
||
margin-left: 15px;
|
||
}
|
||
.ml-20 {
|
||
margin-left: 20px;
|
||
}
|
||
.ml-30 {
|
||
margin-left: 30px;
|
||
}
|
||
.ml-40 {
|
||
margin-left: 40px;
|
||
}
|
||
.ml-50 {
|
||
margin-left: 50px;
|
||
}
|
||
.mr-5 {
|
||
margin-right: 5px;
|
||
}
|
||
.mr-10 {
|
||
margin-right: 10px;
|
||
}
|
||
.mr-15 {
|
||
margin-right: 15px;
|
||
}
|
||
.mr-20 {
|
||
margin-right: 20px;
|
||
}
|
||
.mr-30 {
|
||
margin-right: 30px;
|
||
}
|
||
.mr-40 {
|
||
margin-right: 40px;
|
||
}
|
||
.mr-50 {
|
||
margin-right: 50px;
|
||
}
|
||
/*9 内填充
|
||
Name: style_padding
|
||
Example: class="pt-5|pt-10|……"
|
||
Explain: .pt表示上填充|.pb表示下填充|.pl表示左填充|.pr表示右填充
|
||
*/
|
||
.pt-5 {
|
||
padding-top: 5px;
|
||
}
|
||
.pt-10 {
|
||
padding-top: 10px;
|
||
}
|
||
.pt-20 {
|
||
padding-top: 20px;
|
||
}
|
||
.pb-5 {
|
||
padding-bottom: 5px;
|
||
}
|
||
.pb-10 {
|
||
padding-bottom: 10px;
|
||
}
|
||
.pb-20 {
|
||
padding-bottom: 20px;
|
||
}
|
||
.pl-5 {
|
||
padding-left: 5px;
|
||
}
|
||
.pl-10 {
|
||
padding-left: 10px;
|
||
}
|
||
.pl-20 {
|
||
padding-left: 20px;
|
||
}
|
||
.pr-5 {
|
||
padding-right: 5px;
|
||
}
|
||
.pr-10 {
|
||
padding-right: 10px;
|
||
}
|
||
.pr-20 {
|
||
padding-right: 20px;
|
||
}
|
||
.pd-5 {
|
||
padding: 5px;
|
||
}
|
||
.pd-10 {
|
||
padding: 10px;
|
||
}
|
||
.pd-15 {
|
||
padding: 15px;
|
||
}
|
||
.pd-20 {
|
||
padding: 20px;
|
||
}
|
||
.pd-30 {
|
||
padding: 30px;
|
||
}
|
||
.pd-40 {
|
||
padding: 40px;
|
||
}
|
||
/*10 边框，css3圆角
|
||
Name: style_border
|
||
Example: class="radius"
|
||
Explain: .bk_gray 边框|radius 圆角|round 椭圆 | circle 圆形
|
||
*/
|
||
.radius {
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
behavior: url(ie-css3.htc);
|
||
}
|
||
.size-MINI.radius {
|
||
border-radius: 3px;
|
||
}
|
||
.size-L.radius {
|
||
border-radius: 5px;
|
||
}
|
||
.size-XL.radius {
|
||
border-radius: 6px;
|
||
}
|
||
.round {
|
||
border-radius: 1000px;
|
||
overflow: hidden;
|
||
behavior: url(ie-css3.htc);
|
||
}
|
||
.circle {
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
behavior: url(ie-css3.htc);
|
||
}
|
||
/*11 css3阴影
|
||
Name: style_shadow
|
||
Example: class="box-shadow|text-shadow"
|
||
Explain: box-shadow 块级元素阴影，全局样式，可用在表格，文本框，文本域，div等块级元素上。
|
||
text-shadow 文字阴影
|
||
*/
|
||
.box-shadow {
|
||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||
behavior: url(ie-css3.htc);
|
||
}
|
||
.text-shadow {
|
||
-webkit-text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
|
||
text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
|
||
behavior: url(ie-css3.htc);
|
||
}
|
||
/*12 行内分割竖线
|
||
Name: style_pipe
|
||
Example: <span class="pipe"|</span
|
||
*/
|
||
.pipe {
|
||
margin: 0 5px;
|
||
color: #CCC;
|
||
font-size: 10px !important;
|
||
}
|
||
/*13 文字尺寸
|
||
Name: style_font-size
|
||
Example: class="f-12|f-14|f-16|f-18|f-20|f-24|f-26|f-28|f-30"
|
||
Explain: 12px字体|14px字体|16px字体|18px字体|20px字体|24px字体|26px字体|28px字体|30px字体
|
||
*/
|
||
.f-12 {
|
||
font-size: 12px;
|
||
}
|
||
.f-14 {
|
||
font-size: 14px;
|
||
}
|
||
.f-16 {
|
||
font-size: 16px;
|
||
}
|
||
.f-18 {
|
||
font-size: 18px;
|
||
}
|
||
.f-20 {
|
||
font-size: 20px;
|
||
}
|
||
.f-24 {
|
||
font-size: 24px;
|
||
}
|
||
.f-26 {
|
||
font-size: 26px;
|
||
}
|
||
.f-28 {
|
||
font-size: 28px;
|
||
}
|
||
.f-30 {
|
||
font-size: 30px;
|
||
}
|
||
/*14 文字行距
|
||
Name: mod_line-height
|
||
Example: class="lh-16|lh-18|lh-20|lh-22|lh-24|lh-26|lh-28|lh-30"
|
||
Explain: 16px行高|18px行高|20px行高|22px行高|24px行高|26px行高|30px行高
|
||
*/
|
||
.lh-16 {
|
||
line-height: 16px;
|
||
}
|
||
.lh-18 {
|
||
line-height: 18px;
|
||
}
|
||
.lh-20 {
|
||
line-height: 20px;
|
||
}
|
||
.lh-22 {
|
||
line-height: 22px;
|
||
}
|
||
.lh-24 {
|
||
line-height: 24px;
|
||
}
|
||
.lh-26 {
|
||
line-height: 26px;
|
||
}
|
||
.lh-28 {
|
||
line-height: 28px;
|
||
}
|
||
.lh-30 {
|
||
line-height: 30px;
|
||
}
|
||
/*15 全局文字颜色
|
||
Name: style_body,style_a
|
||
*/
|
||
/*全局默认链接颜色*/
|
||
body {
|
||
font-family: 'Microsoft YaHei';
|
||
color: #333;
|
||
}
|
||
.bg-fff {
|
||
background-color: #fff;
|
||
}
|
||
a {
|
||
text-decoration: none;
|
||
color: #333;
|
||
}
|
||
a:hover {
|
||
color: #06c;
|
||
cursor: pointer;
|
||
}
|
||
|