学习手机页面制作5

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

使用padding-bottom 实现高度自适应

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>height auto</title>
 6     <!-- 加入meta viewport -->
 7     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 8     <style>
 9     *{
10         padding:0;
11         margin:0;
12     }
13     #box{
14         height:45px;
15         width:100%;
16         background: #f30;
17         display:-webkit-box;
18         position:relative;
19     }
20     #logo{
21         width:100px;
22         background: #f00;
23         height:45px;
24         display:block;
25 
26 
27 
28     }
29     #nav{
30         -webkit-box-flex: 1;
31         -moz-box-flex: 1;
32         -ms-box-flex: 1;
33         box-flex: 1;
34     }
35     #btn{
36         width:50px;
37         background: blue;
38     }
39     .list{
40         width:100%;
41         
42     }
43     .list ul{
44         display:-webkit-box;
45         list-style-type: none;
46     }
47     .list li{
48         -webkit-box-flex: 1;
49         -moz-box-flex: 1;
50         -ms-box-flex: 1;
51         box-flex: 1;
52         background: #eee;
53         width:30%;
54         margin-right:3%;
55         /*设置高度为0 padding-bottom:30% 参考的也是父亲的高度*/
56         height:0;
57         /*width/height*区域的图片高度*/
58         padding-top:30%;
59     }
60     </style>
61 </head>
62 <body>
63 <!-- h1里面写文字 用text-indent 利用seo -->
64     <div id="box">
65         <dix id="logo">logo</dix>
66         <div id="nav"></div>
67         <div id="btn"></div>
68     </div>
69     <div class="list">
70         <ul>
71             <li><img src="" alt=""></li>
72             <li></li>
73             <li></li>
74         </ul>
75     </div>
76 </body>
77 </html>