html双飞翼布局-三栏布局 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双飞翼布局</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.clearfix::after{
				content: "";
				display: block;
				clear: both;
			}
			.clearfix{
				*zoom: 1;
			}
			.container{
				border: 1px solid #0000FF;
				
			}
			.left{
				float: left;
				width: 200px;
				height: 400px;
				background-color: red;
				
				margin-left: -100%;
				
			}
			
			.right{
				float: left;
				width: 300px;
				height: 400px;
				background-color: blue;
				
				margin-left: -300px;
			}
			.main{
				float: left;
				width: 100%;
				height: 400px;
			}
			.main-inner{
				margin-left: 200px;
				margin-right: 300px;
				background-color: #00BCC2;
			}
		</style>
	</head>
	<!-- 
		双飞翼布局，始于淘宝UED。如果把三栏布局比作一只鸟，
		可以把main看成是鸟的身体，left和right则是鸟的
		翅膀。这个布局的思想是，先把最重要的身体部分放好,
		然后再将翅膀移动到适当的地方。
		
		实现思路:
		1 ) html代码中，main要放最前边，然后是left right
		2 )将main left right 都float:left
		3 )将main占满width:100%
		4 )此时main占满了，所以要把left拉到最左边，使用
		margin-left: 100% 同理right使用margin-left: -自
		身宽度
		5) main内容被覆盖了吧，除了使用外围的padding,
		还可以考虑使用margin。
		给main增加一个内层div-- main-inner,然后设置左
		右margin


	 -->
	<body>
		<div class="container clearfix">
			<!-- main 是主要内容，想让他先加载，放到前面 -->
			<div class="main">
				<div class="main-inner">
					给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div给main增加一个内层div
				</div>
			</div>
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</body>
</html>

 

posted @ 2020-02-09 16:58  JackieDYH  阅读(5)  评论(0)  编辑  收藏  举报  来源