1、使用 :not 选择器
除了最后一个元素之外的所有元素都需要一些样式,这可以使用 not 选择器轻松实现。
例如,要实现列表,最后一个元素不需要加下划线,如下所示:
li:not(:last-child) {
border-bottom: 1px solid #ebedf0;
}
2、灰色模式
一行代码会将页面置于灰色模式。
body{
filter: grayscale(1);
}
3、文本超出显示省略号
//单行文本
.wrap{
overflow:hidden;//超出部分隐藏
text-overflow:ellipsis;//超出部分显示省略号
white-space:nowrap;//规定段湾中的文本不进行换行
}
//多行文本
.wrap{
width: 100%;
display: -webkit-box;//对象作为弹性伸缩盒子模型显示
overflow: hidden;//溢出隐藏
-webkit-box-orient: vertical;//设置伸缩盒子对象的子元素的排列方式
-webkit-line-clamp: 2;//设置 块元素包含的文本行数
}
4、文本换行
//不换行
.wrap{
white-space:nowrap;
}
//自动换行
.wrap{
word-wrap: break-word;
word-break: mormal;
}
//强制换行
.wrap{
word-break:break-all
}
5、使用::before来写tab
<view
v-for="(item, index) in mainData.nav"
:key="index"
class="text-center dis_block pad20_l"
:class="[index === mainData.navCur ? 'cur' : null]"
@click="choseNav(index, item.code)"
>
{{ item.name }}
</view>
.cur {
font-weight: bold;
color: #000;
position: relative;
}
.cur::before {
content: "";
position: absolute;
display: inline-block;
border-radius: 8rpx;
width: 60rpx;
height: 8rpx;
background-color: $uni-color-newPrimary;//下划线的颜色
left: 50%;
bottom: 0;
transform: translate(-50%, 0);
}
6、手写居中弹框
.container {
color: white;
padding: 20rpx 20rpx;
background-color: rgb(77, 77, 77);
border-radius: 10rpx;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}