form3.html 3.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  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 style="background-color: #f8f8f8;">
  17. <div class="page-hd">
  18. <h1 class="page-hd-title">
  19. 按钮
  20. </h1>
  21. <p class="page-hd-desc">注意行内样式的按钮,微信官方并没有此类例子,但是官方css中有相关类</p>
  22. </div>
  23. <div class="page-bd-15">
  24. <a href="javascript:;" class="weui_btn weui_btn_primary">按钮</a>
  25. <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_primary">按钮</a>
  26. <a href="javascript:;" class="weui_btn weui_btn_warn">确认</a>
  27. <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_warn">确认</a>
  28. <a href="javascript:;" class="weui_btn weui_btn_default">按钮</a>
  29. <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_default">按钮</a>
  30. <a href="javascript:;" class="weui_btn bg-blue">蓝色bg-blue</a>
  31. <a href="javascript:;" class="weui_btn weui_btn_disabled bg-blue">蓝色</a>
  32. <a href="javascript:;" class="weui_btn bg-orange weui_btn_inline">橙色bg-oange</a>
  33. <a href="javascript:;" class="weui_btn weui_btn_disabled bg-orange weui_btn_inline">橙色</a>
  34. </div>
  35. <div class="weui_btn_area weui_btn_area_inline">
  36. <a href="javascript:;" class="weui_btn weui_btn_primary">按钮</a><a href="javascript:;" class="weui_btn weui_btn_primary">按钮</a>
  37. </div>
  38. <div class="button_sp_area">
  39. <a href="javascript:;" class="weui_btn weui_btn_plain_default">按钮</a>
  40. <a href="javascript:;" class="weui_btn weui_btn_plain_primary">按钮</a>
  41. <a href="javascript:;" class="weui_btn bg-blue-b">蓝色bg-blue-b</a>
  42. <a href="javascript:;" class="weui_btn bg-orange-b">橙色bg-orange-b</a>
  43. <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_primary">按钮</a>
  44. <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default">按钮</a>
  45. <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_warn">按钮</a>
  46. </div>
  47. <div class="page-hd">
  48. <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_plain_primary f20"><i class="weui_icon_success f30"></i>成功</a>
  49. <a href="javascript:;" class="weui_btn weui_btn_mini bg-blue f20"><i class="icon icon-71 f20"></i>成功</a>
  50. </div>
  51. <div class="weui-flex weui-list-btm">
  52. <div class="weui-flex-item"><a href="javascript:;" class="weui_btn weui_btn_plain_primary">模块一</a></div>
  53. <div class="weui-flex-item"><a href="javascript:;" class="weui_btn weui_btn_plain_primary">模块二</a></div>
  54. </div>
  55. <div class="weui-flex weui-list-btm">
  56. <div class="weui-flex-item"><a href="javascript:;" class="weui_btn weui_btn_plain_primary">模块一</a></div>
  57. <div class="weui-flex-item"><a href="javascript:;" class="weui_btn weui_btn_plain_primary">模块二</a></div>
  58. <div class="weui-flex-item"><a href="javascript:;" class="weui_btn weui_btn_plain_primary">模块三</a></div>
  59. </div>
  60. </body>
  61. </html>