学习手机页面制作-制作固定-流式-固定的布局
制作左右固定宽度中间自适应的页面布局
具体的页面效果可以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>
时间： 2024-10-10 15:09:55