您的位置：首页 > 其它

第六周双飞翼布局和圣杯布局学习

2017-04-26 10:03 253 查看

一、双飞翼布局的优点

1、中间栏要在浏览器中优先展示渲染。

2、三列布局，中间宽度自适应，两边定宽。

3、兼容性好，兼容所有主流浏览器，包括被人诟病的ie6

二、方法

圣杯布局和双飞翼布局解决问题思路基本相同，不同点在于处理中间部分被遮挡的问题上。个人认为双飞翼布局更加简便。

1.首先是三列布局的实现

设置center、left、right三个div放在父div——box中

三个子div都设置为浮动，center宽度width设为100%，left设置width设置成150px。right为190px。

这时center在上，left和right在下。而设置负值的margin会让left和right上移，形成简单的三列布局，

但是有个问题，center的内容会被left和right遮挡住

在解决这个问题上形成了圣杯布局和双飞翼布局

1.圣杯布局

给box添加内边距padding，但是left和right都移动了，

于是采用相对定位的方法把自己移出center，解决问题

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
*{
padding:0;
margin:0;
}
.header,.footer{
width:100%;
background: darkcyan;
height:60px;
clear:both;
}
.box{
padding-left:150px;
padding-right:190px;
}
.left{
background: greenyellow;
width:150px;
float:left;
margin-left:-100%;
position: relative;
left:-150px;
}
.center{
background: yellow;
width:100%;
float:left;

}
.right{
height:100%;
background: red;
width:190px;
float:left;
margin-left:-190px;
position:relative;
right:-190px;
}
</style>
<title> 圣杯布局</title>
</head>
<!--保证主布局优先加载-->
<body>
<div class="header">Header</div>
<div class="box">
<div class="center">center</div>
<div class="left">Left</div>
<div class="right">Right
</div>
</div>
<div class="footer">Footer</div>
</body>
</html>

2.双飞翼布局

在center中设置子div——mian

再给mian设置合适的margi值

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
* {
padding: 0;
margin: 0;
}

.header, .footer {
width: 100%;
background: darkcyan;
height: 60px;
clear: both;
}

.box {
width: 100%;
height: auto;
}

.left
bb24
{
height: auto;
background: greenyellow;
width: 150px;
float: left;
margin-left: -100%;
}

.center {
background: yellow;
width: 100%;
height: auto;
float: left;
/*padding-left: 150px;*/
/*padding-right: 190px;*/
}

.main {
height: auto;
width: 100%;
margin-left: 150px;
margin-right: 190px;
}

.right {
height: auto;
background: red;
width: 190px;
float: left;
margin-left: -190px;

}
</style>
<title> 双飞翼布局</title>
</head>
<!--保证主布局优先加载-->
<body>
<div class="header">Header</div>
<div class="box">
<div class="center">
<div class="main">mian</div>
</div>
<div class="left">Left</div>
<div class="right">Right
</div>
</div>
<div class="footer">Footer</div>
</body>
</html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>

</body>
</html>

然后这两位大神写的比较详细可以去看看

圣杯布局http://blog.csdn.net/u014346301/article/details/53385170?locationNum=8&fps=1

双飞翼布局http://blog.csdn.net/fivemeat/article/details/48709767?locationNum=3&fps=1

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

第六周 双飞翼布局和圣杯布局学习

第六周双飞翼布局和圣杯布局学习