base0.html 3.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  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/php.js"></script>
  10. <script src="../js/zepto.min.js"></script>
  11. <script>
  12. $(function(){
  13. });
  14. </script>
  15. </head>
  16. <body ontouchstart>
  17. <div class="page-hd">
  18. <h1 class="page-hd-title">
  19. 基础css类
  20. </h1>
  21. <p class="page-hd-desc">全局使用的css类</p>
  22. </div>
  23. <div class="page-bd-15">
  24. <table class="weui-table weui-table-2n">
  25. <thead>
  26. <tr><th>类名</th><th>功能</th></tr>
  27. </thead>
  28. <tbody id="rank-list">
  29. <script id="tpl" type="text/html">
  30. <% for(var i in list) { %>
  31. <tr><td title="类名"><%=list[i].a%></td><td title="功能"><%=list[i].b%></td></tr>
  32. <% } %>
  33. </script>
  34. </tbody>
  35. </table>
  36. </div>
  37. <script>
  38. $(function(){
  39. var rs = {"list":[
  40. {"a":"container ","b":"页面开始类"},
  41. {"a":"page-bg","b":"灰色页面背景"},
  42. {"a":"page-hd","b":"四边20px"},
  43. {"a":"page-bd","b":"四边为0"},
  44. {"a":"page-bd-15","b":"上下为0左右15px"},
  45. {"a":"page-hd-title,page-hd-desc","b":"用于页面标题和描述"},
  46. {"a":"baseline/middle/top","b":"垂直对齐方式"},
  47. {"a":"show/hide","b":"显示隐藏"},
  48. {"a":"block/inline/iblock","b":"display属性"},
  49. {"a":"tleft/tcentet/tright","b":"文本对齐方式"},
  50. {"a":"center","b":"div居中"},
  51. {"a":"border/dotted","b":"1px 边框实线与虚线"},
  52. {"a":"hand/move","b":"手样式和移动样式"},
  53. {"a":"u/del/-u","b":"下划线中划线无划线"},
  54. {"a":"i/-i","b":"斜体与正常"},
  55. {"a":"bold/-bold","b":"粗体,正常"},
  56. {"a":"wrap/-wrap","b":"换行与不换行"},
  57. {"a":"left/right/clear","b":"左右浮动,清除两边浮动"},
  58. {"a":"clearfix","b":"清除浮动"},
  59. {"a":"upper/lower/cap","b":"大写/小写/首字母大写"},
  60. {"a":"hidden/visible","b":"hidden/visible"},
  61. {"a":"rel/abs/fixed","b":"层定位"},
  62. {"a":"indent","b":"缩进20px"},
  63. {"a":"lheight","b":"行高22px"},
  64. {"a":"outline","b":"链接虚线"},
  65. {"a":"ell","b":"隐藏超过的文字"},
  66. {"a":"yahei","b":"雅黑字体"},
  67. {"a":"hr1","b":"1px水平线"},
  68. {"a":"req","b":"必填项"},
  69. {"a":"v-center","b":"强制垂直居中"},
  70. {"a":"weui-loading","b":"loading动画i元素上"},
  71. {"a":"loading","b":"loading小图标"} ,
  72. {"a":"loading2","b":"loading遮罩动画"}
  73. ]};
  74. $("#rank-list").append(tpl(document.getElementById('tpl').innerHTML,rs));
  75. })
  76. </script>
  77. <br>
  78. <br>
  79. <div class="weui-footer weui-footer_fixed-bottom">
  80. <p class="weui-footer__links">
  81. <a href="../index.html" class="weui-footer__link">WeUI首页</a>
  82. </p>
  83. <p class="weui-footer__text">Copyright &copy; Yoby</p>
  84. </div>
  85. </body>
  86. </html>