HTML5 <details>
来源:互联网 发布:知柏地黄丸女童能吃吗 编辑:程序博客网 时间:2024/06/04 18:47
定义和用法
<details> 标签用于描述文档或文档某个部分的细节。
浏览器支持
- 目前只有 Chrome(谷歌浏览器) 支持 <details> 标签。
- <details>下必须包含一个且只能一个<summary>。
- 与 <summary> 标签 配合使用,可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出details。
属性
- open
- 语义:<details open>
- 解释:定义 details 是否可见。
HTML代码
<details class="menu" open> <summary>菜单1</summary> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> </ul></details>
CSS代码
跟普通标签一样修饰,这里主要讲一下标签的特定样式
/*去掉自带的小三角*/details summary::-webkit-details-marker { display: none;}/*自定义图标,可用图片或字符,如果使用图片,请把content的值设置成空字符*//*展开*/.menu summary:before { content: "+"; /*background: url(../Images/right.png) no-repeat center center;*/ /*收起时的图片*/ /*vertical-align: middle;*/}/*收起*/.menu[open] summary:before { content: "-"; /*background: url(../Images/down.png) no-repeat center center;*/ /*展开时的图片*/}
阅读全文
0 0
- HTML5 <details>
- HTML5 <details> 标签
- HTML5 的<details>
- HTML5的<details>和<summary>
- HTML5的<details>和<summary>
- details
- HTML5教程之details展开收缩标签的应用
- HTML5教程之details展开收缩标签的应用
- HTML5教程之details展开收缩标签的应用
- Html5新增小元素:figure与figurecaption address progress meter mark details与summary
- HTML5 笔记1— details元素、mark元素、progress元素、meter元素
- HTML5规范:mark标签,下载进度progress,显示度量值meter,details标签
- 从零开始前端学习[27]:html5中的特殊结构标签,ruby,mark,meter,progress,details
- Java details
- delegate details
- JMS Details
- matlab details
- Submission Details
- 【wuli小新杆】短腿短腿,快快长长……
- 写给Android开发者的混淆使用手册
- java 调用 wsdl形式的webservice 示例
- Keytool生成证书并在Tomcat配置SSL
- JavaScript:彻底理解同步、异步和事件循环(Event Loop)
- HTML5 <details>
- PAT 1005. 继续(3n+1)猜想
- oracle 排序
- HttpClient学习整理
- node.js 学习
- 苹果IOS开发者账号总结
- hdu5901
- Redis Cluster的基本原理和架构
- Android-常见面试题