使用 <summary> 元素:
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
亲自试一试 »
下面有更多 "亲自试一试" 示例。
这个<summary>
标签定义了一个可见的标题<详情>元素。单击标题可以查看/隐藏详细信息。
笔记:这个<summary>
元素应该是 <details> 元素的第一个子元素。
表中的数字指定完全支持该元素的第一个浏览器版本。
Element | |||||
---|---|---|---|---|---|
<summary> | 12.0 | 79.0 | 49.0 | 6.0 | 15.0 |
这个<summary>
标签还支持HTML 中的全局属性。
这个<summary>
标签还支持HTML 中的事件属性。
使用 CSS 设置 <details> 和 <summary> 的样式:
<html>
<style>
details > summary {
padding: 4px;
width: 200px;
background-color: #eeeeee;
border: none;
box-shadow: 1px 1px 2px #bbbbbb;
cursor: pointer;
}
details > p {
background-color: #eeeeee;
padding: 4px;
margin: 0;
box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
</body>
</html>
亲自试一试 »
HTML DOM 参考:摘要对象
大多数浏览器都会显示<summary>
具有以下默认值的元素:
summary {
display: block;
}
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!