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>亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
