css4.html 4.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  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="../style/weui.css"/>
  8. <link rel="stylesheet" href="../style/weui2.css"/>
  9. <link rel="stylesheet" href="../style/weui3.css"/>
  10. <script src="../zepto.min.js"></script>
  11. <script>
  12. $(function(){
  13. });
  14. </script>
  15. </head>
  16. <body ontouchstart class="page-bg">
  17. <div class="page-hd">
  18. <h1 class="page-hd-title">
  19. css类
  20. </h1>
  21. <p class="page-hd-desc">简单的类,可以直接加在到class</p>
  22. </div>
  23. <table class="weui-table weui-border-tb">
  24. <thead>
  25. <tr><th>zepto</th><th>说明</th></tr>
  26. </thead>
  27. <tbody>
  28. <tr><td>page-bg</td><td>灰色页面背景</td></tr>
  29. <tr><td>page-hd</td><td>四边内边距20px</td></tr>
  30. <tr><td>page-hd-title</td><td>20号字体,下边距15px,大标题</td></tr>
  31. <tr><td>page-hd-desc</td><td>14号居上5px,灰色字体,小标题</td></tr>
  32. <tr><td>page-bd</td><td>4个内边距0,用于容器</td></tr>
  33. <tr><td>page-bd-15</td><td>0 15px内边距,主体内容</td></tr>
  34. <tr><td>weui-footer</td><td>版权</td></tr>
  35. <tr><td>placeholder</td><td>提示文本</td></tr>
  36. <tr><td>weui-avatar</td><td>一般头像</td></tr>
  37. <tr><td>baseline middle top</td><td>对齐方式 </tr>
  38. <tr><td> .block .show .hide .inline .block .dtable .cell</td><td>显示方向</td></tr>
  39. <tr><td>tleft .tcenter .tright</td><td>文字方向</td></tr>
  40. <tr><td>center</td><td>居中</td></tr>
  41. <tr><td>border</td><td>边框 .</td></tr>
  42. <tr><td>dotted </td><td>虚线 .</td></tr>
  43. <tr><td>下划线.u 删除线.del 无下划线.non</td><td>手图标.hand 移动图标.move</td></tr>
  44. <tr><td>斜体.i 非斜体.-i</td><td> 粗体bold 正体.-bold</td></tr>
  45. <tr><td>不换行 .-wrap 换行.wrap</td><td>浮动.left .right .clear</td></tr>
  46. <tr><td>清除父浮动 .clearfix</td><td>大写.upper 小写.lower 首字大写.cap</td></tr>
  47. <tr><td>隐藏.hidden显示.visible</td><td>底层 .zindex</td></tr>
  48. <tr><td>层显示方式 .rel 漂浮.abs .fixed</td><td></td></tr>
  49. <tr><td>居左20px .indent</td><td>行高20px .lheight</td></tr>
  50. <tr><td>点击虚线 .outline</td><td>超过显示... .ell</td></tr>
  51. <tr><td>雅黑字体 .yahei</td><td>字体大小 .f11-.f35 .f40 .f45 .f50</td></tr>
  52. <tr><td>字体颜色 .f-red .f-green .f-blue .f-black .f-white .f-gray .f-orange
  53. 对应.bg-red</td><td></td></tr>
  54. <tr><td>15px圆角.radius-lg 8px -md 2px -sm 5px .radius</td><td></td></tr>
  55. <tr><td>模糊 .blur</td><td>边框阴影 .bs</td></tr>
  56. <tr><td>圆 .circle 反向reverse</td><td>旋转360 .xz360 循环的 xz180不循环</td></tr>
  57. <tr><td>透明50 .opacity</td><td> 不透明 .opacity-0</td></tr>
  58. <tr><td>全透明 .opacity-1</td><td></td></tr>
  59. <tr><td>文字阴影 .ts</td><td>渐变.jb</td></tr>
  60. <tr><td>边框样式weui-border-</td><td>t b tb l r 默认不带</td></tr>
  61. <tr><td>.weui-border-radius 4像素</td><td></td></tr>
  62. <tr><td>weui-table weui-boder</td><td>表格</td></tr>
  63. <tr><td>动画animated 循环.checked</td><td></td></tr>
  64. <tr><td>fadeIn fadeOut</td><td>pulse</td></tr>
  65. <tr><td>rotateIn</td><td>shake swing以上动画配合animated用</td></tr>
  66. <tr><td>slideIn slideOut weui-loading可单独用</td><td></td></tr>
  67. <tr><td></td><td></td></tr>
  68. <tr><td></td><td></td></tr>
  69. <tr><td></td><td></td></tr>
  70. <tr><td></td><td></td></tr>
  71. <tr><td></td><td></td></tr>
  72. </tbody>
  73. </table>
  74. </body>
  75. </html>