本文共 10520 字，大约阅读时间需要 35 分钟。

在网上下载一个小程序源码，排版样式挺好看的，参照着写了几个例子。

1、例子1效果图

代码实现

（1）全局样式app.wxss

@import 'style/weui.wxss';page{    background-color: #F8F8F8;      font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;}.text-center{text-align: center;}/*  字体大小规范  */.font-lv1{font-size: 36rpx !important;}.font-lv2{font-size: 32rpx !important;}.font-lv3{font-size: 28rpx !important;}.font-lv4{font-size: 24rpx !important;}.font-lv5{font-size: 20rpx !important;}.strong{font-weight: bold;}/*  margin   */.mgt-15rpx{margin-top: 15rpx;}.mgb-15rpx{margin-bottom: 15rpx;}.mgl-15rpx{margin-left: 15rpx;}.mgr-15rpx{margin-right: 15rpx;}.mgt-30rpx{margin-top: 30rpx;}.mgb-30rpx{margin-bottom: 30rpx;}.mgl-30rpx{margin-left: 30rpx;}.mgr-30rpx{margin-right: 30rpx;}/*  padding  */.pdt-15rpx{padding-top: 15rpx;}.pdb-15rpx{padding-bottom: 15rpx;}.pdl-15rpx{padding-left: 15rpx;}.pdr-15rpx{padding-right: 15rpx;}.pdt-30rpx{padding-top: 30rpx;}.pdb-30rpx{padding-bottom: 30rpx;}.pdl-30rpx{padding-left: 30rpx;}.plr-30rpx{padding-right: 30rpx;}/*  颜色规范  *//*  黑  */.color-black{color: #000;}/*  淡黑  */.color-semi{color: #353535;}/*  灰色  */.color-grey{color: #888888;}/*  浅灰  */.color-light{color: #b2b2b2;}/*  绿色  */.color-green{color: #09bb09;}/*  红色  */.color-red{color: #e64340;}/*  信息提示颜色  */.color-info,.color-link{color: #00acff;}/*  背景和边线颜色  */.bd-color{border-color: #f1f1f1;}.bg-color{background-color: #f1f1f1;}.img-responsive{max-width: 100%;}.img-maxwidth{width: 100%;}.border-basic{border:1px solid #efefef;}/*  行高 line-height  */.lh-100{line-height: 100%;}.lh-150{line-height: 150%;}.lh-170{line-height: 170%;}.lh-180{line-height: 180%;}.lh-200{line-height: 200%;}/*  圆角  */.radius-basic,.cover{border-radius: 6rpx;}.radius-circle{border-radius: 100%;}/*  过渡动画  */.transition{  transition: all 0.5s;}.row {  display: flex;  flex-wrap: wrap;}.col {  flex-basis: 0;  flex-grow: 1;  max-width: 100%;}.col-1 {  flex: 0 0 8.333333%;  max-width: 8.333333%;}.col-2 {  flex: 0 0 16.666667%;  max-width: 16.666667%;}.col-3 {  flex: 0 0 25%;  max-width: 25%;}.col-4 {  flex: 0 0 33.333333%;  max-width: 33.333333%;}.col-5 {  flex: 0 0 41.666667%;  max-width: 41.666667%;}.col-6 {  flex: 0 0 50%;  max-width: 50%;}.col-7 {  flex: 0 0 58.333333%;  max-width: 58.333333%;}.col-8 {  flex: 0 0 66.666667%;  max-width: 66.666667%;}.col-9 {  flex: 0 0 75%;  max-width: 75%;}.col-10 {  flex: 0 0 83.333333%;  max-width: 83.333333%;}.col-11 {  flex: 0 0 91.666667%;  max-width: 91.666667%;}.col-12 {  flex: 0 0 100%;  max-width: 100%;}/**app.wxss**/.box-shadow{  box-shadow: 0px 2px 5px rgba(0,0,0,.1);}.base-padding{  box-sizing: border-box;  padding: 0rpx 30rpx;}.base-margin-bottom{  margin-bottom: 45rpx;}.pull-right{  float: right;}.text-right{  text-align: right;}.panel-heading{  margin-bottom: 30rpx;}/* 显示两行，溢出文字用‘...’替换 */.ellipsis-1row{  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 1;  -webkit-box-orient: vertical;  overflow: hidden;}.ellipsis-2row{  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;  overflow: hidden;}.ellipsis-3row{  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;  overflow: hidden;}.ellipsis-4row{  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 4;  -webkit-box-orient: vertical;  overflow: hidden;}.text-muted{  color: #888888;   font-size: 28rpx;   line-height: 170%;  text-align: left;}.cover{border-radius: 6rpx;}navigator:hover{background: transparent;}

（2）页面文件.wxml

   
     
        
           
   
   
     
        
     
      图片推荐      
      
       换一批
          
       
      
        
           
            
      
       风景1
          
         
           
            
      
       风景2
          
         
           
            
      
       风景3
          
       
    
   
   
     
        
     
      山水风光      
      
       更多
          
       
      
        
           
              
                 
                
             
            
              
       
        风光4
               
                 
         
         天前 
                          
         
         阅读 
                
               
       
        风景图片风景图片风景图片风景图片        
             
          
         
           
              
                 
                
             
            
              
       
        风光5
               
                 
         
         天前 
                          
         
         阅读 
                
               
       
        风景图片风景图片风景图片风景图片        
             
          
       
    
   

（3）页面文件.wxss

.search{  margin-top: 15rpx;}.search label{  position: relative;}.search icon{  position: absolute;  z-index: 99;  left: 20rpx;  top:20rpx;  font-size: 30rpx;}.search input{  height: 90rpx;  line-height: 90rpx;  border-radius: 6rpx;  background: #f8f8f8;  color: #888;  font-size: 32rpx;  padding-left: 90rpx;}.recommend .panel-body{  display: flex;  /* justify-content:space-around; */  justify-content: space-between;} .panel-body navigator{  width: 30%;} .panel-body navigator image{  margin: 0 auto;  display: block;  width: 100%;  border-radius: 6rpx;}.recommend .title{  font-size: 28rpx;  color: #666;  text-align: left;  line-height: 160%;  margin-top: 15rpx;}.cate-data .row{  display: flex;  flex-direction: row;  margin-bottom: 40rpx;  border-bottom: 1px solid #efefef;  padding-bottom: 40rpx;}.cate-data .row:last-of-type{  border-bottom: 0px;  padding-bottom: 0rpx;  margin-bottom: 0rpx;}.cate-data .row navigator{  width: 100%}.cate-data .row .row-left{  width: 25%;}.cate-data .row .row-right{  flex: 1;  box-sizing: border-box;  padding-left: 32rpx;}.cate-data .row .info{  margin: 10rpx 0rpx 10rpx;}.cate-data .info image{  width: 24rpx; height: 24rpx; position: relative; top:4rpx;}.cate-data .desc{  text-indent: 2em;}.cate-data .info{  display: flex; flex-direction: row; font-size: 24rpx; color: #b2b2b2;}.cate-data .info view{  flex: 1;}.cate-data{margin-top: 10rpx;}

2、例子2效果图

（1）全局样式app.wxss见第1个例子

（2）页面文件.wxml

     
        
       
      
        
     
      熊猫先生
         
      
      
       5.0 分
      
         
     
      熊猫
         
           
      
       进度
       
        20%
       
            
          
       
    
   
     
        
           
      
       10
            
      
       查看
          
         
           
      
       3
            
      
       收藏
          
         
           
      
       2
            
      
       评论
          
       
    
   
   
       历史使人聪明，诗歌使人机智，数学使人精细，哲学使人深邃，道德使人严肃，逻辑与修辞使人善辩。
   
     
    
     查看目录
      
    
     最后更新于：1小时前 >
    
   
     
        
     
      评论
       
      
        
           
              
             
            
              
                 
        
         天空
                            
         
         
          1小时前
          
                
               
       
                  感谢分享。        
             
          
         
           
              
             
            
              
                 
        
         大地
                            
         
         
          2小时前
          
                
               
       
                  楼主好人。        
             
          
        
    
   

（3）页面文件.wxss

page{  padding-bottom: 120rpx;}.cate-row .font-lv3{display: inline-block;margin-right: 30rpx;}.icon-avatar{width: 38rpx;position: relative;top:6rpx;}.info{padding: 30rpx;padding-top: 10rpx;}.info .cover{max-width: 100%;}.title{margin-bottom: 15rpx;min-height: 80rpx;}.info .col-8{padding-left: 30rpx;box-sizing:border-box;}.info .col-8 .text-muted{display: block;line-height: 180%;}.data{margin-bottom: 30rpx;padding: 0rpx 30rpx;}.data>view{border-bottom: 1px solid #efefef;padding-bottom: 30rpx;}.data .col{text-align: center;font-size: 28rpx;}.data .col:nth-of-type(2n){border-left: 1px solid #f1f1f1;border-right: 1px solid #f1f1f1;} .data .col .text-muted{text-align: center;display: block;} .btns{  padding: 0rpx 15rpx 30rpx;  border-bottom: 10rpx solid #efefef;}.btns .col{  justify-content: space-between;  padding: 0rpx 15rpx;  box-sizing: border-box;}.btns .col view{  background-color: #efefef;  text-align: center;  margin:0px auto;  padding: 8rpx 0rpx;  border-radius: 10rpx;}/*  书籍介绍  */ .intro{border-bottom: 1px solid #efefef;padding:30rpx;padding-top:0rpx;line-height: 180%;} /*  目录入口  */.menu{  padding: 30rpx;font-size: 28rpx;  border-bottom: 10rpx solid #efefef;}.user image{  width: 36rpx;height: 36rpx;display: inline-block;  margin-right: 10rpx;}.user image.clock{  margin-left: 30rpx;  width: 26rpx;  height: 26rpx;  position: relative;  top:-5rpx;}.user .text-muted{display: inline-block;position: relative;top:-7rpx;margin-left: 6rpx;}/* fix bottom  */.fix-bottom{  position: fixed;  bottom: 0px;  width: 100%;  text-align: center;  background-color: #fff;   box-shadow: 0rpx 0rpx 10rpx #ddd;  height: 90rpx;}.fix-bottom .read{  position: relative;  top:-30rpx;  background-color: #1aad19;  color: #fff;  padding-top: 10rpx;  box-sizing: border-box;  height: 110rpx;  width: 110rpx;  margin: 0px auto;  border-radius: 50%;  z-index: 10;}.fix-bottom image{  height: 50rpx;  width: 50rpx;  vertical-align: middle;}.fix-bottom text{display: block;font-size: 24rpx;}.item-min{font-size: 26rpx;color: #999;line-height: 100%;padding-top:10rpx;}.item-min image{width: 40rpx;height: 40rpx;margin-bottom: 4rpx;}.comments .panel-heading{border-bottom: 1px solid #efefef;padding-bottom: 30rpx;}.comment-info{line-height: 150%;}.comment-info .score{margin-top: 6rpx;}.comment-info .pull-right{margin-top:5rpx;}.comment-right{padding-left: 30rpx;box-sizing: border-box;}.comment-list{border-bottom: 1rpx solid #efefef;padding-bottom: 30rpx;margin-bottom: 40rpx;}

3、例子3效果图

（1）全局样式app.wxss见第1个例子

（2）页面文件.wxml

     
        
         
     
      昵称
         
     
      如果你浪费了自己的年龄，那是挺可悲的。因为你的青春只能持续一点儿时间——很短的一点儿时间。
       
    
   
     
        
         我的发布    
       
      
        
         我的收藏    
       
        
        
         我的关注    
       
    
   

（3）页面文件.wxss

page{  background-color: #f6f6f6;}.row{  background-color: #fff;  margin-bottom: 10rpx;  padding: 30rpx;}.row:last-of-type{  padding-bottom: 80rpx;  margin-bottom: 0rpx;}.user{  text-align: center;}.user .text-muted{  text-align: center;}.username{  margin: 15rpx auto;}.user image{  width: 180rpx;  height: 180rpx;  border-radius: 90rpx;  border: 1px solid #f6f6f6;}.base-info image{  height: 40rpx;  width: 40rpx;  position: relative;  top:8rpx;  margin-right: 30rpx;}.base-info image.pull-right{  margin-right: 0rpx;}.base-info{  padding-top: 0rpx;  padding-bottom: 0rpx;}.base-info .col-12{  border-bottom: 1px solid #f6f6f6;  padding-bottom: 30rpx;  padding-top: 30rpx;  color: #666;}.base-info .col-12:last-of-type{  border-bottom: 0rpx;  margin-bottom: 0rpx;}

转载地址：http://shzrf.baihongyu.com/