学习手机页面制作4

浏览数：19 / 时间：2015年06月11日

学习手机页面制作-制作固定-流式-固定的布局

制作左右固定宽度中间自适应的页面布局

具体的页面效果可以http://m.juhuasuan.com/m/index.htm 的头部导航

传统的布局方式使用定位的方式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>固定比例固定</title>
 6     <style>
 7     *{
 8         padding:0;
 9         margin:0;
10     }
11     div#box{
12         width:100%;
13         height:80px;
14         background: #fc0;
15         position: relative;
16     }
17     #box p{height:80px;}
18     #box p:nth-child(1){
19         width:120px;
20         /*绝对定位 脱离标准文档流*/
21         position: absolute;
22         top: 0;
23         left: 0;
24         background: #eee;
25 
26     }
27     #box p:nth-child(2){
28         width:100%;
29         height:80px;
30         background: #ccc;
31         padding-left: 120px;
32         /**/
33         -webkit-box-sizing: border-box;
34            -moz-box-sizing: border-box;
35                 box-sizing: border-box;
36         float:left;
37 
38     }
39     #box p:nth-child(3){
40         width:120px;
41         height:80px;
42         background: #ddd;
43         position: absolute;
44         right: 0;
45         top: 0;
46     }
47     </style>
48 </head>
49 <body>
50     <div id="box">
51         <p>1</p>
52         <p>2</p>
53         <p>3</p>
54     </div>
55 </body>
56 </html>

介绍css3 的一个属性

display:-webkit-box

让子元素以流式布局的方式展示。只对子元素有效。

box-flex: N;

兄弟元素之间比例，仅作一个系数

使用css3实现的方式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7     *{
 8         padding:0;
 9         margin: 0;
10     }
11     #box{
12         width:100%
13         height:400px;
14         background: pink;
15         margin: 50px auto;
16         display:-webkit-box;
17 
18         /*父元素设置box 子元素就会 并排*/
19     }
20 /*所有的元素都不要写高度和宽度 也不能设置浮动*/
21     #red{
22         background-color: red;
23         width:120px;
24     }
25     #blue{
26         background-color: blue;
27     -webkit-box-flex: 1;
28     -moz-box-flex: 1;
29     -ms-box-flex: 1;
30     box-flex: 1;
31     
32 
33 }
34 #blue  ul {
35     display:-webkit-box;
36     /*只会子节点有效显示为弹性盒*/
37 }
38 #green{
39     background: green;
40     width:120px;
41     }
42 #blue  ul li{
43     -webkit-box-flex: 1;
44     -moz-box-flex: 1;
45     -ms-box-flex: 1;
46     box-flex: 1;
47     background: orange;
48 }
49     </style>
50 </head>
51 <body>
52     <div id="box">
53         <div id="red">1</div>
54         <div id="blue">
55             <ul>
56                 <li></li>
57                 <li></li>
58                 <li></li>
59             </ul>
60         </div>
61         <div id="green">3</div>
62     </div>
63 </body>
64 </html>