Cell

Cell，列表视图，用于将信息以列表的结构显示在页面上，是wap上最常用的内容结构。Cell由多个section组成，每个section包括section headerweui-cells__title以及cellsweui-cells。

cell由thumbnailweui-cellhd、bodyweui-cellbd、accessoryweui-cellft三部分组成，其中weui-cellbd采用自适应布局.

  1. <div class="weui-cells__title">带说明的列表项</div>
  2. <div class="weui-cells">
  3.     <div class="weui-cell">
  4.         <div class="weui-cell__bd">
  5.             <p>标题文字</p>
  6.         </div>
  7.         <div class="weui-cell__ft">说明文字</div>
  8.     </div>
  9. </div>
  10. <div class="weui-cells__title">带图标、说明的列表项</div>
  11. <div class="weui-cells">
  12.     <div class="weui-cell">
  13.         <div class="weui-cell__hd"><img src="..." alt="" style="width:20px;margin-right:5px;display:block"></div>
  14.         <div class="weui-cell__bd">
  15.             <p>标题文字</p>
  16.         </div>
  17.         <div class="weui-cell__ft">说明文字</div>
  18.     </div>
  19.     <div class="weui-cell">
  20.         <div class="weui-cell__hd"><img src="..." alt="" style="width:20px;margin-right:5px;display:block"></div>
  21.         <div class="weui-cell__bd">
  22.             <p>标题文字</p>
  23.         </div>
  24.         <div class="weui-cell__ft">说明文字</div>
  25.     </div>
  26. </div>
  27.  
  28. <div class="weui-cells__title">带跳转的列表项</div>
  29. <div class="weui-cells">
  30.     <a class="weui-cell weui-cell_access" href="javascript:;">
  31.         <div class="weui-cell__bd">
  32.             <p>cell standard</p>
  33.         </div>
  34.         <div class="weui-cell__ft">
  35.         </div>
  36.     </a>
  37.     <a class="weui-cell weui-cell_access" href="javascript:;">
  38.         <div class="weui-cell__bd">
  39.             <p>cell standard</p>
  40.         </div>
  41.         <div class="weui-cell__ft">
  42.         </div>
  43.     </a>
  44. </div>
  45.  
  46. <div class="weui-cells__title">带说明、跳转的列表项</div>
  47. <div class="weui-cells">
  48.     <a class="weui-cell weui-cell_access" href="javascript:;">
  49.         <div class="weui-cell__bd">
  50.             <p>cell standard</p>
  51.         </div>
  52.         <div class="weui-cell__ft">说明文字</div>
  53.     </a>
  54.     <a class="weui-cell weui-cell_access" href="javascript:;">
  55.         <div class="weui-cell__bd">
  56.             <p>cell standard</p>
  57.         </div>
  58.         <div class="weui-cell__ft">说明文字</div>
  59.     </a>
  60.  
  61. </div>
  62.  
  63. <div class="weui-cells__title">带图标、说明、跳转的列表项</div>
  64. <div class="weui-cells">
  65.  
  66.     <a class="weui-cell weui-cell_access" href="javascript:;">
  67.         <div class="weui-cell__hd"><img src="..." alt="" style="width:20px;margin-right:5px;display:block"></div>
  68.         <div class="weui-cell__bd">
  69.             <p>cell standard</p>
  70.         </div>
  71.         <div class="weui-cell__ft">说明文字</div>
  72.     </a>
  73.     <a class="weui-cell weui-cell_access" href="javascript:;">
  74.         <div class="weui-cell__hd"><img src="..." alt="" style="width:20px;margin-right:5px;display:block"></div>
  75.         <div class="weui-cell__bd">
  76.             <p>cell standard</p>
  77.         </div>
  78.         <div class="weui-cell__ft">说明文字</div>
  79.     </a>
  80. </div>

原文: https://github.com/Tencent/weui/wiki/Cell