1. 程式人生 > >DIV+CSS常見佈局操作

DIV+CSS常見佈局操作

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常見佈局操作</title>
	<style>
		.topheight{ clear: both; display: block; margin-top:350px;}
		h1{text-align: center;}
		.container1{max-width: 960px; margin: 0 auto;}
		.header1{height:20px;background: red;}
		.main1{height:50px;background: green;}
		.footer1{height:20px;background: blue;}
		/*3*/
		.left3{width:200px; height: 300px;float: left; background: skyblue;}
		.main3{height: 300px; margin-left: 200px; background: blue;}
		/*4	*/
		.right4{width:200px; height: 300px;float: right; background: skyblue;}
		.main4{height: 300px; margin-right: 200px; background: blue;}
		/*5*/
		.container5{width: 960px;margin: 0 auto;background: blue;}
		.clear5{-ms-zoom:1;}
		.clear5:after{content: '';clear: both; display: block;}
		.left5{width:200px; height: 300px; float: left;background: red;}
		.right5{width:750px; height: 300px; float: right; background: green;}
		/*6*/
		.container6{position:absolute;max-width: 960px;margin:auto; left:0; right:0;background: blue;}
		.left6{position:absolute;top:0;left:0;width:200px; height: 300px; background: red;}
		.right6{position:absolute;top:0;right:0;width:750px; height: 300px; background: green;}
		/*7*/
		.container7{max-width: 960px; margin: 0 auto; position: relative;z-index: 999;}
		.left7{float: left; width: 200px; height: 300px; background: red}
		.right7{float: right; width: 200px; height: 300px; background: blue}
		.main7{margin-left:200px; margin-right:200px; height: 300px; background: green;}
		/*8*/
		.container8{max-width: 960px; position: absolute;left: 0;right:0; margin: 0 auto;}
		.left8{position: absolute;top:0;left:0;width: 200px; background: pink; height: 300px;}
		.right8{position: absolute;top:0;right:0;width: 200px; background: yellow; height: 300px;}
		.main8{margin-left: 200px;margin-right: 200px; background:blue; height: 300px;}


	</style>
</head>
<body>
	<h1>1、單列:上中下等寬</h1>
	<div class="container1">
		<div class="header1">頭部</div>
		<div class="main1">主體</div>
		<div class="footer1">底部</div>
	</div>	

	<h1>2、單列自適應佈局:只需改變案例1中的佈局即可不用改css</h1>
	<div class="header1"><div class="container1">頭部</div></div>
	<div class="main1"><div class="container1">主體</div></div>
	<div class="footer1"><div class="container1">底部</div></div>
	
	<h1>3、二列布局:左側固定,右側自適應</h1>
	<div class="left3">左側</div>
	<div class="main3">主體</div>

	<h1>4、二列布局:右側固定,左側自適應</h1>
	<div class="right4">右側</div>
	<div class="main4">主體</div>

	<h1>5、二列左右固定、自動撐開父類(偽類方式)</h1>
	<div class="container5 clear5">
			<div class="left5"></div>
			<div class="right5"></div>
	</div>
	<h1>6、二列左右固定(絕對定位方式)</h1>
	<div class="container6">
			<div class="left6">左</div>
			<div class="right6">右</div>
	</div>
	<h1 class="topheight">7、三列布局:float+margin</h1>
	<div class="container7">
		<div class="left7"></div>
		<div class="right7"></div>
		<div class="main7"></div>
	</div>
	<h1>8、三列布局:絕對定位+margin</h1>
	<div class="container8">
		<div class="left8"></div>
		<div class="right8"></div>
		<div class="main8"></div>
	</div>



</body>
</html>