列表

每一组列表顶部和底部都可以添加一些说明文字，样式类分别是 weui-cells__title 和 weui-cells__tips。

每一组列表的样式类为 weui-cells；列表的每一条目样式类为 weui-cell；每一组列表内可包含多个条目。下面的示例代码中仅有一个条目，顶部和底部的说明文字在 weui-cells 外。

  1. <!-- 列表组顶部说明文字 -->
  2. <div class="weui-cells__title">下面是个列表</div>
  3. <!-- 带说明的列表 -->
  4. <div class="weui-cells">
  5.     <div class="weui-cell">
  6.         <div class="weui-cell__bd">
  7.             <p>标题文字</p>
  8.         </div>
  9.         <div class="weui-cell__ft">说明文字</div>
  10.     </div>
  11. </div>
  12. <!-- 带图标和说明的列表项 -->
  13. <div class="weui-cells">
  14.     <div class="weui-cell">
  15.         <div class="weui-cell__hd"><img src="" alt="" style="width:20px;margin-right:5px;display:block"></div>
  16.         <div class="weui-cell__bd">
  17.             <p>标题文字</p>
  18.         </div>
  19.         <div class="weui-cell__ft">说明文字</div>
  20.     </div>
  21. </div>
  22. <!-- 带跳转的列表 -->
  23. <div class="weui-cells">
  24.     <a href="#" class="weui-cell weui-cell_access">
  25.         <div class="weui-cell__bd">
  26.             <p>标题文字</p>
  27.         </div>
  28.         <div class="weui-cell__ft"></div>
  29.     </a>
  30. </div>
  31. <!-- 带说明、跳转的列表项 -->
  32. <div class="weui-cells">
  33.     <a href="#" class="weui-cell weui-cell_access">
  34.         <div class="weui-cell__bd">
  35.             <p>标题文字</p>
  36.         </div>
  37.         <div class="weui-cell__ft">说明文字</div>
  38.     </a>
  39. </div>
  40. <!-- 带图标、说明、跳转的列表项 -->
  41. <div class="weui-cells">
  42.     <a href="#" class="weui-cell weui-cell_access">
  43.         <div class="weui-cell__hd"><img src="" alt="" style="width:20px;margin-right:5px;display:block"></div>
  44.         <div class="weui-cell__bd">
  45.             <p>标题文字</p>
  46.         </div>
  47.         <div class="weui-cell__ft">说明文字</div>
  48.     </a>
  49. </div>
  50. <!-- 列表组底部说明文字 -->
  51. <div class="weui-cells__tips">底部说明文字</div>

列表 - 图1