html5 的 details 標記 ，summary標記，佈局

html5的新加的標籤：details的用法,兩種方式的介紹，一種是直接css的實現，一種是js+css的實現。

<header>導航</header>
	<nav>菜單</nav>
	<article>內容</article>
	<footer>
		隱藏腳註
		<details>頁面生成於2015-7-9</details><br/>
		顯示腳註
		<details open="open">
			<summary>頁面說明：</summary>
			頁面生成於2015/7/9
			summary是對details的詳細說明
		</details>
		<span onClick="span1_click()">js腳本控制交互元素的使用腳註</span>
		<details id="details1">本頁面生成時間：2015-7-9 11:27</details>
		<script type="text/javascript">
			function span1_click(){
				var objD = document.getElementById("details1");
				var attD = objD.getAttribute("open");
				
				if(attD != "open"){
					objD.setAttribute("open","open");
				}else{
					objD.removeAttribute("open");
				}
			}
		</script>
	</footer>

通用的css樣式的實現：

<style type="text/css">
header, nav, article,footer{
	border:1px solid #666;
	padding:5px;
}
header{
	width:500px;
}
nav{
	float:left;
	width:60px;
	height:100px;
}
article{
	float:left;
	width:428px;
	height:100px;
}
footer{
	clear:both;
	width:500px;
}
details{
	overflow:hidden;
	height:0px;
	padding-left:200px;
	position:relative;
	display:block;
}
details[open]{
	height:auto;
}
span{
	cursor:pointer;
}
</style>