css初始化页面代码
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
em,
i {
font-style: normal;
}
li {
list-style: none;
}
img {
border: 0;
vertical-align: middle;
}
button {
cursor: pointer;
}
a {
color: #666;
text-decoration: none;
}
a:hover {
color: #e33333;
}
button,
input {
outline: none;
}
body {
color: #666;
background-color: #fff;
}
.hide,
.none {
display: none;
}
.clearfix::after {
visibility: hidden;
clear: both;
display: block;
content: '.';
height: 0;
}
.clearfix {
*zoom: 1;
}
.p5 {
padding: 5px;
}
.p10 {
padding: 10px;
}
.p15 {
padding: 15px;
}
.p20 {
padding: 20px;
}
.p25 {
padding: 25px;
}
.p30 {
padding: 30px;
}
.pl20 {
padding-left: 20px;
}
.pl10 {
padding-left: 10px;
}
.pt5 {
padding-top: 5px;
}
.pt10 {
padding-top: 10px;
}
.pt20 {
padding-top: 20px;
}
.pr10 {
padding-right: 10px;
}
.pr15 {
padding-right: 15px;
}
.pl15 {
padding-left: 15px;
}
.pb0 {
padding-bottom: 0px;
}
.pb5 {
padding-bottom: 5px;
}
.pb10 {
padding-bottom: 10px;
}
.mt5 {
margin-top: 5px;
}
.mr5 {
margin-right: 5px;
}
.mb5 {
margin-bottom: 5px;
}
.mb8 {
margin-bottom: 8px;
}
.mb15 {
margin-bottom: 15px;
}
.ml5 {
margin-left: 5px;
}
.mt5 {
margin-top: 5px;
}
.mt10 {
margin-top: 10px;
}
.mt15 {
margin-top: 15px;
}
.mr10 {
margin-right: 10px;
}
.mr15 {
margin-right: 15px;
}
.mb10 {
margin-bottom: 10px;
}
.mb30 {
margin-bottom: 30px;
}
.ml10 {
margin-left: 10px;
}
.mt20 {
margin-top: 20px;
}
.mt25 {
margin-top: 25px;
}
.mr20 {
margin-right: 20px;
}
.ml25 {
margin-left: 25px;
}
.mb20 {
margin-bottom: 20px;
}
.mb25 {
margin-bottom: 25px;
}
.ml15 {
margin-left: 15px;
}
.ml20 {
margin-left: 20px;
}
.ml30 {
margin-left: 30px;
}
.fz10 {
font-size: 10px;
}
.fz12 {
font-size: 12px;
}
.fz13 {
font-size: 13px;
}
.fz14 {
font-size: 14px;
}
.fz15 {
font-size: 15px;
}
.fz16 {
font-size: 16px;
}
.fz18 {
font-size: 18px;
}
.fz20 {
font-size: 20px;
}
.fz22 {
font-size: 22px;
}
.fz24 {
font-size: 24px;
}
.fz28 {
font-size: 28px;
}
.fz32 {
font-size: 32px;
}
.fw {
font-weight: 700;
}
.fwNo {
font-weight: normal;
}
.ws-o-to {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
.pull-right {
float: right !important;
}
.pull-left {
float: left !important;
}
.ua {
position: absolute;
}
.ub {
display: flex;
position: relative;
}
.ur {
position: relative;
}
.flex {
display: -webkit-flex;
-webkit-flex-flow: row;
flex-flow: row;
display: flex;
}
.f-inline {
display: inline-flex
}
.f-row {
flex-direction: row
}
.f-row1 {
flex-direction: row-reverse
}
.f-col {
flex-direction: column
}
.f-col1 {
flex-direction: column-reverse
}
.center {
justify-content: center;
align-items: center
}
.f-ac {
align-items: center
}
.f-as {
align-items: flex-start
}
.f-ae {
align-items: flex-end
}
.f-jc {
justify-content: center;
}
.f-js {
justify-content: flex-start;
}
.f-je {
justify-content: flex-end;
}
.f-jb {
justify-content: space-between;
}
.f-column {
flex-direction: column;
}
.f-jsa {
justify-content: space-around;
}
.row-center {
flex-flow: row wrap;
justify-content: center;
align-items: center
}
.row-between {
flex-flow: row wrap;
justify-content: space-between;
align-items: center
}
.row-around {
flex-flow: row wrap;
justify-content: space-around;
align-items: center
}
.col-center {
flex-flow: column wrap;
justify-content: center;
align-items: center
}
.col-between {
flex-flow: column wrap;
justify-content: space-between;
align-items: center
}
.col-around {
flex-flow: column wrap;
justify-content: space-around;
align-items: center
}
.self-start {
align-self: flex-start;
}
.self-stretch {
align-self: stretch;
}
.self-center {
align-self: center;
}
.self-end {
align-self: flex-end;
}
.flex1 {
flex: 1 !important;
}
.flex2 {
flex: 2 !important;
}
.flex3 {
flex: 3 !important;
}
.flex4 {
flex: 4 !important;
}
.flex5 {
flex: 5 !important;
}
.flex6 {
flex: 6 !important;
}
.flex7 {
flex: 7 !important;
}
.flex8 {
flex: 8 !important;
}
.flex9 {
flex: 9 !important;
}
.flex10 {
flex: 10 !important;
}
.w0 {
width: 0px;
}
.w100 {
width: 100%;
}
.h100 {
height: 100%;
}
.h0 {
height: 0px;
}
::-webkit-scrollbar {
width:8px;
height: 8px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
border-radius:10px;
}
::-webkit-scrollbar-thumb {
border-radius:10px;
background:rgba(0,0,0,0.1);
-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background:rgba(0,0,0,0.2);
}