css实现树状结构思维导图

maliangcoder · maliangcoder · commit e315501ce0d4 · 2023-02-02T22:17:21.000+08:00
diff --git a/常用的CSS主流布局案例(1~8)/47_树状结构思维导图.html b/常用的CSS主流布局案例(1~8)/47_树状结构思维导图.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>树状结构思维导图</title>
+    <style>
+        ul {
+            list-style: none;
+            margin: 0;
+        }
+
+        .tree-diagram ul {
+            display: flex;
+            position: relative;
+            padding: 20px 10px 0 10px;
+        }
+
+        /* 层级竖线 */
+        .tree-diagram ul li::before {
+            content: "";
+            border-right: 1px solid red;
+            position: absolute;
+            top: 0;
+            right: 50%;
+            height: 20px;
+            width: 50%;
+        }
+
+        .tree-diagram li {
+            padding: 20px 10px 0 10px;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        /* 每项上方横线和右方竖线 */
+        .tree-diagram li:before {
+            content: "";
+            height: 20px;
+            width: 50%;
+            border-right: 1px solid blue;
+            border-top: 1px solid #333;
+            position: absolute;
+            top: 0;
+            right: 50%;
+        }
+
+        /* 每项上方横线 */
+        .tree-diagram li::after {
+            border-top: 1px solid blue;
+            content: "";
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 50%;
+        }
+
+        /* 移除第一项和最后一项上方横线 */
+        .tree-diagram li:first-child::before,
+        .tree-diagram li:last-child::after {
+            border-top: none;
+        }
+
+        /* 去掉根节点上方竖线 */
+        li.tree-diagram__root::before {
+            border-right: none;
+        }
+    </style>
+</head>
+<body>
+<div class="tree-diagram">
+    <ul>
+        <li class="tree-diagram__root">
+            结构01-1...
+            <ul>
+                <li>
+                    结构02-1...
+                    <ul>
+                        <li>结构03-1</li>
+                        <li>结构03-2</li>
+                        <li>
+                            结构03-3
+                            <ul>
+                                <li>结构04-1</li>
+                                <li>结构04-2</li>
+                                <li>结构04-3</li>
+                            </ul>
+                        </li>
+                    </ul>
+                </li>
+                <li>结构02-2</li>
+            </ul>
+        </li>
+    </ul>
+</div>
+</body>
+</html>
