uni-app、微信小程序基础布局CSS

这是我自己比较常用的，写到全局样式中，用到的时候直接调用就可以了。后续遇到还会更新。

page {background-color: #f5f5f5;font-size: 28upx;color: #333333;font-family: Helvetica Neue, Helvetica, sans-serif;
}/* ---布局CSS--- */
.flex{display: flex;
}
.justify-center{justify-content: center;
}
.justify-between{justify-content: space-between;
}
.justify-around{justify-content: space-around;
}
.align-center{align-items: center;
}
.align-start{align-items: flex-start;
}
.align-end{align-items: flex-end;
}
.flex-column{flex-direction: column;
}
.flex-shrink{flex-shrink: 0;
}/* ---内部白padding--- */
.padding-xs{padding: 10rpx;
}
.padding-sm{padding: 20rpx;
}
.padding-md{padding: 25rpx;
}
.padding-lg{padding: 30rpx;
}
.padding-xl{padding: 40rpx;
}
.padding-xxl{padding: 50rpx;
}
.padding-clear{padding: 0;
}
/* 上 */
.padding-top-xs{padding-top: 10rpx;
}
.padding-top-sm{padding-top: 20rpx;
}
.padding-top-md{padding-top: 25rpx;
}
.padding-top-lg{padding-top: 30rpx;
}
.padding-top-xl{padding-top: 40rpx;
}
.padding-top-xxl{padding-top: 50rpx;
}
.padding-top-clear{padding-top: 0;
}/* 右 */
.padding-right-xs{padding-right: 10rpx;
}
.padding-right-sm{padding-right: 20rpx;
}
.padding-right-md{padding-right: 25rpx;
}
.padding-right-lg{padding-right: 30rpx;
}
.padding-right-xl{padding-right: 40rpx;
}
.padding-right-xxl{padding-right: 50rpx;
}
.padding-right-clear{padding-right: 0;
}
/* 下 */
.padding-bottom-xs{padding-bottom: 10rpx;
}
.padding-bottom-sm{padding-bottom: 20rpx;
}
.padding-bottom-md{padding-bottom: 25rpx;
}
.padding-bottom-lg{padding-bottom: 30rpx;
}
.padding-bottom-xl{padding-bottom: 40rpx;
}
.padding-bottom-xxl{padding-bottom: 50rpx;
}
.padding-bottom-clear{padding-bottom: 0;
}
/* 左 */
.padding-left-xs{padding-left: 10rpx;
}
.padding-left-sm{padding-left: 20rpx;
}
.padding-left-md{padding-left: 25rpx;
}
.padding-left-lg{padding-left: 30rpx;
}
.padding-left-xl{padding-left: 40rpx;
}
.padding-left-xxl{padding-left: 50rpx;
}
.padding-left-clear{padding-left: 0;
}/* ---外边距margin--- */
.margin-xs{margin: 10rpx;
}
.margin-sm{margin: 20rpx;
}
.margin-md{margin: 25rpx;
}
.margin-lg{margin: 30rpx;
}
.margin-xl{margin: 40rpx;
}
.margin-xxl{margin: 50rpx;
}
.margin-clear{margin: 0;
}
/* 上 */
.margin-top-xs{margin-top: 10rpx;
}
.margin-top-sm{margin-top: 20rpx;
}
.margin-top-md{margin-top: 25rpx;
}
.margin-top-lg{margin-top: 30rpx;
}
.margin-top-xl{margin-top: 40rpx;
}
.margin-top-xxl{margin-top: 50rpx;
}
.margin-top-clear{margin-top: 0;
}/* 右 */
.margin-right-xs{margin-right: 10rpx;
}
.margin-right-sm{margin-right: 20rpx;
}
.margin-right-md{margin-right: 25rpx;
}
.margin-right-lg{margin-right: 30rpx;
}
.margin-right-xl{margin-right: 40rpx;
}
.margin-right-xxl{margin-right: 50rpx;
}
.margin-right-clear{margin-right: 0;
}
/* 下 */
.margin-bottom-xs{margin-bottom: 10rpx;
}
.margin-bottom-sm{margin-bottom: 20rpx;
}
.margin-bottom-md{margin-bottom: 25rpx;
}
.margin-bottom-lg{margin-bottom: 30rpx;
}
.margin-bottom-xl{margin-bottom: 40rpx;
}
.margin-bottom-xxl{margin-bottom: 50rpx;
}
.margin-bottom-clear{margin-bottom: 0;
}
/* 左 */
.margin-left-xs{margin-left: 10rpx;
}
.margin-left-sm{margin-left: 20rpx;
}
.margin-left-md{margin-left: 25rpx;
}
.margin-left-lg{margin-left: 30rpx;
}
.margin-left-xl{margin-left: 40rpx;
}
.margin-left-xxl{margin-left: 50rpx;
}
.margin-left-clear{margin-left: 0;
}/* ---颜色(根据项目主题色)--- */
.text-black{color: #333333;
}
.text-white{color: #FFFFFF;
}
.text-gray{color: #888888;
}
.text-main-color{color: #FF6100;
}
.text-second-color{color: #FEA501;
}.bg-main-color{background-color: #FF6100;color: #FFFFFF;
}
.bg-second-color{background-color: #FEA501;color: #FFFFFF;
}
.bg-gradual-main-second{background-image: linear-gradient(to right,#FF6100, #FEA501);color: #FFFFFF;
}
.bg-gradual-second-main{background-image: linear-gradient(to right, #FEA501,#FF6100);color: #FFFFFF;
}/* ---圆角--- */
.border-radius-xs{border-radius: 10rpx;
}
.border-radius-sm{border-radius: 20rpx;
}
.border-radius-md{border-radius: 25rpx;
}
.border-radius-lg{border-radius: 30rpx;
}
.border-radius-xl{border-radius: 40rpx;
}
.border-radius-circle{border-radius: 50%;
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！