html5布局分区,html5 的 details 标记 ，summary标记，布局

html5的新加的标签：details的用法,两种方式的介绍，一种是直接css的实现，一种是js+css的实现。导航

菜单

内容

隐藏脚注

页面生成于2015-7-9

显示脚注

页面说明：

页面生成于2015/7/9

summary是对details的详细说明

js脚本控制交互元素的使用脚注

本页面生成时间：2015-7-9 11:27

function span1_click(){

var objD = document.getElementById("details1");

var attD = objD.getAttribute("open");

if(attD != "open"){

objD.setAttribute("open","open");

}else{

objD.removeAttribute("open");

}

}

通用的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;

}