base13.html 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  7. <link rel="stylesheet" href="../css/weui.css"/>
  8. <link rel="stylesheet" href="../css/weuix.css"/>
  9. <script src="../js/zepto.min.js"></script>
  10. <script>
  11. $(function(){
  12. });
  13. </script>
  14. </head>
  15. <body ontouchstart>
  16. <div class="page-hd">
  17. <h1 class="page-hd-title">
  18. 列表
  19. </h1>
  20. <p class="page-hd-desc"></p>
  21. </div>
  22. <div class="page-bd">
  23. <div class="weui-cells__title">带说明的列表项</div>
  24. <div class="weui-cells">
  25. <div class="weui-cell">
  26. <div class="weui-cell__bd">
  27. <p>天字第一号</p>
  28. </div>
  29. <div class="weui-cell__ft">说明文字</div>
  30. </div>
  31. <div class="weui-cell">
  32. <div class="weui-cell__bd">
  33. <p>玄字第一号</p>
  34. </div>
  35. <div class="weui-cell__ft">说明文字</div>
  36. </div>
  37. </div>
  38. <div class="weui-cells__title">带图标、说明的列表项</div>
  39. <div class="weui-cells">
  40. <div class="weui-cell">
  41. <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
  42. <div class="weui-cell__bd">
  43. <p>标题文字</p>
  44. </div>
  45. <div class="weui-cell__ft">说明文字</div>
  46. </div>
  47. <div class="weui-cell">
  48. <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
  49. <div class="weui-cell__bd">
  50. <p>标题文字</p>
  51. </div>
  52. <div class="weui-cell__ft">说明文字</div>
  53. </div>
  54. </div>
  55. <div class="weui-cells__title">带跳转的列表项</div>
  56. <div class="weui-cells">
  57. <a class="weui-cell weui-cell_access" href="javascript:;">
  58. <div class="weui-cell__bd">
  59. <p>京东</p>
  60. </div>
  61. <div class="weui-cell__ft">
  62. </div>
  63. </a>
  64. <a class="weui-cell weui-cell_access" href="javascript:;">
  65. <div class="weui-cell__bd">
  66. <p>淘宝</p>
  67. </div>
  68. <div class="weui-cell__ft">
  69. </div>
  70. </a>
  71. </div>
  72. <div class="weui-cells__title">带说明、跳转的列表项</div>
  73. <div class="weui-cells">
  74. <a class="weui-cell weui-cell_access" href="javascript:;">
  75. <div class="weui-cell__bd">
  76. <p>百度</p>
  77. </div>
  78. <div class="weui-cell__ft">说明文字</div>
  79. </a>
  80. <a class="weui-cell weui-cell_access" href="javascript:;">
  81. <div class="weui-cell__bd">
  82. <p>谷歌</p>
  83. </div>
  84. <div class="weui-cell__ft">说明文字</div>
  85. </a>
  86. </div>
  87. <div class="weui-cells__title">带图标、说明、跳转的列表项</div>
  88. <div class="weui-cells">
  89. <a class="weui-cell weui-cell_access" href="javascript:;">
  90. <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
  91. <div class="weui-cell__bd">
  92. <p>爱情</p>
  93. </div>
  94. <div class="weui-cell__ft">说明文字</div>
  95. </a>
  96. <a class="weui-cell weui-cell_access" href="javascript:;">
  97. <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
  98. <div class="weui-cell__bd">
  99. <p>亲情</p>
  100. </div>
  101. <div class="weui-cell__ft">说明文字</div>
  102. </a>
  103. </div>
  104. </div>
  105. <br>
  106. <br>
  107. <div class="weui-footer weui-footer_fixed-bottom">
  108. <p class="weui-footer__links">
  109. <a href="../index.html" class="weui-footer__link">WeUI首页</a>
  110. </p>
  111. <p class="weui-footer__text">Copyright &copy; Yoby</p>
  112. </div>
  113. </body>
  114. </html>