⼩程序好看的图⽂混排⽂章样式效果图
话不多说放代码
//wxml
<view class="vi" >
<view class="img"></view>
<view class="tet"> <text class="tex">标题\n</text>写文章的小程序
简介
</view>
</view>
//wxss
.img{
width: 50px;
height: 50px;
background: url(图⽚的链接) no-repeat ;
}
.txt{
padding: 20rpx 50rpx 20rpx 15rpx;
align-items: center;
justify-content: center;
font-size: 15px;
}
.
tex{
font-weight: bold;
font-size: 19px;
}
.image {
width: 90%;
height: 80%;
}
.vi{
padding: 20rpx 50rpx 20rpx 24rpx;
margin: 20rpx 19rpx 0rpx 15rpx;
height: 60px;
background-color: #f9f9f9;
display: flex;
flex-direction: row;
border-radius: 7px;
align-items: center;
box-shadow:0px 0px 10px #ffffff;
z-index: 1;
}