css——分栏样式

最新推荐文章于 2024-05-18 06:08:21 发布

耶啵奶膘

最新推荐文章于 2024-05-18 06:08:21 发布

阅读量196

点赞数 3

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/xulihua_75/article/details/138219114

版权

CSS 专栏收录该内容

37 篇文章 2 订阅

订阅专栏

案例样式

在这里插入图片描述

案例代码

使用伪类处理

<view class="twoBox">
	<view class="numBox">
		<view class="num">1999</view>
		<view class="numTxt">关注</view>
	</view>
	<view class="numBox">
		<view class="num">1999</view>
		<view class="numTxt">粉丝</view>
	</view>
	<view class="numBox">
		<view class="num">1999</view>
		<view class="numTxt">获赞数</view>
	</view>
</view>

.twoBox{
	margin: 0 25rpx;
	height: 113rpx;
	background: rgba(255,255,255,0.45);
	border-radius: 15rpx 15rpx 15rpx 15rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.numBox{
		text-align: center;
		flex: 1;
		flex-shrink: 0;
		position: relative;
		.num{
			font-weight: bold;
			font-size: 28rpx;
			color: #3D3D3D;
		}
		.numTxt{
			font-size: 24rpx;
			color: #3D3D3D;
			margin-top: 10rpx;
		}
	}
	.numBox::after{
		content: '';
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1rpx;
		height: 52rpx;
		background-color: #CCD0D4;
	}
	.numBox:last-child::after {
	    display: none;
	}
}