- 首页 > it技术 > >
// 公共颜色
.orangr {
color: #ff702e;
}.orange {
color: #ff702e;
}.bg-orangr {
background: #ff702e;
}// 下划线
.bd-bottom {
border-bottom: 1px solid #ededed;
}.bd-gray {
border-bottom: 1px solid#f5f5f5;
}.bg-gray1 {
background: #f4f4f4;
}.black {
color: #a2a5a8;
}.h1 {
height: 1px;
}.gray1 {
color: #797d82;
}.red {
color: #c03131;
}.bg-red {
background: #b92b2b;
}// 灰条
.ht {
border: 1px solid#f4f4f4;
height: 9px;
background: #f4f4f4;
}// 公共样式2D
.lable2D {
color: #ffffff;
height: 16px;
width: 18px;
background-color: #d4d3d9;
display: inline-block;
line-height: 16px;
margin-left: 7px;
text-align: center;
}// 字体省略公共样式
.ell {
// display: block;
// 文本超出省略
text-overflow: ellipsis;
// 隐藏周围其他内容
white-space: nowrap;
// 溢出隐藏
overflow: hidden;
width: 250px;
}// 共同公共样式
// pc常用公共样式
// 透明背景
.op {
opacity: 0.5;
}// 自动适应宽
.wa {
width: calc((100vw - 33px)/3);
}// 小圆角
.r {
border-radius: 3px;
}// 圆
.rr {
border-radius: 50%;
}// 去边框
.qb {
border: none;
outline: none;
}// 底部
.b {
bottom: 0;
}// 顶部
.t {
top: 0;
}// 左浮
.fl {
float: left;
}//右浮
.fr {
float: right;
} //清除浮动
.clear:after {
content: "";
display: block;
clear: both;
visibility: hidden;
}//溢出隐藏
.ovh {
overflow: hidden;
}// 溢出自动
.ova {
overflow: auto;
}// 移动端常用公共样式
// 字体颜色
.gray1 {
color: #525252;
}//灰色的边框
.bd {
border: 1px solid gray;
}//100%的高
.h100pc {
height: 100%;
}//100%的宽
.w100pc {
width: 100%;
}//隐藏元素
.dsn {
display: none;
}//字体加粗
.bold {
font-weight: bold;
}//字体减粗
.fw400 {
font-weight: 400;
}//传统盒子模型
.bzb {
box-sizing: border-box;
}//固定定位
.fixed {
position: fixed;
}//相对定位
.rel {
position: relative;
}//固定定位
.abs {
position: absolute;
}//单行文本水平居中
.tac {
text-align: center;
}//单行文本水平居右
.tar {
text-align: right;
}// 字体颜色设置
//红色
.red {
color: #ff5f16;
}//灰色
.gray {
color: #adadad;
}//白色
.fff {
color: #ffffff;
}//背景颜色
.bg-green {
background: green;
}.bg-gray {
background: gray;
}.bg-fff {
background: #ffffff;
}.bg-black {
background: #222426;
}.bg-red {
background: #f05045;
}// 高度
.h10 {
height: 10px;
}.h20 {
height: 20px;
}.h26 {
height: 26px;
}.h30 {
height: 30px;
}.h40 {
height: 40px;
}.h50 {
height: 50px;
}.h60 {
height: 60px;
}.h70 {
height: 70px;
}.h80 {
height: 80px;
}.h90 {
height: 90px;
}.h100 {
height: 100px;
}// 宽
.w10 {
width: 10px;
}.w20 {
width: 20px;
}.w26 {
width: 26px;
}.w30 {
width: 30px;
}.w40 {
width: 40px;
}.w50 {
width: 50px;
}.w60 {
width: 60px;
}.w70 {
width: 70px;
}.w80 {
width: 80px;
}.w90 {
width: 90px;
}.w100 {
width: 100px;
}.w160 {
width: 160px;
}// 行高
.lh15 {
line-height: 1.5;
}.lh10 {
line-height: 10px;
}.lh20 {
line-height: 20px;
}.lh29 {
line-height: 29px;
}.lh30 {
line-height: 30px;
}.lh40 {
line-height: 40px;
}.lh50 {
line-height: 50px;
}.lh60 {
line-height: 60px;
}.lh70 {
line-height: 70px;
}.lh80 {
line-height: 80px;
}.lh90 {
line-height: 90px;
}.f26 {
font-size: 26px;
}// (12) 字体大小
@0px: 0px;
// margin-left
.font(@n, @i: 6) when (@i =< @n) {
.f@{i} {
font-size: @i+@0px;
}
.font(@n, (@i + 2));
// +2得到的结果是1,3,5,7
// .mg-l(@n, (@i + 2));
}.font(36);
// (13) margin-left
@0px: 0px;
// margin-left
.mg-l(@n, @i: 1) when (@i =< @n) {
.mg-l-@{i} {
margin-left: @i+@0px;
}
.mg-l(@n, (@i + 1));
// +2得到的结果是1,3,5,7
// .mg-l(@n, (@i + 2));
}.mg-l(50);
// (13) margin-right
@0px: 0px;
// margin-right
.mg-r(@n, @i: 1) when (@i =< @n) {
.mg-r-@{i} {
margin-right: @i+@0px;
}
.mg-r(@n, (@i + 1));
// +2得到的结果是1,3,5,7
// .mg-r(@n, (@i + 2));
}.mg-r(50);
// (14) margin-top
.mg-t(@n, @i: 1) when (@i =< @n) {
.mg-t-@{i} {
margin-top: @i+@0px;
}
.mg-t(@n, (@i + 1));
}.mg-t(60);
// 内边距-右
.pd-l(@n, @i: 1) when (@i =< @n) {
.pd-l-@{i} {
padding-left: @i+@0px;
}
.pd-l(@n, (@i + 1));
}.pd-l(40);
//内边距-上
.pd-t(@n, @i: 1) when (@i =< @n) {
.pd-t-@{i} {
padding-top: @i+@0px;
}
.pd-t(@n, (@i + 1));
}.pd-t(40);
//内边距-右
.pd-r(@n, @i: 1) when (@i =< @n) {
.pd-r-@{i} {
padding-right: @i+@0px;
}
.pd-r(@n, (@i + 1));
}.pd-r(40);
//内边距-下
.pd-b(@n, @i: 1) when (@i =< @n) {
.pd-b-@{i} {
padding-bottom: @i+@0px;
}
.pd-b(@n, (@i + 1));
}.pd-b(50);
// flex相关
// 所有元素水平居中,垂直居中
.fcc {
display: flex;
justify-content: center;
align-items: center;
}// 行内所有元素居中
.ifcc {
display: inline-flex;
justify-content: center;
align-items: center;
}// 垂直居中,两端对齐
.flex-sb {
display: flex;
justify-content: space-between;
align-items: center;
}// 垂直居中,分散对齐
.flex-sa {
display: flex;
justify-content: space-around;
align-items: center;
}// 剩余空间分配
.fg1 {
flex-grow: 1;
}.fg2 {
flex-grow: 2;
}// 纵向排列
// 所有元素垂直居中
.fdcc {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}// 单个组合模式:
// 进入弹性布局模式:
.flex {
display: flex;
}// 默认情况下就是这个垂直靠左
.fdc {
display: flex;
flex-direction: column;
}// 原点
.jc-start {
justify-content: flex-start;
}.jc-end {
justify-content: flex-end;
}// 水平居中
.jc-center {
justify-content: center;
}// 两端对齐
.jc-sb {
justify-content: space-between;
}// 水平分散
.jc-sa {
justify-content: space-around;
}// 垂直居中
.ai-center {
align-items: center;
}/* //单行溢出省略号 */
.ohen {
width: 250px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}/* 多行溢出隐藏 */
.owen {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
}
推荐阅读
