您的位置：首页 > 其它

双飞翼布局和圣杯布局

2016-02-15 00:00 239 查看
摘要: 参考网站：1、http://my.oschina.net/jsan/blog/368543
2、http://www.cnblogs.com/langzs/archive/2013/01/27/taobaoshuangfeiyi.html
3、http://www.imooc.com/wenda/detail/254035

双飞翼布局：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Holy Grail of Layouts</title>
</head>
<style>
#page{
width:980px;
margin:0 auto;
}
#hd{
width: 980px;
background-color:#cccccc;
height:100px;
}
#bd{
zoom:1;
overflow:hidden;//消除bd的内部浮动，使footer不会和bd重合
}
.main-wrap{
margin:0 190px 0 190px;
background-color:blue;
min-height:180px;
}
.main {
float: left;
width: 100%;

}
.sub {
float: left;
width: 190px;
margin-left: -100%;
background-color:yellow;
min-height:30px;
/*position:relative;
left:-190px;*/
}
.extra {
float: left;
width: 190px;
margin-left: -190px;
background-color:green;
min-height:30px;
/* position:relative;
left:-380px;*/
}
#ft{
width: 980px;
background-color:#cccccc;
height:100px;
}
</style>
<body>
<div id="page">
<div id="hd"></div>
<div id="bd">
<div><div>asd fsdafasd fsdafasd fsdafasd fsdafasd </div> </div>
<div>.sub {
float: left;
width: 190px;
margin-left: -100%;
background-color:yellow;
} </div>
<div>.extra {
float: left;
width: 190px;
margin-left: -190px;
background-color:green;
}</div>
</div>
<div id="ft"></div>
</div>
</body>
</html>

圣杯布局：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Holy Grail of Layouts</title>
</head>
<style>
#page{
width:980px;
margin:0 auto;
}
#hd{
width: 980px;
background-color:#cccccc;
height:100px;
}
#bd{

zoom:1;
overflow:hidden;
padding:0 190px 0 190px;

}
.main {
float: left;
width: 100%;
background-color:blue;
min-height:180px;

}
.sub {
float: left;
width: 190px;
margin-left: -100%;
background-color:yellow;
min-height:30px;
position:relative;
left:-190px;
}
.extra {
float: left;
width: 190px;
margin-left: -190px;
background-color:green;
min-height:30px;
position:relative;
right:-190px;
}
#ft{
width: 980px;
background-color:#cccccc;
height:100px;
}
</style>
<body>
<div id="page">
<div id="hd"></div>
<div id="bd">
<div><div>asd fsdafasd fsdafasd fsdafasd fsdafasd </div> </div>
<div>.sub {
float: left;
width: 190px;
margin-left: -100%;
background-color:yellow;
} </div>
<div>.extra {
float: left;
width: 190px;
margin-left: -190px;
background-color:green;
}</div>
</div>
<div id="ft"></div>
</div>
</body>
</html>

效果图如下：



两个布局的思想都是希望中间的内容区域能都先加载，所以把main写在了bd的第一项已达到在浏览器中优先渲染的效果。但是main写在了第一项之后，就不会展示在浏览器的中间，这个时候使用浮动和负的外边距设置使左右两个放置在main两边。

到了这个位置，两边的侧边栏已经位于了main的两侧了，但是我发现main中的文字并没有显示，那是因为两侧的侧边栏遮住了内容。这个时候就分成了双飞翼布局和圣杯布局。

圣杯布局是原理是：调整bd的内边距，发现main缩小了，但是两个侧边栏也跟着移动了，这个时候使用position为ralative设置侧边栏的左右两边，就可以完成最终的效果了。

双飞翼布局的原理是：并不是调整bd的内边距，而是在main的内部再加入一个div，main-warp，调整main-wrap的外边距，就可以达到同样的效果了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航