HTML5 Details标签学习笔记

HTML5的Details标签

浏览器：chrome 12以上

刚被添加到chrome中的元素，让人喜欢。

点击标签时显示和隐藏内容。之前这种效果是用javascript 实现的，FAQ页面中经常使用这个功能。

创建一个标签

<details>

　　<summary>Who goes to college?</summary>

　　<p>Your mom.</p>

</details>

当我们需要显示和隐藏内容时，用details元素包括   一个summary 标签，   接着是内容，    点击summary标签时，内容标签切换显示

来些样式

body { font-family: sans-serif; }

details {
overflow: hidden;
background: #e3e3e3;
margin-bottom: 10px;
display: block;
}

details summary {
cursor: pointer;
padding: 10px;
}

details div {
float: left;
width: 65%;
}

details div h3 { margin-top: 0; }

details img {
float: left;
width: 200px;
padding: 0 30px 10px 10px;
}

 

总结：details + summary 标签为网页提供了方便的显示，隐藏功能。   

css 中的浮动，很好。。。。。

百分比来表示宽度      pointer的设置   主元素用margin-bottom区分下面的

内部元素用padding 来做间隔

转载于:https://www.cnblogs.com/yushunwu/archive/2011/12/22/2297763.html