![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：写的没毛病啊 这么快布局都会了啊 非常不错 课后要多练习
Collection
Collection
通过学习双飞翼布局完成其步骤原理制作分享：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style1.css">
<title>双飞翼布局</title>
<style type="text/css">
*{margin:0px;padding:0px;}
/*头部header*/
.header{
height: 50px;
width: 100%;
background:pink;
}
.header .nav{
height: 50px;
width: 1000px;
margin: 0px auto;
background:pink;
}
.nav a{
text-decoration: none;
color: #fff;
margin-right:15px;
padding: 15px;
font-size: 16px;
}
.nav a:hover{
background-color:#ccc;
color: #000; }
ul li{
height: 50px;
list-style: none;
float: left;
line-height: 50px;
}
/*主体部分main*/
.container{
width: 1000px;
height: 600px;
margin:5px auto;
background-color: #ccc;
}
.wrap{
width: inherit;
min-height: 600px;
background-color: blue;
float: left;
}
.main{
padding-left: 200px;
padding-right: 200px;
}
.left{
width: 200px;
min-height: 600px;
background-color: yellow;
float: left;
margin-left: -100%;
}
.right{
width: 200px;
min-height: 600px;
background-color: pink;
float: left;
margin-left:-200px;
}
/*底部footer*/
.footer{height: 200px;
width: 100%;
background-color: #000;}
.footer_content{
width: 1000px;
height: 200px;
margin:0px auto;
background-color: #000;
}
.footer_left{
width: 600px;
height: 200px;
}
.footer_left a{
text-decoration: none;
color: #ccc;
font-size: 13px;
margin-right: 5px;
float: left;
}
.footer_left a:hover{
color: #fff;
}
.footer_left p{color: #ccc; font-size: 13px;float: left;}
</style>
</head>
<body>
<div class="header">
<div class="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">视频教程</a></li>
<li><a href="">社区问答</a></li>
<li><a href="">编程词典</a></li>
<li><a href="">手册下载</a></li>
<li><a href="">工具下载</a></li>
<li><a href="">特色课程</a></li>
<li><a href="">菜鸟课堂</a></li>
</ul>
</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="footer_content">
<div class="footer_left">
<ul>
<li><a href="">首页</a></li>
<li><a href="">视频教程</a></li>
<li><a href="">社区问答</a></li>
<li><a href="">编程词典</a></li>
<li><a href="">手册下载</a></li>
<li><a href="">工具下载</a></li>
<li><a href="">特色课程</a></li>
<li><a href="">菜鸟课堂</a></li>
</ul>
<p>PHP中文网：独家原创，永久免费的在线php视频教程，php技术学习阵地！</p>
<p>Copyright 2014-2018 http://www.php.cn/ All Rights Reserved | 皖B2-20150071-9</p>
</div>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：
我在写双飞翼布局时，头部是没有用到浮动这种会出现问题吗。因为不是特别懂所以带着疑问.
主体部分主要用的是浮动来制作，前面我用了相对和绝对定位来做也是可以实现，老师说是大材小用，对这个也不是很清楚哈。
总体来说大致是可以把效果做出来，老师帮我点评下，谢谢！