native HTML expand（本机HTML拓展）

最新推荐文章于 2021-07-04 10:11:59 发布

Super_Calvin

最新推荐文章于 2021-07-04 10:11:59 发布

阅读量224

点赞数

分类专栏： # 页面布置文章标签： native html html expand css html拓展

本文链接：https://blog.csdn.net/weixin_45544796/article/details/104634055

版权

页面布置专栏收录该内容

81 篇文章 0 订阅

订阅专栏

native HTML expand

示例
HTML
CSS

更多有趣示例尽在 知屋安砖社区

示例

在这里插入图片描述

HTML

<div class="container">

<details>
    <summary>Life Story</summary>
  <div>Nothing special, I think you're pretty cool.</div>
</details>

<details>
    <summary>Contact Info</summary>
    <div><ul>
      <li>Twitter: <a href="https://twitter.com/tejaskumar_" target="_blank">@tejaskumar_</a></li>
      <li>GitHub: <a href="https://github.com/tejasq" target="_blank">tejasq</a></li>
      </ul></div>
</details>

<details>
  <summary>Future Career Options</summary>
  <div>
    <ul>
      <li>Chief Trolling Officer</li>
      <li>Hat Model</li>
    </ul>
  </div>
</details>

</div>

CSS

.container {
  max-width: 768px;
  margin: 100px auto;
  box-shadow: 0 3px 10px #0003;
  border-radius: 2p;
}

details > summary {
  padding: 8px 16px;
  font-weight: bold;
}

details > div {
  padding: 16px;
}

details > summary:hover {
  background: #f4f4f4;
}


details:not(:first-of-type) > summary {
  border-top: 1px solid #ddd;
}

ul {
  margin: 0;
  padding: 0;
  list-style-position: inside;
}

body {
  font-family: sans-serif;
}