因为使用的单位均是px,所以不适用于H5(只使用于PC)
@charset "UTF-8";
/* 格式化样式 */
h1,
h2,
h3,
h4,
h5,
h6,
p,
body,
div,
form,
input,
button,
th,
td,
ol,
ul,
dl,
li,
dd,
dt {
margin: 0;
padding: 0;
}
ol,
ul {
list-style: none;
}
img {
vertical-align: middle;
border: 0;
}
a {
text-decoration: none;
color: #000;
}
a:hover {
color: #31ccff;
}
input {
outline: 0;
}
/* 超出隐藏 */
.dn {
display: none;
}
.otw {
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
white-space: nowrap; //溢出不换行
}
/* 文字排版 */
.f12 {
font-size: 12px;
}
.f14 {
font-size: 14px;
}
.f16 {
font-size: 16px;
}
.f18 {
font-size: 18px;
}
.f20 {
font-size: 20px;
}
.ti2 {
text-indent: 2em;
}
/* 版心 */
.contaiter {
width: 1200px;
margin: 0 auto;
}
/* 盒子模式 */
.bs {
box-sizing: border-box;
}
/* 宽高 */
.w100 {
width: 100%;
}
.h100 {
height: 100%;
}
.p20 {
padding: 20px;
}
.p30 {
padding: 30px;
}
.p40 {
padding: 40px;
}
.mt20 {
margin-top: 20px;
}
.mt30 {
margin-top: 30px;
}
.mt40 {
margin-top: 40px;
}
.mr10 {
margin-right: 10px;
}
.mr20 {
margin-right: 20px;
}
.mr30 {
margin-right: 30px;
}
.ml10 {
margin-left: 10px;
}
.ml20 {
margin-left: 20px;
}
.ml30 {
margin-left: 30px;
}
.mtb20 {
margin: 20px 0;
}
.mtb40 {
margin: 40px 0;
}
.mb10 {
margin-bottom: 10px;
}
.mb20 {
margin-bottom: 20px;
}
.mb40 {
margin-bottom: 40px;
}
/* 颜色 */
.bg-fff {
background: #fff;
}
.bg-f6 {
background: #f6f6f6;
}
.col-fff {
color: #fff;
}
.col-2b {
color: #2d2d2d;
}
/* 定位 */
.pr {
position: relative;
}
.pf {
position: fixed;
}
.pa {
position: absolute;
}
.pac {
position: absolute;
top: 50%;
bottom: 50%;
transform: translate(50% 50%);
}
.tac {
text-align: center;
}
.tal {
text-align: left;
}
.tar {
text-align: right;
}
/* 弹性布局 */
.df {
display: flex;
}
.jcc {
justify-content: center;
}
.aic {
align-items: center;
}
.jcsb {
justify-content: space-between;
}
.jcsa {
justify-content: space-around;
}
.jcfe {
justify-content: flex-end;
}
.fww {
flex-wrap: wrap;
}
.jcl {
justify-content: left;
}
.jcr {
justify-content: right;
}
.fdc {
flex-direction: column;
}
.aifs {
align-items: flex-start;
}
.aife {
align-items: flex-end;
}
.dis_sb {
display: flex;
justify-content: space-between;
align-items: center;
}
.dis_cc {
display: flex;
justify-content: center;
align-items: center;
}