You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

121 lines
2.8 KiB

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <link rel="shortcut icon" href="./static/image/favicon.ico">
  6. <meta name="viewport"
  7. content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  8. <title></title>
  9. <style type="text/css">
  10. .ub {
  11. display: -webkit-box;
  12. display: -moz-box;
  13. //display: box;
  14. position:relative;
  15. }
  16. /*以反方向显示 div 框的子元素*/
  17. .ub-rev {
  18. -webkit-box-direction:reverse;
  19. -moz-box-direction:reverse;
  20. box-direction:reverse;
  21. }
  22. .ub-fh {
  23. width: 100%;
  24. }
  25. .ub-fv {
  26. height: 100%;
  27. }
  28. .ub-con {
  29. position: absolute;
  30. width: 100%;
  31. height: 100%;
  32. }
  33. /*通过使用 box-align and box-pack 属性,居中 div 框的子元素*/
  34. .ub-ac
  35. {
  36. -webkit-box-align:center;
  37. -moz-box-align:center;
  38. box-align:center;
  39. }
  40. /*通过使用 box-align and box-pack :end属性,右下 div 框的子元素*/
  41. .ub-ae
  42. {
  43. -webkit-box-align:end;
  44. -moz-box-align:end;
  45. box-align:end;
  46. }
  47. .ub-pc
  48. {
  49. -webkit-box-pack:center;
  50. -moz-box-pack:center;
  51. box-pack:center;
  52. }
  53. .ub-pe
  54. {
  55. -webkit-box-pack:end;
  56. -moz-box-pack:end;
  57. box-pack:end;
  58. }
  59. /*两端对齐*/
  60. .ub-pj
  61. {
  62. -webkit-box-pack:justify;
  63. -moz-box-pack:justify;
  64. box-pack:justify;
  65. }
  66. /*从上向下垂直排列子元素。*/
  67. .ub-ver
  68. {
  69. -webkit-box-orient:vertical;
  70. -moz-box-orient:vertical;
  71. box-orient:vertical;
  72. }
  73. /*box-flex主要让子容器针对父容器的宽度按一定规则进行划分*/
  74. .ub-f1
  75. {
  76. position:relative;
  77. -webkit-box-flex: 1;
  78. -moz-box-flex: 1;
  79. box-flex: 1;
  80. }
  81. .ub-f2
  82. {
  83. position:relative;
  84. -webkit-box-flex: 2;
  85. -moz-box-flex: 2;
  86. box-flex: 2;
  87. }
  88. .ub-f3
  89. {
  90. position:relative;
  91. -webkit-box-flex: 3;
  92. -moz-box-flex: 3;
  93. box-flex: 3;
  94. }
  95. .ub-f4
  96. {
  97. position:relative;
  98. -webkit-box-flex: 4;
  99. -moz-box-flex: 4;
  100. box-flex: 4;
  101. }
  102. </style>
  103. </head>
  104. <body style="max-width:540px;margin:0 auto;">
  105. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  106. <div id="app"></div>
  107. <!-- built files will be auto injected -->
  108. </body>
  109. </html>