<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件分支树</title>
<style>
*{
padding: 0;
margin: 0;
}
body {
background: #223;
color: #aaa;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* ⊞⊟ */
.shell {
position: relative;
display: block;
width: 600px;
}
details {
position: relative;
width: auto;
height: auto;
overflow: hidden;
max-height: 2.5em !important;
transition: all 0.1s ease;
transition: 1s;
}
details>summary {
position: relative;
margin-top: 0.25em;
color: #99e;
padding: 0.1em 0.5em 0.2em;
background: #444;
}
details>summary:before {
content: "⊞";
color: #eee;
font-size: 0.5em;
margin-right: 0.5em;
}
/* 当分支被打开时 */
details[open]>summary {
background: #66e;
color: #eee;
}
details[open]>summary:before {
content: "⊟";
color: #ccc;
}
/* 调整位置，加上虚线 */
.folder {
border-left: 2px #ccc dotted;
border-bottom: 2px #ccc dotted;
margin: 0 0 10px 10px;
padding: 10px 0 10px 20px;
}
details[open] {
max-height: 599px !important;
}
</style>
</head>
<body>
<div class="shell">
<details open>
<summary>Final assignment</summary>
<div class="folder">
<p>index.html</p>
<!-- --------------------------------------------- -->
<details open>
<summary>style</summary>
<div class="folder">
<details>
<summary>css</summary>
<div class="folder">
<p>index.css</p>
<p>all.css</p>
</div>
</details>
<!-- --------------------------------------------- -->
<details open>
<summary>js</summary>
<div class="folder">
<p>index.js</p>
<p>effect.js</p>
<p>all.js</p>
</div>
</details>
<!-- --------------------------------------------- -->
<details>
<summary>img</summary>
<div class="folder">
<p>background.png</p>
<p>logo.png</p>
<img src="go.gif" style="height: 50px; margin: 10px 0; ">
</div>
</details>
</div>
</details>
<!-- --------------------------------------------- -->
<details open>
<summary>file</summary>
<div class="folder">
<p>Implementation principle.docx</p>
<p>element.xlsx</p>
</div>
</details>
</div>
</details>
</div>
</body>
<!-- 不支持ie -->
</html>
