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

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

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



資料來源:http://blog.ja-anything.com/2016/12/14/rwd%E7%B6%B2%E9%A0%81%E5%88%87%E7%89%88%E7%B7%B4%E7%BF%92%E4%B8%80%E5%9F%BA%E6%9C%AC%E7%B6%B2%E9%A0%81%E6%A1%86%E6%9E%B6/


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;
}
footer {
	background-color: #561718;
	height:100px;
	clear:both;
}

HTML

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		
		<link rel="stylesheet" href="style/base.css"/>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript">
		</script>
	</head>
	<body>
		<div id="wrap">
		  <header>檔頭</header>
		  <aside>側欄</aside>
		  <main>內容</main>
		  <footer>頁尾</footer>
		</div>
	</body>
</html>

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *