HTML5教程:如何使用details元素和summary元素

作者佚名技术来源 CSS技术浏览发布时间 2012-02-23

使用案例

在哪些情况时会用到 <details>?FAQ表可能是我们最先涌现的想法。大家经常使用手风琴效果是用在FAQ列表，所以 <details> 是这一效果的最佳效果。
考虑到这一系列内容，它可能被固定在某一区域，当我们滚动内容的时候。像这样子？
你也可以使用<details>来操作博客的评论内容，用户简介，下载列表，复杂的表单，或者像规范中描述下面的应用：

An example of the <details> element from the spec

实际上，只要你看看我写的wordpress，会发现有大量的使用 <details>的机会。让我们在评论中了解一下你的观点和想法。

样式格式化

你如何对这个定义样式？同时，在webkit浏览器中我们可以使用伪类样式 ::-webkit-details-marker。你可以看到这个小的案例：

1 2 3 4 5 details summary::-webkit-details-marker { background: red; color: #fff; font-size: 500%; }

我们也可以将这个小组件定位。这里是向右浮动的这就是我们初始化效果。
我们如何将默认的组件Icon自定义呢？那就是用属性选择器 (attribute selector),你可以用来检测 <details>元素是打开的还是关闭的，然后为其定义一个合适的背景图片。我们咋下面的例子中作了一个类似的效果，使用 :after pseudo-element元素定义成我们喜欢的背景图片：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 summary::-webkit-details-marker { display: none } summary:after { background: red; border-radius: 5px; content: "+"; color: #fff; float: left; font-size: 1.5em; font-weight: bold; margin: -5px 10px 0 0; padding: 0; text-align: center; width: 20px; } details[open] summary:after { content: "-"; }

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: :before和:after伪类元素创造神奇效果下一篇: 写出好的CSS规则:完美的使用:nth-child

关于HTML5教程:如何使用details元素和summary元素的所有评论

随机推荐