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