html5信息框代码 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 来做间隔