|
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <link rel="shortcut icon" href="./static/image/favicon.ico">
- <meta name="viewport"
- content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
- <title></title>
- <style type="text/css">
-
- .ub {
- display: -webkit-box;
- display: -moz-box;
- //display: box;
- position:relative;
- }
-
- /*以反方向显示 div 框的子元素*/
- .ub-rev {
- -webkit-box-direction:reverse;
- -moz-box-direction:reverse;
- box-direction:reverse;
- }
-
- .ub-fh {
- width: 100%;
- }
-
- .ub-fv {
- height: 100%;
- }
-
- .ub-con {
- position: absolute;
- width: 100%;
- height: 100%;
- }
-
- /*通过使用 box-align and box-pack 属性,居中 div 框的子元素*/
- .ub-ac
- {
- -webkit-box-align:center;
- -moz-box-align:center;
- box-align:center;
- }
- /*通过使用 box-align and box-pack :end属性,右下 div 框的子元素*/
- .ub-ae
- {
- -webkit-box-align:end;
- -moz-box-align:end;
- box-align:end;
- }
-
- .ub-pc
- {
- -webkit-box-pack:center;
- -moz-box-pack:center;
- box-pack:center;
- }
- .ub-pe
- {
- -webkit-box-pack:end;
- -moz-box-pack:end;
- box-pack:end;
- }
- /*两端对齐*/
- .ub-pj
- {
- -webkit-box-pack:justify;
- -moz-box-pack:justify;
- box-pack:justify;
- }
- /*从上向下垂直排列子元素。*/
- .ub-ver
- {
- -webkit-box-orient:vertical;
- -moz-box-orient:vertical;
- box-orient:vertical;
- }
- /*box-flex主要让子容器针对父容器的宽度按一定规则进行划分*/
- .ub-f1
- {
- position:relative;
- -webkit-box-flex: 1;
- -moz-box-flex: 1;
- box-flex: 1;
- }
-
- .ub-f2
- {
- position:relative;
- -webkit-box-flex: 2;
- -moz-box-flex: 2;
- box-flex: 2;
- }
-
- .ub-f3
- {
- position:relative;
- -webkit-box-flex: 3;
- -moz-box-flex: 3;
- box-flex: 3;
- }
-
- .ub-f4
- {
- position:relative;
- -webkit-box-flex: 4;
- -moz-box-flex: 4;
- box-flex: 4;
- }
-
- </style>
- </head>
- <body style="max-width:540px;margin:0 auto;">
- <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
- <div id="app"></div>
- <!-- built files will be auto injected -->
- </body>
- </html>
|