微信小程序布局实例

//index.js
Page({
  data:{
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    contentItems:['','','',''],
    listItems:['','','','','','','']
  }
})

index.wxml


 
  
    
      
        
          
        
      
    
  


  
      
           精品推荐
            全部精品
      


      
          
             
             
              这里是标题
             
          

         

      

  



  
      
           热门评测
            全部评测
      

      

            
                 
                 
            

            
                
                  标题标题标题
                

                
                  这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,
                

            

      


  

/* index.wxss */
.selection{
  border-bottom: 5px solid #ddd;

}


.header{
  border-left-width: 2px;
  border-left-style: solid;
  border-left-color: limegreen;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60rpx;
  padding-left: 10rpx;
  padding-right: 10rpx;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
}

.text-all{
  color: green;
  font-size: 10px;
}

.content{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
}

.content-item{
  height: 250rpx;
  width: 45%;
  background-color: goldenrod;
  margin: 5px;
  position: relative;
}

.content-item image{
  width: 100%;
  height: 100%;
}

.content-item-text{
  position: absolute;
  bottom: 0px;
  color: white;
  font-size: 10px;
  background: -webkit-linear-gradient(bottom,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0));
  height: 125rpx;
  width: 98%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 1%;
}

.list-item{
  height: 500rpx;
  width: 100%;
}
.list-item-images{
   height: 300rpx;
   width: 100%;
   position: relative;
}

.list-item-images-img{
   height: 100%;
   width: 100%;
}


.avatar{
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  position: absolute;
  bottom: -50rpx;
  right: 50rpx;
}


.list-item-text{
  height: 200rpx;
  width: 96%;
  margin-top: 20rpx;
  padding-left: 2%;
  padding-right: 2%; 
}

.list-item-text-content{
  font-size: 10px;
  color: #999;
  margin-top: 20rpx;

}