base4.html 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  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. <style>
  11. .w{height:50px;width:100px;margin:5px 15px;}
  12. </style>
  13. <script>
  14. $(function(){
  15. });
  16. </script>
  17. </head>
  18. <body ontouchstart>
  19. <div class="page-hd">
  20. <h1 class="page-hd-title">
  21. 边框,圆角,内外补白 ,菜单竖线,1px水平线
  22. </h1>
  23. <p class="page-hd-desc"></p>
  24. </div>
  25. <div class="border-t w" >上边框</div>
  26. <div class="border-b w" >下边框</div>
  27. <div class="border-tb w" >上下边框</div>
  28. <div class="border-l w" >左边框</div>
  29. <div class="border-r w" >右边框</div>
  30. <div class="border w" >全边框</div>
  31. <div class="dotted w">虚线</div>
  32. <div class="dotted-b w">下虚线</div>
  33. <div class="border-radius w" >圆角边框 4px</div>
  34. <br>
  35. <div class="hr1"></div>
  36. <br>
  37. <ul class="weui-nav">
  38. <li><a href="javascript:;">首页</a></li>
  39. <li><a href="javascript:;">首页</a></li>
  40. <li><a href="javascript:;">首页</a></li>
  41. <li><a href="javascript:;">首页</a></li>
  42. <li><a href="javascript:;">首页</a></li>
  43. </ul>
  44. <div>
  45. 内补白 padding 0 page-bd/padding0 20px page-hd/padding20 5px padding5 10px padding10 15px padding15
  46. </div>
  47. <div>
  48. 外补白 margin5 margin10 margin15 margin20 分别为5px 10px 15px 20px
  49. </div>
  50. <br>
  51. <br>
  52. <div class="weui-footer weui-footer_fixed-bottom">
  53. <p class="weui-footer__links">
  54. <a href="../index.html" class="weui-footer__link">WeUI首页</a>
  55. </p>
  56. <p class="weui-footer__text">Copyright &copy; Yoby</p>
  57. </div>
  58. </body>
  59. </html>