圣杯布局:
布局要求:
上右下左
padding:0 220px 0 200px;
相对定位:
position:relative;/*相对定位*/
模块上移策略:
margin-left:-100%;/*浮动属性下,负边界值会导致模块上移*/ left:-200px;/*模块向左移200px*/
上移方法二:
margin-left:-220px;/*上移,不能完整填充页面*/ right:-220px;/*模块右移*/
圣杯布局整体代码;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圣杯布局</title> <style type="text/css"> *{ margin:0; padding:0; } body{ min-width: 700px; } .header, .footer{ float:left; width:100%; background:#ddd; 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;/*模块向左移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>right1</h4> <p>这是页面的右侧内容</p> </div> </div> <div class="footer"> <h4>footer</h4> </div> </body> </html>
双飞翼布局:
-经淘宝UED的工程设计师对圣杯布局改良后得出的双飞翼布局;
-去掉相对布局,只需要浮动和副边距。
大概就是:
第一步:中间部分整体左侧浮动;
第二步:在大肚子部分,左右设置副边距;(双飞翼布局在此步,需要写:position:relative;相对布局的意思。)
第三步:左右侧上移;
【左侧上移:margin-left:-100%; 右侧上移:margin-left:*px 】
右侧上移像素为大肚子部分设置的右副边距!
双飞翼布局,中间内容部分变高高:
.main-inner{ margin-left:200px; margin-right:220px; background:#30a457; min-height:300px;/*页面的中间内容,会变高,写在其他地方没有用哦!*/ }
双飞翼布局 全部代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圣杯布局</title> <style type="text/css"> *{ margin:0; padding:0; } body{ min-width:700px; } .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>
双飞翼布局里面:
为什么footer的脚丫子没了,
要用
.footer{ width:100%; float:left;这个来补上脚丫子?????????
课程总结:
双飞翼布局和圣杯布局区别: