介绍: 用于基础样式初始化,可根据项目需求自行修改
1. Inicialización de estilo
input,textarea,select{
font-family:arial;
font-family:inherit;
}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{
margin:0;
}
h1,h2,h3,h4,h5,h6,input,select,textarea {
font-size: 100%
}
ul,ol{
padding-left:0;
list-style-type:none;
}
a img{
border:0;}
img{
border:0;display: inline-block;}
.dn{
display:none;}
.di{
display:inline;}
.db{
display:block;}
.dib{
display:inline-block;}
.hit10{
height: 10%;}
.hit5{
height: 10rpx;}
.hit55{
height: 110rpx;}
.hit20{
height: 20%;}
.hit30{
height: 30%;}
.hit40{
height: 40%;}
.hit40{
height: 40%;}
.hit50{
height: 100rpx;}
.hit60{
height: 60%;}
.hit70{
height: 70%;}
.hit90{
height: 80%;}
.hit90{
height: 90%;}
.hit100{
height: 100%;}
.f20{
font-size: 40rpx;}
.pct4{
width:4%;}
.pct6{
width:6%;}
.pct8{
width:8%;}
.pct9{
width:9%;}
.pct11{
width:11%;}
.pct10{
width:10%;}
.pct11{
width:11%;}
.pct12{
width:12%;}
.pct13{
width:13%;}
.pct15{
width:15%;}
.pct16{
width: 16%;}
.pct18{
width: 18%;}
.pct20{
width:20%;}
.pct22{
width: 22%;}
.pct25{
width:25%;}
.pct30{
width:30%;}
.pct33{
width:33.3%;}
.pct35{
width: 35%;}
.pct37{
width: 37%;}
.pct40{
width:40%;}
.pct42{
width:42%;}
.pct45{
width: 45%;}
.pct48{
width: 48%;}
.pct49{
width: 49%;}
.pct50{
width:50%;}
.pct55{
width:55%;}
.pct60{
width:60%;}
.pct65{
width:65%;}
.pct66{
width:66.6%;}
.pct68{
width:68%;}
.pct70{
width:70%;}
.pct75{
width:75%;}
.pct80{
width:80%;}
.pct85{
width: 85%;}
.pct86{
width: 86%;}
.pct90{
width:90%;}
.pct95{
width:95%;}
.pct100{
width:100%;}
.lh0{
line-height:0;}
.lh22{
line-height:45rpx;}
.lh32{
line-height:64rpx;}
.rowLine{
border-left: 1rpx solid rgba(0,0,0,0.15);margin-left: 14rpx;margin-right: 14rpx;height: 30rpx;}
.p5{
padding: 10rpx;}
.p7{
padding: 14rpx;}
.p10{
padding: 20rpx;}
.p15{
padding: 30rpx;}
.p20{
padding: 40rpx;}
.pl10{
padding-left: 20rpx;}
.pl13{
padding-left: 26rpx;}
.pl20{
padding-left: 40rpx;}
.pt5{
padding-top: 5px;}
.pt9{
padding-top: 18rpx;}
.pb9{
padding-bottom: 18rpx;}
.pt10{
padding-top: 20rpx;}
.pt25{
padding-top: 50rpx;}
.pt30{
padding-top: 60rpx;}
.pb0{
padding-bottom: 0px;}
.pb5{
padding-bottom: 5px;}
.pb10{
padding-bottom: 20rpx;}
.pb20{
padding-bottom: 40rpx;}
.pb25{
padding-bottom: 50rpx;}
.m5{
margin: 10rpx;}
.mt5{
margin-top: 10rpx;}
.mt8{
margin-top: 16rpx;}
.mt9{
margin-top: 18rpx;}
.mt10{
margin-top: 20rpx;}
.mr3{
margin-right: 6rpx;}
.mr20{
margin-right: 40rpx;}
.mr10{
margin-right: 20rpx;}
.mr5{
margin-right: 10rpx;}
.mr7{
margin-right: 14rpx;}
.mb15{
margin-bottom: 30rpx;}
.mt20{
margin-top: 40rpx;}
.mt25{
margin-top: 50rpx;}
.mt30{
margin-top: 60rpx;}
.ml20{
margin-left: 40rpx;}
.ml1{
margin-left: 2rpx;}
.ml2{
margin-left: 4rpx;}
.ml5{
margin-left: 10rpx;}
.ml10{
margin-left: 20rpx;}
.ml15{
margin-left: 30rpx;}
.ml8{
margin-left: 16rpx;}
.b{
font-weight: bold;}
.borB6E{
border-bottom:2rpx solid #E6E6E6;}
.bor6{
border-radius: 12rpx; }
.bdc{
border:1px solid #ccc;}
.blc{
border-left:1px solid #ccc;}
.brc{
border-right:1px solid #ccc;}
.btc{
border-top:1px solid #ccc;}
.bbc{
border-bottom:1px solid #ccc;}
.bdd{
border:1px solid #ddd;}
.bld{
border-left:1px solid #ddd;}
.brd{
border-right:1px solid #ddd;}
.btd{
border-top:1px solid #ddd;}
.bbd{
border-bottom:1px solid #ddd;}
.bbtd{
border-bottom:1px solid #ddd;}
.bde{
border:1px solid #eee;}
.bdc{
border:1rpx solid #ccc}
.ble{
border-left:1px solid #eee;}
.bre{
border-right:1px solid #eee;}
.bte{
border-top:1px solid #eee;}
.bbe{
border-bottom:1px solid #eee;}
.bbe0{
border-bottom:1px solid #e0e0e0;}
.bb0{
border-bottom:1px solid #000;}
.brb{
border-top:1rpx solid #34a1ff;}
.btb{
border-top:1rpx solid #34a1ff;}
.bbb{
border-bottom:1rpx solid #34a1ff;}
.bgb{
border-bottom: 1rpx solid #EBEBEB;}
.btec{
border-top:1rpx solid #ececec}
.blec{
border-left:1rpx solid #ececec}
.bgwh{
background-color:#fff;}
.bgfb{
background-color:#fbfbfb;}
.bgf5{
background-color:#f5f5f5;}
.bgf0{
background-color:#f0f0f0;}
.bgeb{
background-color:#ebebeb;}
.bge0{
background-color:#e0e0e0;}
.bgee{
background-color:#eeeeee;}
.bg34{
background-color:#34a1ff;}
.bg
.g0{
color:#000;}
.g3{
color:#333;}
.g6{
color:#666;}
.g9{
color:#999;}
.gc{
color:#ccc;}
.wh{
color:white;}
.gda{
color:#dadada;}
.gr{
color: rgba(255, 0, 0, 0.6);}
.gr2{
color: rgba(153, 0, 51, 0.6);}
.mgrt{
color: rgba(76, 141, 252, 0.8);}
.grn{
color:rgba(0, 153, 0, 0.8);}
.go{
color:#F7975E;}
.gb{
color: #4C8DFC;}
.g28{
color: #282828;}
.g9a{
color: #9A9A9A;}
.g67{
color: #676767;}
.g08{
color: #08CB93;}
.gf6{
color:#F69416;}
.n{
font-weight:normal; font-style:normal; white-space: normal;}
.b{
font-weight:bold;}
.i{
font-style:italic;}
.tc{
text-align:center;}
.tr{
text-align:right;}
.tl{
text-align:left;}
.tj{
text-align:justify;}
.tdl{
text-decoration:underline;}
.tdn,.tdn:hover,.tdn a:hover,a.tdl:hover{
text-decoration:none;}
.lt-1{
letter-spacing:-1px;}
.lt0{
letter-spacing:0;}
.lt1{
letter-spacing:1px;}
.nowrap{
white-space:nowrap;}
.bk{
word-wrap:break-word;}
.bkall{
word-break:break-all;word-wrap:break-word;}
.vm{
vertical-align:middle;}
.vtb{
vertical-align:text-bottom;}
.vb{
vertical-align:bottom;}
.vt{
vertical-align:top;}
.vsb{
vertical-align: sub;}
.v-1{
vertical-align:-1px;}
.v-2{
vertical-align:-2px;}
.v-3{
vertical-align:-3px;}
.v-4{
vertical-align:-4px;}
.v-5{
vertical-align:-5px;}
.v-10{
vertical-align: -10px;}
.l{
float:left;}
.r{
float:right;}
.cl{
clear:both;}
.rel{
position:relative;}
.abs{
position:absolute;}
.fixed{
position:fixed;}
.zx1{
z-index:1;}
.zx2{
z-index:2;}
.zx100{
z-index: 100;}
.zx1000{
z-index:1000;}
.poi{
cursor:pointer;}
.def{
cursor:default;}
.ovh{
overflow:hidden;}
.ova{
overflow:auto;}
.vh{
visibility:hidden;}
.vv{
visibility:visible;}
.opa0{
opacity:0; filter:alpha(opacity=0);}
.auto{
margin-left:auto; margin-right:auto;}
.fix{
zoom:1;}
.fix:after{
display:table; content:''; clear:both;}
.cell2{
overflow:hidden; _display:inline-block;}
.ell{
text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.trans{
-webkit-transition:all .15s;
transition:all .15s;
}
.dib_vm{
display:inline-block; width:0; height:100%; vertical-align:middle;}
.bd_none{
border:0; outline:none;}
.df{
display:flex;}
.f1{
flex: 1;}
.fdr{
flex-direction: row;}
.fjf{
justify-content: flex-start;}
.fjl{
justify-content: left;}
.fje{
justify-content: flex-end;}
.fjc{
justify-content: center;}
.fja{
justify-content:space-around;}
.fab{
align-items: baseline;}
.fjs{
justify-content:space-between;}
.ffw{
flex-wrap:nowrap;}
.fdc{
flex-direction: column;}
.fcc{
display: flex; align-items: center;justify-content: center;}
.fcl{
display: flex; align-items: center;justify-content: left;}
.fww{
flex-wrap: wrap;}
.lc{
display: flex;justify-content: flex-start;align-items: center;}
.rc{
display: flex;justify-content: flex-end;align-items: center;}
.fcb{
display: flex;flex-direction: column;align-items: baseline;justify-content:center}
.flc{
display: flex;align-items: left;justify-content: center;}
.frc{
display: flex;align-items: right;justify-content: center;}
.bor1{
height: 90%;width:40rpx;background-color: rgb(76, 141, 252, 0.0980392156862745);}
.bor2{
height: 98%;width:40rpx;background-color: rgb(0, 153, 0, 0.149019607843137);}
.bor3{
height: 50rpx;width:55%;background-color: rgb(76,141,252,1);border:1px solid rgb(76,141,252,1); border-radius:10rpx;}
.bor3g{
background-color: #ccc;border: 1px solid #ccc;}
.ytab {
position: fixed; height: 55rpx;top: 92.1%; background-color: white;color: rgba(214, 91, 51, 1);}
.bod {
height: 40rpx;background-color: rgba(247, 151, 94, 1);border-radius: 8rpx;-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none; color: #FFFFFF;}
.bod text{
padding: 20rpx;}
.bop{
border-width: 0px;height: 40rpx;background: inherit;background-color: rgba(255, 255, 255, 1);box-sizing: border-box;border-width: 2rpx; border-style: solid; border-color: rgba(76, 141, 252, 1);border-radius: 8rpx;-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;color: #4C8DFC;}
.bop text{
padding:20rpx}
.ggbtn {
width: 168rpx;height: 56rpx;border-radius: 8rpx; background-color: rgba(204, 204, 204, 1);color: #4C8DFC;}
.bwbtn {
width: 168rpx;height: 56rpx; border-radius: 8rpx;background-color: rgba(76, 141, 252, 1);color: #FFFFFF;}
.agree {
position: fixed;height: 100rpx;bottom: 0; border-top: solid 1rpx #EBEBEB; background-color: #FFFFFF;text-align: center;}
.bom{
border-width: 0px;width: 130rpx;height: 50rpx;background: inherit;background-color: rgba(76, 141, 252, 0.498039215686275);border: none;border-radius: 3px;-moz-box-shadow: none;-webkit-box-shadow: none; box-shadow: none;font-family: 'PingFangSC-Regular', 'PingFang SC';font-weight: 400;font-style: normal;color: #FFFFFF;}
.circular {
width: 36rpx;height: 36rpx;border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;}
.gcircular{
border: solid 1rpx rgba(0, 153, 0, 0.8)}
.bcircular{
border: solid 1rpx rgba(221,221,221,1);}
.mouseOver {
border-width:0px;background:inherit;background-color:rgba(255, 255, 255, 1);border:none; border-radius:0px;box-shadow:0px 0px 5px rgba(76, 141, 252, 0.498039215686275);}
2. Estilo personalizado
.f12{
font-size: 24rpx;}
.f14{
font-size: 28rpx;}
.f16{
font-size: 32rpx;}
.f18{
font-size: 36rpx;}
.f22{
font-size: 44rpx;}
.pl5{
padding-left: 10rpx;}
.pl10{
padding-left: 20rpx;}
.pt12{
padding-top: 24rpx;}
.pt15{
padding-top: 30rpx;}
.pr5{
padding-right: 10rpx;}
.pr10{
padding-right: 20rpx;}
.pr15{
padding-right: 30rpx;}
.pr30{
padding-right: 60rpx;}
.pb5{
padding-bottom: 10rpx;}
.pb10{
padding-bottom: 20rpx;}
.pb12{
padding-bottom: 24rpx;}
.pb15{
padding-bottom: 30rpx;}
.pb30{
padding-bottom: 60rpx;}
.pt20{
padding-top: 40rpx;}
.pl15{
padding-left: 30rpx;}
.pl30{
padding-left: 60rpx;}
.ml2{
margin-left: 4rpx;}
.ml5{
margin-left: 10rpx;}
.ml10{
margin-left: 20rpx;}
.ml15{
margin-left: 30rpx;}
.ml40{
margin-left: 80rpx;}
.mr5{
margin-right: 10rpx;}
.mr8{
margin-right: 16rpx;}
.mr10{
margin-right: 20rpx;}
.mr15{
margin-right: 30rpx;}
.mb5{
margin-bottom: 10rpx;}
.mb10{
margin-bottom: 20rpx;}
.mb15{
margin-bottom: 30rpx;}
.mb50{
margin-bottom: 100rpx;}
.mb70{
margin-bottom: 140rpx;}
.mb75{
margin-bottom: 150rpx;}
.mt2{
margin-top: 4rpx;}
.mt6{
margin-top: 12rpx;}
.mt12{
margin-top: 24rpx;}
.mt15{
margin-top: 30rpx;}
.mt16{
margin-top: 32rpx;}
.mt25{
margin-top: 50rpx;}
.mt40{
margin-top: 80rpx;}
.mt60{
margin-top: 120rpx;}
.blue{
color: #1365E8;}
.red{
color:#FF6B6B}
.g9a{
color: #9A9A9A;}
.g28{
color:#282828;}
.g67{
color:#676767;}
.gad{
color:#ADADAD;}
.g80{
color:#808080}
.gcc{
color: #CCCCCC;}
.bdc{
border:1px solid #ccc;}
.blc{
border-left:1px solid #ccc;}
.brc{
border-right:1px solid #ccc;}
.btc{
border-top:1px solid #ccc;}
.bbc{
border-bottom:1px solid #ccc;}
.bdd{
border:1px solid #ddd;}
.bld{
border-left:1px solid #ddd;}
.brd{
border-right:1px solid #ddd;}
.btd{
border-top:1px solid #ddd;}
.bbd{
border-bottom:1px solid #ddd;}
.bde{
border:1px solid #eee;}
.ble{
border-left:1px solid #eee;}
.bre{
border-right:1px solid #eee;}
.bte{
border-top:1px solid #eee;}
.bbe{
border-bottom:1px solid #eee;}
.bbe6{
border-bottom: 1px solid #e6e6e6;}
.bre6{
border-right: 1px solid #E6E6E6;}
.bte6{
border-top: 1px solid #E6E6E6;}
.btll{
border-top-left-radius:30rpx}
.btlr{
border-top-right-radius:30rpx}
.bgwh{
background-color:#fff;}
.bgfb{
background-color:#fbfbfb;}
.bgf5{
background-color:#f5f5f5;}
.bgf0{
background-color:#f0f0f0;}
.bgeb{
background-color:#ebebeb;}
.bge0{
background-color:#e0e0e0;}
.vm{
vertical-align:middle;}
.vtb{
vertical-align:text-bottom;}
.vb{
vertical-align:bottom;}
.vt{
vertical-align:top;}
.v-1{
vertical-align:-1px;}
.v-2{
vertical-align:-2px;}
.v-3{
vertical-align:-3px;}
.v-4{
vertical-align:-4px;}
.v-5{
vertical-align:-5px;}
.l{
float:left;}
.r{
float:right;}
.cl{
clear:both;}
.rel{
position:relative;}
.abs{
position:absolute;}
.n{
font-weight:normal; font-style:normal; white-space: normal;}
.b{
font-weight:bold;}
.i{
font-style:italic;}
.tc{
text-align:center;}
.tr{
text-align:right;}
.tl{
text-align:left;}
.tj{
text-align:justify;}
.clearfix:after{
content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.ell{
text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.ovh{
overflow:hidden;}
.rowLine{
background: rgba(0,0,0,0.15);width: 1px;margin-left: 14rpx;margin-right: 14rpx;height: 30rpx;}
.cu-tag.g80{
background-color: #fff; border: 1px solid #E6E6E6;}
.ui-card {
background: #FFFFFF;box-shadow: 0 10rpx 40rpx 0 rgba(0, 0, 0, 0.05);border-radius: 12rpx;}
.ui-tab{
width: 100%;background: #ffff;padding: 30rpx 60rpx;position: fixed;top: 0;z-index: 9;}
.ui-tab-cont{
display: flex;width: 100%;border: 1px solid #1365E8;border-radius: 8rpx;height: 60rpx;line-height: 54rpx;}
.ui-tab-list {
flex: 1;color: #1365E8;text-align: center;font-size: 28rpx; position: relative; }
.ui-tab-list+.ui-tab-list{
border-left: 1px solid #1365E8;}
.ui-tab-list.on {
color: #fff;background: #1365E8;}
.ui_blue-button{
padding: 16rpx 46rpx;border: 1rpx solid #1365e8; color: #1365E8;font-size: 28rpx;border-radius: 8px;}
.b-shadow{
box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.1);}
.text-blue-zg{
color: #0190FE;}
.text-line-camp{
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;}