四川盐亭网站制作公司

html5的details标记，summary标记，

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

创新互联公司主营二道江网站建设的网络公司,主营网站建设方案,成都app软件开发公司,二道江h5成都小程序开发搭建,二道江网站营销推广欢迎二道江等地区企业咨询

导航

	
	
内容

	

		隐藏脚注
		
页面生成于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;
}

网站名称：html5的details标记，summary标记，
分享URL：http://scyanting.com/article/gcpeci.html

其他资讯