双飞翼布局制作-2019.1.15

通过学习双飞翼布局完成其步骤原理制作分享：

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结：

我在写双飞翼布局时，头部是没有用到浮动这种会出现问题吗。因为不是特别懂所以带着疑问.
主体部分主要用的是浮动来制作，前面我用了相对和绝对定位来做也是可以实现，老师说是大材小用，对这个也不是很清楚哈。
总体来说大致是可以把效果做出来，老师帮我点评下，谢谢！

实例

相关文章