您的位置：首页 > 其它

双飞翼布局

2020-02-03 04:50 393 查看

上一次我们已经说完了圣杯布局，这次来说说双飞翼布局吧。

首先，先给上全部代码

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>双飞翼布局</title>
<style>
* {
padding: 0;
margin: 0;
}

header,
footer {
text-align: center;
width: 100%;
background-color: #bbbbbb;
}

.text {
text-align: center;
line-height: 200px;
font-size: 40px;
color: #fff;
}

.bd {
overflow: hidden;
}

.main {
float: left;
width: 100%;
height: 200px;
background-color: #ddd;

}

.main-content {
margin: 0 200px;
}

.left {
float: left;
width: 200px;
height: 200px;
background-color: #da4242;
/* 产生布局效果的属性 */
margin-left: -100%;
}

.right {
float: left;
width: 200px;
height: 200px;
background-color: #4ddef1;
/* 产生布局效果的属性 */
margin-left: -200px;
}
</style>
</head>

<body>
<header>双飞翼布局</header>
<div class="bd">
<div class="main text">
<div class="main-content">main</div>
</div>
<div class="left text">
left
</div>
<div class="right text">
right
</div>
</div>
<footer style:"clear：both">footer</footer>
</body>

</html>

上述代码与圣杯布局相比HTML的结构不一样，在中间栏多了一个内容栏，根据盒子模型，我们就不能在main栏设置margin，因为之前设置了width：100%，若再设置margin会

超过所设宽度，我们用内容栏存放内容，并设置margin。

逐步解析

双飞翼布局与圣杯布局前几步是一样的,

1.给中间栏main设置width：100%，让它始终占满窗口，这样才有自适应的效果。设置背景颜色

2.给左右两个栏固定width和height。设置背景颜色

效果如下：