RWD網頁切版 – 基本網頁框架練習(一)

範列一:
20161217-02-01

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;
}

原檔下載
cloud-computing
 
範例二:
20161217-02-02
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;
}

原檔下載
cloud-computing

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *