经典网页布局详解-优快云博客

一些布局：

- 行布局

- 多列布局

- 圣杯布局

- 双飞翼布局

会使用到：HTML和CSS基础；会使用DIV + CSS进行排版；熟悉 Float属性、Position属性。

（1）经典的行布局

+ 基础的行布局

+ 行布局自适应

+ 行布局自适应限制最大宽

+ 行布局垂直水平居中

		.container{
			width: 100%;
			max-width:1000px;
			height: 1000px;
			background-color: #ececec;
			margin:0 auto;/*水平居中*/
		}

水平与垂直居中：

		.container2{
			width: 800px;
			height: 300px;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto auto;
			background: orange;
		}
		.container2{
			width: 800px;
			height: 300px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -400px;
			margin-top: -150px;
			background: orange;
		}

一个平常的行布局：

<!DOCTYPE html>
<html>
<head>
	<title>行布局2</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			color: #fff;
			text-align: center;
			font-size: 16px;
		}
		.header{
			width: 100%;
			height: 50px;
			background-color: #000;
			margin: 0 auto;
			line-height: 50px;
			position: fixed;

		}
		.banner{
			width: 800px;
			height: 300px;
			background-color: #30a457;
			margin: 0 auto;
			line-height: 300px;
			padding-top: 50px;
		}
		.container{
			width: 800px;
			height: 1000px;
			background-color: #4c77fc;
			margin: 0 auto;
		}
		.footer{
			width: 800px;
			height: 100px;
			background-color: #333;
			margin: 0 auto;
			line-height: 100px;
		}
	</style>
</head>
<body>
	<div class="header">这是页面的头部</div>
	<div class="banner">这是页面的banner图</div>
	<div class="container">这是页面的内容</div>
	<div class="footer">这是页面的底部</div>
</body>
</html>

（2）经典的列布局

+ 两列布局固定

+ 两列布局自适应

+ 三列布局固定

+ 三列布局自适应

两列布局（三列的话，也是用float属性，调整一下width就可以）：

<!DOCTYPE html>
<html>
<head>
	<title>两列布局</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			margin:0;
			padding: 0;
		}
		.container{
			width: 90%;
			height: 1000px;
			margin:0 auto;
		}
		.left{
			width: 60%;
			height: 1000px;
			background: #1a5acd;
			float:left;
		}
		.right{
			width: 40%;
			height: 1000px;
			background-color: #5880f9;
			float: right;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="left">这是页面左侧</div>
		<div class="right">这是页面右侧</div>
	</div>
	</div>

</body>
</html>

（3）混合布局

混合布局固定

混合布局自适应

<!DOCTYPE html>
<html>
<head>
	<title>混合布局</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			padding: 0;
			margin:0;
			font-size: 16px;
			color: #fff;
			text-align: center;
		}
		.header{
			width: 800px;
			height: 50px;
			background: #5880f9;
			margin:0 auto;
			line-height: 50px;
		}
		.container{
			width: 800px;
			height:1000px;
			margin:0 auto;
		}
		.container .left{
			width: 200px;
			height: 1000px;
			background-color: #67b581;
			float: left;
		}
		.container .right{
			width: 600px;
			height: 1000px;
			background-color: #d0d0d0;
			float: right;
		}
		.footer{
			width: 800px;
			height: 100px;
			background: #ed817e;
			margin:0 auto;
			line-height: 100px;
		}
	</style>
</head>
<body>

	<div class="header">这是头部</div>
	<div class="container">
		<div class="left">左边</div>
		<div class="right">右边</div>
	</div>
	<div class="footer">这是页面的底部</div>
</body>
</html>

（3）圣杯布局
是一种三列布局，是由国外的Kevin Cornell提出的一个布局模型概念，在国内由淘宝UED的工程师传播开来。

布局要求

- 三列布局，中间宽度自适应，两边定宽

- 中间栏在浏览器中优先展示渲染（需要在写div框架的时候先写中间栏）

- 允许任意列的高度最高

- 用最简单的CSS、最少的HACK语句

<!DOCTYPE html>
<html>
<head>
	<title>圣杯布局</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			padding: 0;
			margin:0;
			font-size: 16px;
			color: #fff;
			text-align: center;
		}
		body{
			min-width: 700px;
		}
		.header{
			width: 100%;
			height: 50px;
			background: #5880f9;
			margin:0 auto;
			line-height: 50px;
		}
		.footer{
			width: 100%;
			height: 50px;
			background: #ed817e;
			margin:0 auto;
			line-height: 50px;
			clear: left;
		}
		.container{
			/*height: 500px;*/
			padding: 0 220px 0 200px ;
		}
		.middle,.left,.right{
			position: relative;
			float: left;
			min-height: 300px;
		}
		.middle{
			width: 100%;
			background: #1a5acd;
		}
		.left{
			width: 200px;
			background: #f00;
			margin-left: -100%;
			left: -200px;
		}
		.right{
			width: 220px;
			background: #30a;
			margin-right: -100%;
		}

	</style>
</head>
<body>

	<div class="header">这是头部</div>
	<div class="container">
		<div class="middle">
			<h6>middle</h6>
			中间
		</div>
		<div class="left">
			<h6>left</h6>
			左边
		</div>
		<div class="right">
			<h6>right</h6>
			右边
		</div>
	</div>
	<div class="footer">这是页面的底部</div>

</body>
</html>

（4）双飞翼布局

对圣杯布局改良后得到的布局，其去掉了相对布局（relative）,只需要浮动和负边距。

<!DOCTYPE html>
<html>
<head>
	<title>双飞翼布局</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			margin:0;
			padding: 0;
		}
		.header,.footer{
			width: 100%;
			height: 50px;
			background: #5880f9;
			line-height: 50px;
			text-align: center;
			color:#fff;
		}
		.sub,.main,.extra{
			float: left;
			min-height: 300px;
		}
		.main{
			width: 100%;
		}
		.main-inner{
			margin-left: 200px;
			margin-right: 220px;
			background: #30a347;
			min-height: 300px;
		}
		.sub{
			width: 200px;background: #f00;
			margin-left: -100%;
		}
		.extra{
			width: 220px;background: #1a5acd;
			margin-left: -220px;
		}
		.footer{
			clear: both;
		}
	</style>
</head>
<body>

	<div class="header">
		<h4>header</h4>
	</div>
	<div class="main">
		<div class="main-inner">
			<h4>main</h4>
			<p>中间部分</p>
		</div>
	</div>
	<div class="sub">
		<h4>sub</h4>
		<p>左边</p>
	</div>
	<div class="extra">
		<h4>extra</h4>
		<p>右边</p>
	</div>
	<div class="footer">这是页面的底部</div>
</body>
</html>