範列一：


html

<div id="wrap">
  <header>這裡放logo、選單</header>
  <main>這裡放內容</main>
  <footer>這裡放版權</footer>
</div>

css

#wrap {
	background-color: #8E8E8E;
	width: 990px;
	margin: 0 auto;/*區塊置中*/
}
header {
	background-color: #8DA1D8;
	 height: 200px;
	margin-bottom: 10px;
}
main {
	background-color: #FFF242;
	height: 1000px;
	margin-bottom: 10px;
}
footer {
	background-color: #178C2F;
	height: 100px;
}

原檔下載

 
範例二：

html

<div id="wrap">
  <header>檔頭</header>
  <aside>側欄</aside>
  <main>內容</main>
  <footer>頁尾</footer>
</div>

css

#wrap {
	width: 990px;
	background-color: #686868;
}
header {
	background-color: #E37C7E;
	/*height:200px;*/
	margin-bottom:10px;
}
aside {
	background-color: #87B3D7;
	height:100px;
	width:190px;
	margin-bottom:10px;
	margin-right:10px;
	float:left;
}
main {
	background-color: #4D95BD;
	height:100px;
	width:790px;
	margin-bottom:10px;
	float:left;
}
footer {
	background-color: #561718;
	/*height:100px;*/
	clear:both;
}

原檔下載