双飞翼布局和圣杯布局实现的效果一样,都是实现3栏布局,中间盒子自适应,左右盒子固定的布局。
双飞翼布局
1 是先建一个dom树结构,得到外层为container的大的的div块包裹,内层得到三列,分别为main,left,right.
需要注意dom结构中,main的主列在最前面。
2 让3列浮动起来,浮动后因为main外包的wrap壳是100%
3 左列需要设置负的margin值-100%,右列需要设置margin-left:-200px(移动一个绝对值,能够把自己移上去到最后就可以。)
4: main内容区主列需要添加左右的外边距,将内容区挤出
圣杯布局
dom树和双飞翼布局一样,3列浮动也是一样的,但是main主体没有外包的.wrap的div由于浮动后左右两侧的浮动快被挤到下面
所以将浮动后的left和right上移到main区块的指定位置,最后通过相对定位(relative)left:-200,right:-200把他们占
据的main空间腾出来。
区别:圣杯布局用到相对定位,双飞翼不需要;双飞翼多了一个包裹中间区域的div,圣杯布局则不用。
双飞翼代码如下:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双飞翼布局</title> <style type="text/css"> .header,.footer { width:100%; height:60px; background-color:lightgray; } .content { width:1000px; height:100%; background-color: gray; margin:auto; text-align:center;/*内联文本居中*/ line-height:60px; } .container { width:1000px; margin:auto; overflow:hidden;/*当前区块能够包住内部的浮动区块*/ background-color:yellow; } .wrap { width:100%; background-color: cyan; float:left;/*左浮动*/ } .main { min-height:600px; background-color:wheat; margin:0 200px; } .left { min-height:600px; width:200px; float:left; background-color: blue; margin-left:-100%;/*将左侧区块拉回主区块的中间位置*/ } .right { min-height:600px; width:200px; float:left; background-color: green; margin-left:-200px;/*将区块拉回主区块的右侧*/ } </style> </head> <body> <div class="header"> <div class="content">头部内容</div> </div> <div class="container"> <div class="wrap"> <div class="main">主体内容</div> </div> <div class="left">左侧内容</div> <div class="right">右侧内容</div> </div> <div class="footer"> <div class="content">尾部内容</div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
圣杯布局如下:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圣杯布局</title> <style type="text/css"> .header, .footer { width:100%; height:60px; background-color:lightgray; } .footer { clear:both;/*清除底部左右两边的浮动元素*/ } .content { width:1000px; height:100%; background-color:gray; margin:auto; text-align:center; line-height:60px; } .container { width:600px; background-color:yellow; margin:auto; overflow:hidden;/*使它能包住浮动区块*/ /*因为左右区块现在覆盖在main之上,挡住了main的内容,现在添加padding来实现自身内容显示*/ padding:0 200px; } .main { height:650px; width:100%; float:left; background:wheat; } .left { width:200px; min-height:650px; float:left; background-color:green; margin-left:-100%; position: relative;/*相对定位*/ left:-200px; } .right { width:200px; min-height:650px; float:left; margin-left:-200px; background-color:lightgreen; position:relative; right:-200px; } </style> </head> <body> <div class="header"> <div class="content">网站头部内容</div> </div> <div class="container"> <div class="main">主 体</div> <div class="left">左侧</div> <div class="right">右侧</div> </div> <div class="footer"> <div class="content">网站尾部内容</div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄作业: