10. Layout

網頁的布局(Layout)形式應該是各憑所好，不過有一些慣用的元件常被使用。例如通常頁面中會有 header, nav, content, sidebar, footer等部位。以下舉例說明，在body標籤內先加上以下code:

	<header id="header">
		<h1>Layout Exercise!</h1>
	</header>
	
	<div class="main">
		<nav id="nav">
			<div class="container">
				<a href="">Home</a>
				<a href="">Service</a>
				<a href="">Contact</a>
				<a href="">Help</a>
				<a href="">About</a>
			</div>
		</nav>
	
		<section id="sec">
			<div class="container">
				<p>Say something here......</p>
				<p>Say something here......</p>
				<p>Say something here......</p>
				<p>Say something here......</p>
				<p>Say something here......</p>
				<p>Say something here......</p>
				<p>Say something here......</p>
			</div>
			
			<div class="container">
				<p>Say something here 2......</p>
				<p>Say something here 2......</p>
				<p>Say something here 2......</p>
				<p>Say something here 2......</p>
				<p>Say something here 2......</p>
				<p>Say something here 2......</p>
				<p>Say something here 2......</p>
				<p>Say something here 2......</p>
			</div>
			
		</section>
		
		<aside id="sidebar">
			<div class="container">
				side bar 1
			</div>
			<div class="container">
				side bar 2
			</div>
			<div class="container">
				side bar 3
			</div>
			<div class="container">
				side bar 4
			</div>
			<div class="container">
				side bar 5
			</div>
		</aside>
		
		<footer id="footer">
			<div class="container">
				<p>© 2018</p>
			</div>
		</footer>
		
	</div>

若是想要讓header跟其他元件一樣寬，可以將其加入於main div內。然後加上css code:

	body{
		background: #f1f1f1;
		color: #999;
		margin:0;
	}

	#header{
		background-color: blue;
		color: #faf300;
		text-align:center;
	}

	#nav{
		border: 1px solid black;
		background: #0af02a;
		text-align:center;
		margin-bottom: 5px;
	}

	#footer{
		border: 1px solid red; 
		clear: both;
		background: #0af02a;
	}

	#sec{
		border: 2px solid blue;
		float: left;
		width:70%;
		padding: 10 30px;
		box-sizing: border-box;
	}

	#sec div{
		background: #8922a2;
		color: #91f8f2;
		padding-top:0px;
		padding-left:5px;
		margin: 0px 5px 5px 5px;
	}

	#sec div p{
		margin-top: 0px;
		margin-bottom: 3px;
		background: olive;
	}

	#sidebar{
		border: 1px solid black;
		width: 30%;
		float: right;
		box-sizing: border-box;
	}

	#sidebar div{
		border: 1px solid green;
		background: black;
		color: white;	
		margin-right: 0px;
		margin-bottom: 5px;
	}

	.main{
		border: 2px solid red;
		width:80%;
		margin:auto;
		overflow:hidden;
	}

為了方便看各元件，所以加了許多的邊界，可以將其去除看看效果。其中 box-sizing:border-box;指令的意思是無論怎麼加上border跟padding，元件寬度保持不變，這可以簡化我們計算寬度的步驟。

另一個要注意的是section要加上float: left;這個意思是section元件靠左，其他物件繞圖。也就是可以形成文繞圖。而sidebar加上float: right;兩者剛好並列。而因為footer不是文字，無法文繞圖，為了不影響到footer的顯示，所以在footer內加上clear: both; ，表示清除float元素，因為在其左側，也可以使用clear: left;

結果請看>>>這裡。