欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序列表页样式布局之一行两个图文列表制作教程(2)

    2019-07-09 12:45 来源/作者:懒人模板 分类:小程序教程  « »

    二、wxss样式文件代码如下:
    .mod-item{
     width:46%;
     height:300rpx;
     float: left;
     margin-left:20rpx;
     margin-top:40rpx;
     position: relative;
    }
    .mod-signup{
      position: absolute;
    }
    .mod-signup image{
      width:76rpx;
      height:42rpx;
    }
    .mod-img{
      width:100%;
      height:180rpx;
    } 
    .mod-image{
      width: 100%;
      height:180rpx;
    }
    .mod-title{
      font-size:32rpx;
      font-family: '微软雅黑';
      display:flex;
      height:45rpx;
      margin-top:15rpx;
      flex-direction:column;
      justify-content: center;
      text-overflow: -o-ellipsis-lastline;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .mod-info{
      display: flex;
      flex-direction: column;
      height:40rpx;
    }
    .mod-icon{
      display: flex;
      flex-direction: row;
      width: 40rpx;
      height: 40rpx;
    }
    .icon{
      width: 40rpx;
      height: 40rpx;
    }
    .moinfont{
      font-size: 28rpx;
      text-indent: 60rpx;
      font-family: '微软雅黑';
      color:#bfbfbf;
    }
    
    .more-info{
      display: flex;
      flex-direction: column;
      font-size:32rpx;
      font-family: '微软雅黑';
      line-height: 98rpx;
      text-indent: 30rpx;
      color:#586C94;
    }
    

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议