一、认识布局
二、主要内容
- 行布局
- 多列布局
- 圣杯布局
- 双飞翼布局
三、经典的行布局
1.经典的行布局
- 基础的行布局
- 行布局自适应
- 行布局自适应限制最大宽
- 行布局垂直水平居中
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <Meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body{ 8 margin:0;padding: 0;color: #fff;text-align: center; 9 } 10 .container{width:800px; height: 200px;background: #4c77f2; 11 position: absolute;top: 50%;left: 50%;margin-top: -100px;margin-left: -400px;} 12 </style> 13 </head> 14 <body> 15 <div class="container">这是页面内容</div> 16 </body> 17 </html>经典的行布局-1
2.经典的行布局
- 行布局固定宽
- 行布局某部位自适应
- 行布局导航随屏幕滚动
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <Meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body{margin: 0;padding: 0;color: #fff;text-align: center;font-size: 16px;} 8 .header{width: 100%; height: 50px;background: #333;margin: 0 auto;line-height: 50px;position: fixed;} 9 .banner{width: 800px;height: 300px;background: #30a457;margin:0 auto;line-height: 300px;} 10 .container{width: 800px;height: 1000px;background: #4c77f2;margin: 0 auto;} 11 .footer{width: 800px;height:100px;background: #333;margin: 0 auto;line-height: 100px;} 12 </style> 13 </head> 14 <body> 15 <div class="header">这是页面的头部</div> 16 <div class="banner">这是页面的banner图</div> 17 <div class="container">这是页面的内容</div> 18 <div class="footer">这是页面的底部</div> 19 </body> 20 </html>经典的行布局-2
3.经典的列布局
- 两列布局固定
- 两列布局自适应
- 三列布局固定
- 三列布局自适应
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <Meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body{margin:0;padding: 0;color: #fff;} 8 .container{width: 90%;height: 1000px;margin:0 auto;} 9 .left{width: 60%;height: 1000px;background: #1a5acd;float: left;} 10 .right{width:40%;height: 1000px;background: #95BAFD;float:right;} 11 </style> 12 </head> 13 <body> 14 <div class="container"> 15 <div class="left">这是页面的左侧</div> 16 <div class="right">这是页面的右侧</div> 17 </div> 18 </body> 19 </html>两列布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <Meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body{margin:0;padding: 0;color: #fff;} 8 .container{width: 90%;height: 1000px;margin:0 auto;} 9 .left{width: 30%;height: 1000px;background: #15E469;float: left;} 10 .right{width:20%;height: 1000px;background:#15E469;float:right;} 11 .middle{width:50% ;height: 1000px;background:#4C98FF;float: left;} 12 </style> 13 </head> 14 <body> 15 <div class="container"> 16 <div class="left">这是页面的左侧</div> 17 <div class="middle">这是页面的中间</div> 18 <div class="right">这是页面的右侧</div> 19 </div> 20 </body> 21 </html>三列布局
四、混合布局
- 混合布局固定
- 混合布局自适应
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <Meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body{margin:0;padding: 0;color: #fff;font-size: 16px; text-align: center;} 8 .header{width: 100%;height: 50px;background:#5880f9;margin:0 auto;line-height: 50px;} 9 .banner{width: 100%;height: 200px; background:#8b8d91;margin: 0 auto;line-height: 100px;} 10 .container{width: 100%;height: 1000px;margin:0 auto;} 11 .left{width: 60%;height: 1000px;background:#95BAFD;float: left;} 12 .right{width:40%;height: 1000px;background: #1a5acd;float:right;} 13 .footer{width: 100%;height: 100px; background:#ed817e;margin: 0 auto;line-height: 100px;} 14 </style> 15 </head> 16 <body> 17 <div class="header">这是页面的头部</div> 18 <div class="banner">这是页面的banner图</div> 19 <div class="container"> 20 <div class="left">这是页面的左侧</div> 21 <div class="right">这是页面的右侧</div> 22 </div> 23 <div class="footer">这是页面的底部</div> 24 </body> 25 </html>混合布局
五、圣杯布局
1.产生
圣杯布局是由国外的Kevin Cornell提出的一个布局模型概念
在国内由淘宝UED的工程师传播开来
2.布局要求
- 三列布局，中间宽度自适应,两边定宽
- 中间栏要在浏览器中优先展示渲染
- 允许任意列的高度最高
- 用最简单的CSS、最少的HACK语句
3.流程方式
- Middle部分首先要放在container的最前部分
- 然后是Left,right
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <Meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{margin: 0;padding: 0;} 8 body{min-width: 700px;} 9 .header,.footer{float: left;width: 100%;background:#ddd;height: 40%;line-height: 40px;text-align: center;} 10 .container{padding: 0 220px 0 200px;} 11 .left,.middle,.right{position: relative;float: left;min-height: 300px;} 12 .middle{width: 100%;background:#1a5acd;} 13 .left{width: 200px;background: #f00;margin-left: -100%;left: -200px;} 14 .right{width: 220px;background: #30a457;margin-left: -220px;right: -220px;} 15 </style> 16 </head> 17 <body> 18 <div class="header"> 19 <h4>header</h4> 20 </div> 21 <div class="container"> 22 <div class="middle"> 23 <h4>middle</h4> 24 <p>这是页面的中间这是页面的中间这是页面的中间这是页面的中间这是页面的中间这是页面的中间这是页面的中间这是页面的中间这是页面的中间这是页面的中间这是页面的中间这是页面的中间这是页面的中间这是页面的中间</p> 25 </div> 26 <div class="left"> 27 <h4>left</h4> 28 <p>这是页面的左侧</p> 29 </div> 30 <div class="right"> 31 <h4>right</h4> 32 <p>这是页面的右侧</p> 33 </div> 34 </div> 35 <div class="footer"> 36 <h4>footer</h4> 37 </div> 38 </body> 39 </html>圣杯布局
六、双飞翼布局
1.产生
经淘宝UED的工程师针对圣杯布局改良后得出双飞翼布局
去掉相对布局,只需要浮动和负边距
2.流程方式
main要放最前边，其次是sub extra
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <Meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{margin: 0;padding: 0;} 8 body{min-width: 700px;} 9 .header,.footer{float: left;width: 100%;height:40px;background:#ddd;line-height: 40px;text-align: center;} 10 .sub,.main,.extra{float: left;min-height: 300px;} 11 .main{width: 100%;min-height: 300px;} 12 .main-inner{margin-left:200px;margin-right: 220px;background: #30a457;min-height: 300px; } 13 .sub{width: 220px;background: #f00;margin-left: -100%;} 14 .extra{width: 220px;background: #1a5acd;margin-left: -220px;} 15 </style> 16 </head> 17 <body> 18 <div class="header"> 19 <h4>header</h4> 20 </div> 21 <div class="main"> 22 <div class="main-inner"> 23 <h4>main</h4> 24 <p>这是页面的中间这是页面的中间这是页面的中间这是页面的中间这是页面的中间这是页面的中间这是页面的中间 25 这是页面的中间这是页面的中间这是页面的中间这是页面的中间这是页面的中间这是页面的中间这是页面的中间</p> 26 </div> 27 </div> 28 <div class="sub"> 29 <h4>sub</h4> 30 <p>这是页面的左侧</p> 31 </div> 32 <div class="extra"> 33 <h4>extra</h4> 34 <p>这是页面的右侧</p> 35 </div> 36 <div class="footer"> 37 <h4>footer</h4> 38 </div> 39 </body> 40 </html>双飞翼布局
