html之div切块式布局

<!DOCTYPE HTML>
<html>
<head>

	<style type="text/css">
		body{
			margin: auto;
			width: 600px;
			#max-width: 100%;
		}
		.header{
			width: 100%;
			height:30px;
			background-color: blue;
		}
		.content{
			width:100%;
			height: 100px;
			background-color: #f8f8f8;
		}
		.content-left{
			float:left;
			height:100%;
			width:100px;
			background-color: yellow;
		}
		.content-mid{
			height:100%;
			float:left;
			width:200px;
			background-color: green;
		}
		.content-right{
			height:100%;
			float:right;
			width:300px;
			background-color: #167676;
		}
		.footer{
			width: 100%;
			height: 50px;
			background-color: gray;
		}
	</style>
</head>

<body>
	<div class="header">
		I am Header
	</div>


	<div class="content">
		<div class="content-left">
			I am content left
		</div>
		<div class="content-mid">
			I am content mid
		</div>
		<div class="content-right">
			I am content right
		</div>
	</div>

	<div class="footer">
		I am footer
	</div>
</body>

</html>

你可能感兴趣的:(html之div切块式布局)