網頁開發(HTML+CSS) 基本框架~RWD切版(HTML RWD DIV Layout) [三欄切版] – jashliao部落格

網頁開發(HTML+CSS) 基本框架~RWD切版(HTML RWD DIV Layout) [三欄切版]

資料來源:http://blog.ja-anything.com/2016/12/14/rwd網頁切版練習一基本網頁框架/

GITHUB: https://github.com/jash-git/HTML-RWD-DIV-Layout

CSS

/* CSS Document */
@charset "utf-8";
/* CSS Document */
*{
	/*
	所有元素的基本CSS初始化
		padding 內距屬性 - padding:上 右 下 左;　padding:上下 左右;　padding:上 左右 下;　padding:四個邊同樣値;
		margin 屬性用來定義一個區域（例如 DIV 或 span）的外邊界距離 - margin:上 右 下 左;　margin:上下 左右;　margin:上 左右 下;　margin:四個邊同樣値;
		list-style 項目符號及編號
		border 邊框
	*/
	padding:0px;
	margin:0 auto;/*所有元建置中顯示*/
	list-style:none;
	border:0;	
}

#wrap {
	width: 990px;
	background-color: #686868;
}
header {
	background-color: #E37C7E;
	height:200px;
}
aside {
	background-color: #87B3D7;
	height:900px;
	width:190px;
	float:left;
}
main {
	background-color: #4D95BD;
	height:900px;
	width:800px;
	float:left;
}
#main01
{
	background-color: #FF0000;
	float:left;
	height:800px;
	width:650px;
}

#main02
{
	background-color: #00FF00;
	float:left;
	height:800px;
	width:150px;
}

footer {
	background-color: #561718;
	height:100px;
	clear:both;
}

HTML

	
		
		
		
		
		
		
	
	
		

		  
檔頭
		  
		  

			

			主內
			
			

			右側