您的位置：首页 > 其它

自己对于圣杯布局和双飞翼布局的一些理解

2016-03-17 12:20 471 查看
首先圣杯布局和双飞翼布局的差异体现在 都是想给左右浮动空出位置。

那么就只有两条路可以走：
1:用padding的方法 padding:0 100px;

2.用margin的方法 margin:0 100px;

用第一种方法走到底就是 圣杯布局，用第二种方法走到底就是 双飞翼布局。，

第一种方法 代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
.header,.footer{
height:100px;
width:100%;
background:red;
clear:both;
}
.content{
padding:0 200px;
overflow: auto;
}
.main{
width:100%;
float:left;
height:100px;
background:yellow;

}
.left{
width:200px;
height:100px;
background:pink;
float:left;
margin-left:-100%;
position: relative;
left:-200px;

}
.right{
width:200px;
height:100px;
background:green;
float:left;
margin-left:-200px;
position: relative;
left:200px;
}
</style>
</head>
<body>
<div>
<div class="header">
头部
</div>
<div class="content">
<div class="main">中间部分。</div>
<div class="left">左侧边栏</div>
<div class="right">右侧边栏</div>
</div>
<div class="footer">
页脚
</div>
</div>
</body>
</html>


效果图：


圣杯布局要注意的是：main中间部分需要放在第一个加载。另外中间部分宽度为100%撑满正行，左右侧边栏利用负margin上来。最后用position：relative将左右两侧边栏移到两边。

双飞翼布局

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
.header,.footer{
height:100px;
width:100%;
background:red;
clear:both;
}
.main_link{
width:100%;
height:100px;
background:yellow;
float:left;
}
.main{
margin:0 200px;
}
.left{
width:200px;
height:100px;
background:pink;
float:left;
margin-left:-100%;

}
.right{
width:200px;
height:100px;
background:green;
float:left;
margin-left:-200px;

}
</style>
</head>
<body>
<div class="header">头部</div>
<div class="content">
<div class="main_link">
<div class="main">中间部分</div>
</div>
<div class="left">左侧边栏</div>
<div class="right">右侧边栏</div>
</div>
<div class="footer">页脚</div>
</body>
</html>


双飞翼的布局感觉思路就是。如果左右两侧边栏要和我main抢位置?那我为什么不直接空出来位置好了。不和你们抢了。
就给main加个div。让这个div宽度取100% 和left和right浮动起来，然后main取一个margin：0 200px;把左右侧边栏的的位置给空出来 不就行了么？

然后用负margin 让left和right移动上去。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航