自定义公共样式

最新推荐文章于 2024-11-06 19:21:04 发布
Alice9969
最新推荐文章于 2024-11-06 19:21:04 发布
阅读量894
点赞数
CC 4.0 BY-SA版权
文章标签： css html html5
本文链接：https://blog.csdn.net/Alice9969/article/details/120190068
本文探讨了在uni-app框架下如何创建和应用自定义的公共样式，以提升前端项目的样式一致性与效率。通过设置全局单位，实现跨页面样式复用。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
基于 uni-app单位的公共样式。自用。

/**************** 自定义内容 **********************/ 
.hide {
  display: none !important;
}

.scroll-view_H{
  white-space: nowrap;
  width: 100%;
}
/**************** /自定义内容 **********************/ 


/**************** 颜色/背景色 **********************/ 
/* 由于var的兼容性限制，这个非常有意思的CSS技巧还不太适合在大型对外项目中使用 */
body {
  --blue: #58A5FF;
  --red: #E4393E;
  --black: #2C2C2C;
  --green: #3DABC4;
  --yellow: #FFE500;
  --white: #fff;
  --pink: #ffb6c1;
  --grey: #8D8D8D;
  --borderColor: #EAEAEA;
}

/* 蓝色字体 */
.blue {
  color: var(--blue);
}
/* 红色字体 */
.red {
  color: var(--red)
}
/* 黑色字体 */
.black {
  color: var(--black);
}
/* 绿色字体 */
.green {
  color: var(--green);
}
/* 黄色字体 */
.yellow {
  color: var(--yellow);
}
/* 白色字体 */
.white {
  color: var(--white);
}
/* 粉色字体 */
.pink {
  color: var(--pink)
}
/* 灰色字体 */
.grey {
  color: var(--grey)
}
/* 蓝色背景 */
.blue-bg {
  background-color: var(--blue);
}
/* 红色背景 */
.red-bg {
  background-color: var(--red);
}
/* 绿色背景 */
.green-bg {
  background-color: var(--green);
}
/* 黄色背景 */
.yellow-bg {
  background-color: var(--yellow);
}
/* 白色背景 */
.white-bg {
  background-color: var(--white);
}
/* 黑色背景 */
.black-bg {
  background-color: var(--black);
}
/* 粉色背景 */
.pink-bg {
  background-color: var(--pink);
}
/* 灰色背景 */
.grey-bg {
  background-color: var(--grey);
}

/**************** flex 布局 **********************/ 
/*flex不适用IE11以下，注意兼容*/

/*水平、垂直方向剧中 */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*水平方向左端开始 */
.flex-row-start {
  display: flex;
  flex-direction: row;
  justify-content: start
}

/*水平方向间距相等 */
.flex-row-space-between {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/*水平方向等距环绕 */
.flex-row-space-around {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

/*竖直方向居中*/
.flex-column-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 子项在flex容器的当前行的纵轴方向上的居中对齐 */
.aic {
  align-items: center;
}

/**************** 图片设置剪裁方式 **********************/ 

/* 图片不剪裁 */
.responsive-img {
  display: block;
  width: 100%;
}
/* 图片保持原有尺寸比例，但部分内容可能被剪切 */
.responsive-img-fit {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/**************** 生成的框的类型 **********************/ 
.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
  vertical-align: top;
}

.block {
  display: block;
}

/**************** 边框 **********************/ 
/*全边框*/
.border {
  border: 1rpx solid var(--borderColor);
}

/*下边框*/
.bb {
  border-bottom: 1rpx solid var(--borderColor);
}

/*上边框*/
.bt {
  border-top: 1rpx solid var(--borderColor);
}

/*左边框*/
.bl {
  border-left: 1rpx solid var(--borderColor);
}

/*右边框*/
.br {
  border-right: 1rpx solid var(--borderColor);
}

/**************** 宽度 **********************/ 
/*全行*/
.w10000 {
  width: 100.00%;
}

/*半列*/
.w5000 {
  width: 50.00%;
}

/* 1/3列 */
.w3333 {
  width: 33.33%;
}

/**************** 字体粗细 / 字体对齐 / 字体大小 / 字体省略 **********************/ 
/* 字体加粗  */
.fwb, .bold {
  font-weight: bold;
}

/* 字体500粗  */
.fw500 {
  font-weight: 500;
}

/* 字体左对齐  */
.tal {
  text-align: left;
}

/* 字体右对齐  */
.tar {
  text-align: right;
}

/* 字体居中对齐  */
.tac {
  text-align: center;
}

/* 字体超出1行省略  */
.overflow-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 字体超出2行省略  */
.overflow-ellipsis2, .overflow-ellipsis-more {
  letter-spacing: 0;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;  /*要显示的行数*/
  -webkit-box-orient: vertical;
  font-size:12px;
}

/**************** 字体大小，12~40 ，2的倍数增加 **********************/ 
.fs12 {
  font-size: 12rpx;
}

.fs14 {
  font-size: 14rpx;
}

.fs16 {
  font-size: 16rpx;
}

.fs18 {
  font-size: 18rpx;
}

.fs20 {
  font-size: 20rpx;
}

.fs22 {
  font-size: 22rpx;
}

.fs24 {
  font-size: 24rpx;
}

.fs26 {
  font-size: 26rpx;
}

.fs28 {
  font-size: 28rpx;
}

.fs30 {
  font-size: 30rpx;
}

.fs32 {
  font-size: 32rpx;
}

.fs34 {
  font-size: 33rpx;
}

.fs36 {
  font-size: 36rpx;
}

.fs38 {
  font-size: 38rpx;
}

.fs40 {
  font-size: 40rpx;
}

/**************** 圆角，12~30，2的倍数增加 **********************/ 
/* 圆 */
.circle {
  border-radius: 100%;
}

.br12 {
  border-radius: 12rpx;
}

.br14 {
  border-radius: 14rpx;
}

.br16 {
  border-radius: 16rpx;
}

.br18 {
  border-radius: 18rpx;
}

.br20 {
  border-radius: 12rpx;
}

.br22 {
  border-radius: 22rpx;
}

.br24 {
  border-radius: 24rpx;
}

.br26 {
  border-radius: 26rpx;
}

.br28 {
  border-radius: 28rpx;
}

.br30 {
  border-radius: 30rpx;
}

/********** Margin 间距 5~40，5的倍数增加 *********/
.mt5 {
  margin-top: 5rpx;
}
.mt10 {
  margin-top: 10rpx;
}
.mt15 {
  margin-top: 15rpx;
}
.mt20 {
  margin-top: 20rpx;
}
.mt25 {
  margin-top: 25rpx;
}
.mt30 {
  margin-top: 30rpx;
}
.mt35 {
  margin-top: 35rpx;
}
.mt40 {
  margin-top: 40rpx;
}


.mr5 {
  margin-right: 5rpx;
}
.mr10 {
  margin-right: 10rpx;
}
.mr15 {
  margin-right: 15rpx;
}
.mr20 {
  margin-right: 20rpx;
}
.mr25 {
  margin-right: 25rpx;
}
.mr30 {
  margin-right: 30rpx;
}
.mr35 {
  margin-right: 35rpx;
}
.mr40 {
  margin-right: 40rpx;
}


.mb5 {
  margin-bottom: 5rpx;
}
.mb10 {
  margin-bottom: 10rpx;
}
.mb15 {
  margin-bottom: 15rpx;
}
.mb20 {
  margin-bottom: 20rpx;
}
.mb25 {
  margin-bottom: 25rpx;
}
.mb30 {
  margin-bottom: 30rpx;
}
.mb35 {
  margin-bottom: 35rpx;
}
.mb40 {
  margin-bottom: 40rpx;
}


.ml5 {
  margin-left: 5rpx;
}
.ml10 {
  margin-left: 10rpx;
}
.ml15 {
  margin-left: 15rpx;
}
.ml20 {
  margin-left: 20rpx;
}
.ml25 {
  margin-left: 25rpx;
}
.ml30 {
  margin-left: 30rpx;
}
.ml35 {
  margin-left: 35rpx;
}
.ml40 {  
  margin-left: 40rpx;
}


/********** Padding 填充 5 - 40，5的倍数增加 *********/

.pt5 {
  padding-top: 5rpx;
}
.pt10 {
  padding-top: 10rpx;
}
.pt15 {
  padding-top: 15rpx;
}
.pt20 {
  padding-top: 20rpx;
}
.pt25 {
  padding-top: 25rpx;
}
.pt30 {
  padding-top: 30rpx;
}
.pt35 {
  padding-top: 35rpx;
}
.pt40 {
  padding-top: 40rpx;
}



.pr5 {
  padding-right: 5rpx;
}
.pr10 {
  padding-right: 10rpx;
}
.pr15 {
  padding-right: 15rpx;
}
.pr20 {
  padding-right: 20rpx;
}
.pr25 {
  padding-right: 25rpx;
}
.pr30 {
  padding-right: 30rpx;
}
.pr35 {
  padding-right: 35rpx;
}
.pr40 {
  padding-right: 40rpx;
}


.pb5 {
  padding-bottom: 5rpx;
}
.pb10 {
  padding-bottom: 10rpx;
}
.pb15 {
  padding-bottom: 15rpx;
}
.pb20 {
  padding-bottom: 20rpx;
}
.pb25 {
  padding-bottom: 25rpx;
}
.pb30 {
  padding-bottom: 30rpx;
}
.pb35 {
  padding-bottom: 35rpx;
}
.pb40 {
  padding-bottom: 40rpx;
}


.pl5 {
  padding-left: 5rpx;
}
.pl10 {
  padding-left: 10rpx;
}
.pl15 {
  padding-left: 15rpx;
}
.pl20 {
  padding-left: 20rpx;
}
.pl25 {
  padding-left: 25rpx;
}
.pl30 {
  padding-left: 30rpx;
}
.pl35 {
  padding-left: 35rpx;
}
.pl40 {
  padding-left: 40rpx;
}