标签：font color top padding btn margin css
button::after{
border:none;
}
.over-hide{
overflow: hidden;
}
.flex{display: flex;}
.flex.spaceb{justify-content: space-between;}
.flex.spacea{justify-content: space-around;}
.flex.center{justify-content: center;}
.flex.alcenter{align-items: center;}
.flex.alend{align-items:flex-end}
.flex.start{justify-content: flex-start;}
.flex.end{justify-content: flex-end;}
.wrap{flex-direction: row;flex-wrap: wrap;}
.flex-c-c{display:flex;flex-direction: column;align-items: center;}
.col1{width: 100%;}
.col2{width: 50%;}
.col3{width: 33.33%;}
.col4{width: 25%;}
.col5{width:20%;}
.ft12{font-size: 24rpx;}
.ft13{font-size: 26rpx;}
.ft14{font-size: 28rpx;}
.ft15{font-size: 30rpx;}
.ft16{font-size: 32rpx;}
.ft17{font-size: 34rpx;}
.ft18{font-size: 36rpx;}
.ft20{font-size: 40rpx;}
.ft22{font-size: 44rpx;}
.ft24{font-size: 48rpx;}
.ft26{font-size: 52rpx;}
.ft27{font-size: 54rpx;}
.ft28{font-size: 56rpx;}
.ft32{font-size: 64rpx;}
.ft36{font-size: 72rpx;}
.ft40{font-size: 80rpx;}
.ft50{font-size: 100rpx;}
.ft60{font-size: 120rpx;}
.ft80{font-size: 160rpx;}
/*字体加粗*/
.ftw400{font-weight: 400;}
.ftw500{font-weight: 500;}
.ftw600{font-weight: 600;}
.ft-italic{font-style: italic;}
.text-over{ overflow: hidden; text-overflow: ellipsis;white-space: nowrap;}
.text-over2{overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.text-over3{overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.text-center{text-align: center;}
.text-right{text-align: right;}
.text-line{text-decoration:line-through;}
.text-line-down{text-decoration: underline;}
.lh16{line-height: 32rpx;}
.lh18{line-height: 36rpx;}
.lh20{line-height: 40rpx;}
.lh22{line-height: 44rpx;}
.lh24{line-height: 48rpx;}
.lh26{line-height: 52rpx;}
.lh28{line-height: 56rpx;}
.lh30{line-height: 60rpx;}
.lh32{line-height: 64rpx;}
.lh36{line-height: 72rpx;}
.lh40{line-height: 80rpx;}
.cl-w{color:#FFFFFF;}
.cl-w9{color:rgba(255,255,255,0.9)}
.cl-w8{color:rgba(255,255,255,0.8)}
.cl-main{color:#2E2F33;}
.cl-default{color:#000000;}
.cl-info2{color:#5C5E66;}
.cl-info{color:#666666;}
.cl-placeholder{color:#CCCCCC;}
.cl-light{color:#E4E6ED;}
.cl-notice{color:#AEB2C1;}
.cl-price{color:#FF3D3D;}
.cl-text1{color: #37B7A6;}
.cl-text2{color: #898989;}
.cl-h{color: #FFDC04;}
.cl-yellow{color:#FFE5AD;}
.cl-green{color:#00C657;}
.cl-manage{color:#5E40FF;}
.cl-orange{color:#FF6600}
.cl-blue{color:#1890FF}
.cl-red{color:#ff0000;}
.cl-hui{color:#999999;}
.cl-fen{color:#FD6DA2;}
.cl-g{color: #34b965;}
.cl-h{color: #c40c24;}
.cl-j{color: #f4d8b0;}
.bg-w{background: #FFFFFF;}
.bg-default{background: #F7F7F7;}
.bg-manage{background: #5E40FF;}
.bg-fen{background:#FD6DA2;}
.bg-lan{background: #100D20}
.bg-green{background: #37B7A6;}
.bg-h{background: #c40c24;}
.mt2{margin-top: 4rpx;}
.mt4{margin-top: 8rpx;}
.mt5{margin-top: 10rpx;}
.mt6{margin-top: 12rpx;}
.mt7{margin-top: 15rpx;}
.mt8{margin-top: 16rpx;}
.mt10{margin-top: 20rpx;}
.mt12{margin-top: 24rpx;}
.mt14{margin-top: 28rpx;}
.mt15{margin-top: 30rpx;}
.mt16{margin-top: 32rpx;}
.mt18{margin-top: 36rpx;}
.mt20{margin-top: 40rpx;}
.mt24{margin-top: 48rpx;}
.mt25{margin-top: 50rpx;}
.mt30{margin-top: 60rpx;}
.mt32{margin-top: 64rpx;}
.mt40{margin-top: 80rpx;}
.mt50{margin-top: 100rpx;}
.mt60{margin-top: 120rpx;}
.mb4{margin-bottom: 8rpx;}
.mb5{margin-bottom: 10rpx;}
.mb7{margin-bottom: 15rpx;}
.mb10{margin-bottom: 20rpx;}
.mb15{margin-bottom: 30rpx;}
.mb16{margin-bottom: 32rpx;}
.mb20{margin-bottom: 40rpx;}
.mb24{margin-bottom: 48rpx;}
.mb25{margin-bottom: 50rpx;}
.mb30{margin-bottom: 60rpx;}
.mb35{margin-bottom: 70rpx;}
.ml3{margin-left: 6rpx;}
.ml4{margin-left: 8rpx;}
.ml5{margin-left: 10rpx;}
.ml7{margin-left: 15rpx;}
.ml10{margin-left: 20rpx;}
.ml15{margin-left: 30rpx;}
.ml20{margin-left: 40rpx;}
.ml25{margin-left: 50rpx;}
.ml30{margin-left: 60rpx;}
.ml40{margin-left: 80rpx;}
.ml50{margin-left: 100rpx;}
.ml60{margin-left: 120rpx;}
.mr5{margin-right: 10rpx;}
.mr7{margin-right: 15rpx;}
.mr10{margin-right: 20rpx;}
.mr15{margin-right: 30rpx;}
.mr20{margin-right: 40rpx;}
.mr25{margin-right: 50rpx;}
.mr30{margin-right: 60rpx;}
.mr60{margin-right: 120rpx;}
/**一般PADDING需要用到的值,其他的不通用的单独设置**/
.pt5{padding-top: 10rpx;}
.pt10{padding-top: 20rpx;}
.pt12{padding-top: 24rpx;}
.pt15{padding-top: 30rpx;}
.pt16{padding-top: 32rpx;}
.pt18{padding-top: 36rpx;}
.pt20{padding-top: 40rpx;}
.pt24{padding-top: 48rpx;}
.pt30{padding-top: 60rpx;}
.pt32{padding-top: 64rpx;}
.pt40{padding-top: 80rpx;}
.pt60{padding-top: 120rpx;}
.pt80{padding-top: 160rpx;}
.pb5{padding-bottom: 10rpx;}
.pb10{padding-bottom: 20rpx;}
.pb12{padding-bottom: 24rpx;}
.pb15{padding-bottom: 30rpx;}
.pb16{padding-bottom: 32rpx;}
.pb20{padding-bottom: 40rpx;}
.pb24{padding-bottom: 48rpx;}
.pb30{padding-bottom: 60rpx;}
.pb32{padding-bottom: 64rpx;}
.pd5{padding: 10rpx;}
.pd10{padding: 20rpx;}
.pd15{padding:30rpx;}
.pd20{padding: 40rpx;}
.pd24{padding: 48rpx;}
.pd30{padding: 60rpx;}
.pd32{padding: 64rpx;}
.plr5{padding:0rpx 10rpx;}
.plr10{padding:0rpx 20rpx;}
.plr15{padding:0rpx 30rpx;}
.plr20{padding:0rpx 40rpx;}
.plr30{padding: 0rpx 60rpx;}
.plr35{padding: 0rpx 70rpx;}
.plr40{padding: 0rpx 80rpx;}
.plt5{padding:10rpx 0rpx;}
.plt10{padding:20rpx 0rpx;}
.plt15{padding:30rpx 0rpx;}
.plt20{padding:40rpx 0rpx;}
.plt30{padding: 60rpx 0rpx;}
.plt40{padding: 80rpx 0rpx;}
.pr5{padding-right: 10rpx;}
.pr10{padding-right: 20rpx;}
.pr15{padding-right: 30rpx;}
.pr20{padding-right: 40rpx;}
.pr30{padding-right: 60rpx;}
.pl5{padding-left: 10rpx;}
.pl10{padding-left: 20rpx;}
.pl15{padding-left: 30rpx;}
.pl20{padding-left: 40rpx;}
.pl30{padding-left: 60rpx;}
.pd2_10{
padding: 4rpx 20rpx;
}
.pd5_10{
padding: 10rpx 20rpx;
}
.pd7_15{
padding: 14rpx 30rpx;
}
.pd10_15{
padding: 20rpx 30rpx;
}
.pd12_10{
padding: 24rpx 20rpx;
}
.pd20_15{
padding: 40rpx 30rpx;
}
.pd16_15{
padding: 32rpx 30rpx;
}
.pd16_20{
padding: 32rpx 40rpx;
}
.pd24_15{
padding: 48rpx 30rpx;
}
.pd24_20{
padding: 48rpx 40rpx;
}
.pd16_30{
padding: 32rpx 60rpx;
}
/* 圆角 */
.border-rad10{
border-radius:10rpx;
}
.border-rad20{
border-radius:20rpx;
}
/*缩小*/
.scale6{transform: scale(.6);}
.scale8{transform: scale(.8);}
/*透明度*/
.op3{opacity: .3;}
.op5{opacity: .5;}
.op8{opacity: .8;}
.op9{opacity: .9;}
.picker-view{
height: 400rpx;
}
.picker-view .item{
line-height: 100rpx;
font-size: 32rpx;
color:#333333;
}
.box{
width:100%;
background:#FFFFFF;
box-shadow:0rpx 8rpx 40rpx 0rpx rgba(0,0,0,0.04);
border-radius:32rpx;
}
.box.noshadow{
box-shadow:none;
}
.bd-line{
height: 2rpx;
width: 100%;
background: #E4E6ED;
}
.bd-bottom{
border-bottom: 2rpx solid rgba(230, 230, 230, 0.8);
}
.bd-left{
border-left: 2rpx solid rgba(230, 230, 230, 0.8);
}
.border-bottom{
border-bottom: 1px solid #e1e1e1;
}
.form-footer-h{
height: 140rpx;
height: calc(140rpx + constant(safe-area-inset-bottom));
height: calc(140rpx + env(safe-area-inset-bottom));
}
.form-footer{
width: 100%;
position: fixed;
z-index: 10;
left: 0;
bottom: 0;
background: #FFFFFF;
box-shadow:0rpx -4rpx 16rpx 0rpx rgba(0,0,0,0.04);
}
.form-footer-main{
width: 100%;
height: 100rpx;
}
.form-footer-item{
padding: 0;
margin: 0;
background: #FFFFFF;
line-height: 1;
color:#AEB2C1;
}
.btn-big,.btn-manage,.btn-mid,.btn-manage-mid,.btn-small,.btn-mini,.btn-manage-small,.btn-manage-mini{
width: 100%;
height: 88rpx;
border-radius:50rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 32rpx;
font-weight: 500;
color: #000000;
background: #FFFFFF;
margin: 0;
padding: 0;
transition: all 0.4s;
}
.btn-big.dis,.btn-manage.dis,.btn-mid.dis,.btn-manage-mid.dis,.btn-small.dis,.btn-mini.dis,.btn-manage-small.dis,.btn-manage-mini.dis{
background:#F0F1F5;
color:#AEB2C1;
}
.btn-manage,.btn-manage-mid,.btn-manage-small,.btn-manage-mini{
background:#5E40FF;
color:#FFFFFF;
}
.btn-mid,.btn-manage-mid{
width: 300rpx;
height: 80rpx;
border-radius:40rpx;
font-size: 28rpx;
}
.btn-manage.plan,.btn-manage-mid.plan,.btn-manage-small.plan,.btn-manage-mini.plan{
border:2rpx solid #5E40FF;
background: #FFFFFF;
color:#5E40FF;
}
.btn-big.plan,.btn-mid.plan,.btn-small.plan,.btn-mini.plan{
border:2rpx solid #E4E6ED;
background: #FFFFFF;
color:#353535;
}
.btn-small,.btn-mini,.btn-manage-small,.btn-manage-mini{
width: 176rpx;
font-size: 28rpx;
height: 64rpx;
border-radius: 32rpx;
}
.btn-mini,.btn-manage-mini{
width: 120rpx;
}
标签：font,color,top,padding,btn,margin,css 来源： https://www.cnblogs.com/aniall/p/15483486.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。