Skip to content

Commit f5c278b

Browse files
maliangcodermaliangcoder
committed
css实现文件夹结构
1 parent 07c4bac commit f5c278b

File tree

1 file changed

+72
-0
lines changed

1 file changed

+72
-0
lines changed

‎常用的CSS主流布局案例(1~8)/24_文件夹结构.html

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>文件夹结构</title>
6+
<style>
7+
:root{
8+
--folder-structure-item-height:15px;
9+
--folder-structure-item-margin-left: 30px;
10+
--folder-structure-item-padding-top: 15px;
11+
}
12+
body,
13+
ul,
14+
li {
15+
margin: 0;
16+
padding: 0;
17+
}
18+
ul {
19+
list-style-type: none;
20+
margin-left: var(--folder-structure-item-margin-left);
21+
}
22+
.folder-structure {
23+
padding-left: 100px;
24+
}
25+
.folder-structure li {
26+
padding-top: var(--folder-structure-item-padding-top);
27+
position: relative;
28+
}
29+
.folder-structure li::before {
30+
border-left: 1px solid #333;
31+
content: "";
32+
position: absolute;
33+
top: 0;
34+
left: 0;
35+
transform: translate(calc(-1 * var(--folder-structure-item-margin-left)),0);
36+
height: 100%;
37+
}
38+
.folder-structure li::after {
39+
border-bottom: 1px solid #333;
40+
content: "";
41+
left: 0;
42+
position: absolute;
43+
top: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
44+
transform: translate(-100%, 0);
45+
width: var(--folder-structure-item-margin-left);
46+
}
47+
.folder-structure li:last-child::before {
48+
height: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
49+
}
50+
</style>
51+
</head>
52+
<body>
53+
<div class="folder-structure">
54+
<ul>
55+
<li>
56+
1...
57+
<ul>
58+
<li>
59+
1.1...
60+
<ul>
61+
<li>1.1.1...</li>
62+
<li>1.1.2...</li>
63+
</ul>
64+
</li>
65+
<li>1.2...</li>
66+
<li>1.3...</li>
67+
</ul>
68+
</li>
69+
</ul>
70+
</div>
71+
</body>
72+
</html>

0 commit comments

Comments
 (0)