经典的行布局
1.基础的行布局
2.行布局自适应
3.行布局自适应限制最大宽
4.行布局垂直水平居中
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> body{margin:0;padding: 0;color:#fff; text-align: center;font-size: 16px} .header{width: 100%;height: 50px;background: #333;margin: 0 auto; line-height: 50px; position: fixed;} .banner{width: 800px;height: 300px;background: #30a457;margin: 0 auto;padding-top: 50px;} .container{width: 800px;height: 1000px;background: #4c77f2;margin: 0 auto;} .footer{width: 800px;height: 100px;background: #333;margin :0 auto;line-height: 100px;} </style> </head> <body> <div class="header">这是页面的头部</div> <div class="banner">这是页面的banner图</div> <div class="container">这是页面的内容</div> <div class="footer">这是页面的底部</div> </body> </html>
经典的列布局
1.两列布局固定 width为px
2.两列布局自适应 width为%
3.三列布局固定
4.三列布局自适应
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> body{margin: 0;padding: 0;color: #fff;} .container{width: 90%;height: 1000px;margin: 0 auto;} .left{width: 60%;height: 1000px;background: #1a5acd;float: left;} .right{width: 40%;height: 1000px;background: #5880f9;float: right;} </style> </head> <body> <div class="container"> <div class="left">这是页面的左侧</div> <div class="right">这是页面的右侧</div> </div> </body> </html>
混合布局
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> body{margin: 0;padding: 0;font-size: 16px;color: #fff;text-align: center;} .header{width: 100%;height: 50px;background: #5880f9;margin: 0 auto;line-height: 50px;} .container{width: 100%;margin: 0 auto;height: 1000px} .container .left{width: 40%;height: 1000px;background: #67b581;float: left;} .container .right{width: 60%;height: 1000px;background: #123456;float: right;} .footer{width: 100%;height: 100px;background: #ed817e;margin: 0 auto;line-height:100px; } </style> </head> <body> <div class="header">这是页面的头部</div> <div class="container"> <div class="left">这是页面的左侧</div> <div class="right">这是页面的右侧</div> </div> <div class="footer">这是页面的底部</div> </body> </html>
圣杯布局
圣杯布局是由国外的Kevin Cornell提出的一个布局模型概念
在国内由淘宝UED的工程师传播开来
布局要求
1.三列布局，中间宽度自适应，两边定宽
2.中间栏要在浏览器中优先展示渲染
3.允许任意列的高度最高
4.用最简单的CSS、最少的HACk语句
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> *{margin: 0;padding: 0;} body{min-width: 700px;} .header, .footer{float: left;width: 100%;background: #ddd;height: 40px;line-height: 40px;text-align: center;} .container{padding: 0 220px 0 200px;} .left, .middle, .right{position: relative;float: left;min-height: 300px;} .middle{width: 100%;background: #1a5acd;} .left{width: 200px;background:#f00; margin-left: -100%;left: -200px;} .right{width: 220px;background:#30a457;margin-left: -220px;right: -220px; } </style> </head> <body> <div class="header"> <h4>header</h4> </div> <div class="container"> <div class="middle"> <h4>middle</h4> <p>这是页面中间的内容这是页面中间的内容这是页面中间的内容</p> </div> <div class="left"> <h4>left</h4> <p>这是页面左侧的内容</p> </div> <div class="right"> <h4>right</h4> <p>这是页面右侧的内容</p> </div> </div> <div class="footer"> <h4>footer</h4> </div> </body> </html>
圣杯布局的流程方式：
1.Middle部分首先要放在container的最前部分
2.然后是left right
双飞翼布局
经淘宝UED的工程师针对圣杯布局改良后得出双飞翼布局
去掉相对布局，只需要浮动和负边距
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> *{margin:0;padding: 0;} .header, .footer{width:100%;float:left; height: 40px;background: #ddd;text-align: center;line-height: 40px;} .sub, .main, .extra{float: left;min-height: 300px;} .main{width: 100%;min-height: 300px;} .main-inner{margin-left: 200px;margin-right: 220px;background: #30a457;min-height: 300px;} .sub{width: 200px;background: #f00;margin-left: -100%} .extra{width: 220px;background: #1a5acd;margin-left: -220px;} </style> </head> <body> <div class="header"> <h4>header</h4> </div> <div class="main"> <div class="main-inner"> <h4>main</h4> <p>这是页面中间的内容这是页面中间的内容这是页面中间的内容</p> </div> </div> <div class="sub"> <h4>sub 替补</h4> <p>这是页面左侧的内容</p> </div> <div class="extra"> <h4>extra 多余</h4> <p>这是页面右侧的内容</p> </div> <div class="footer"> <h4>footer</h4> </div> </body> </html>
双飞翼布局的流程方式：
main要放在最前边，其次是sub extra
圣杯布局 <div class="container"> <div>中间</div> <div>左侧</div> <div>右侧</div> </div> 双飞翼布局 <div class="main"> <div>中间</div> </div> <div>左侧</div> <div>右侧</div>