微信小程序好看的图文混排文章样式

最新推荐文章于 2024-07-06 09:59:55 发布

予橘Sugar

最新推荐文章于 2024-07-06 09:59:55 发布

阅读量2.3k

点赞数 2

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/m0_54274761/article/details/119717029

版权

WXML WXSS 小程序开发布局设计样式设置

关键词由CSDN通过智能技术生成

微信小程序专栏收录该内容

6 篇文章 1 订阅

订阅专栏

效果图

话不多说放代码

//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;
}