/*
������ͨ����ʽ��
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, 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: