1. 程式人生 > >DIV+CSS佈局第一部分,一列布局,兩列布局,三列布局以及組合佈局舉例說明

DIV+CSS佈局第一部分,一列布局,兩列布局,三列布局以及組合佈局舉例說明

DIV+CSS佈局一


一列布局:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>佈局</title>
		<style type="text/css">
			body,h1{margin: 0;padding: 0;}
			.header{background-color: #000;
			color: #FFF;
			text-align: center;}
			.main{
				background-color: #666;
				color: #fff;
				margin: 0 auto;
				width:80%;
				height: 700px;
				text-align: center;
				
			}
			.foot{
				background-color: #000;
				color: #fff;
				margin: 0 auto;
				width:80%;
				height: 150px;
				text-align: center;
				
			}
		</style>
	</head>
	<body>
		<div class="header"><h1>頁面頭部資訊</h1></div>
		<div class="main"><h1>頁面主要內容</h1></div>
		<div class="foot"><h1>版權資訊</h1></div>
	</body>
</html>

執行結果如下:


兩列布局

程式碼如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>兩列布局</title>
		<style type="text/css">
			body,h1{margin: 0;padding: 0;}
			.left{
				float: left;
				width: 30%;
				background-color: black;
				color: green;
				height: 300px;
			}
			.right{
				float: right;
				width: 70%;
				background-color: white;
				height: 300px;
				color: red;
			}
			.main{width: 90%;
			margin: 0 auto;
			text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="main">
		<div class="left">LOGO</div>
		<div class="right">使用者資訊</div>
		</div>
	</body>
</html>

執行效果:


三列布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>三列布局</title>
		<style type="text/css">
			body,h1{margin: 0;padding: 0;}
			.left{
				float: left;
				width: 20%;
				background-color: black;
				color: green;
				height: 300px;
			}
			.right{
				float: right;
				width: 30%;
				background-color: green;
				height: 300px;
				color: red;
			}
			.middle{
				float: left;
				width: 50%;
				background-color: yellow;
				height: 300px;
				color: gray;
			}
			.main{width: 90%;
			margin: 0 auto;
			text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="main">
		<div class="left">左邊</div>
		<div class="middle">中間資訊</div>
		<div class="right">右邊</div>
		</div>
	</body>
</html>

執行結果如下:


綜合佈局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body,h1{margin: 0; padding: 0;color: gray;text-align: center;}
			.top{
				background: yellowgreen;
				width: 100%;
				height: 100px;
			}
			.top_main{
				margin: 0 auto;
				background: #000;
				width: 900px;
				height: 100px;
			}
				.top_left{
				float: left;
				background:gold;
				width: 200px;
				height: 100px;
			}
			.top_right{
				float: right;
				background: #00C;
				width: 700px;
				height: 100px;
			}
			.nav{
				margin: 0 auto;
				background: #999;
				width: 900px;
				height: 50px;
			}
						.left{
				float: left;
				width: 300PX;
				background-color: black;
				color: green;
				height: 300px;
			}
			.right{
				float: right;
				width: 300PX;
				background-color: green;
				height: 300px;
				color: red;
			}
			.middle{
				float: left;
				width: 300PX;
				background-color: yellow;
				height: 300px;
				color: gray;
			}
			.main{width: 900PX;
			margin: 0 auto;
			height: 500px;
			background-color: peachpuff;
			}
			.footer{
				margin: 0 auto;
				background-color: #000;
				width: 900px;
				height: 200px;
				color: #FFF;
			}
		</style>
	</head>
	<body>
		<div class="top">
			<div class=top-main>
				<div class="top_left"><h1>logo</h1></div>
				<div class="top_right"><h1>頭部資訊</h1></div>
			</div>
		</div>
		<div class="nav"><h1>頁面導航</h1></div>
		<!--主要內容-->
		<div class="main">
		<div class="left">左邊</div>
		<div class="middle">中間資訊</div>
		<div class="right">右邊</div>
		</div>
		<!--版權資訊-->
		<div class="footer"><h1>版權資訊</h1></div>
	</body>
</html>
執行結果如下: