HTML树形结构绘制教程及CSS技巧分享

本文深入介绍了四种纯CSS实现树形结构的实用技巧——从基于无序列表缩进与伪元素绘制连接线的基础方案，到利用Flexbox实现响应式斜线布局、借助CSS Grid进行像素级精确定位，再到融合SVG内联与CSS动画打造动态“生长”路径的高级可视化方法；所有方案均无需JavaScript或外部框架，兼顾语义化HTML结构、可维护性与视觉表现力，为开发者提供了一套灵活、轻量且富有创意的层级数据呈现解决方案。

如果您希望在网页中呈现层级清晰的树形结构，但不依赖JavaScript库或外部框架，则可以利用HTML嵌套与CSS样式组合实现。以下是几种纯CSS驱动的树形结构绘制方法：

一、使用无序列表与CSS缩进实现基础树形

该方法通过

和
• 的天然嵌套关系构建层级，并借助CSS的margin-left或padding-left控制子节点缩进，配合自定义列表标记模拟树节点连接线。适用于静态、层级较浅的结构。

  1、在HTML中编写嵌套的

  与
  • 结构，每个
  • 代表一个节点，子节点包裹在父
  • 内部的
    中。

    2、为所有

    设置list-style: none以移除默认圆点或数字标记。

    3、为每个

    • 添加position: relative，并在其::before伪元素中绘制垂直线段，长度依据层级动态计算。

      4、为除第一级外的每个

    • 的::before设置content: ""、position: absolute、left: -16px、top: 0、height: 100%、border-left: 1px solid #999。

      5、为每个

    • 的最后一个子
    • 的::after添加水平横线，连接至父节点，形成“T”形分支结构。

      二、采用Flexbox布局构建可伸缩树形节点

      该方式利用display: flex控制节点水平对齐与垂直分布，结合transform旋转实现斜向连接线，适合需要响应式适配或节点宽度不一致的场景。

      1、将每个节点封装为，父子关系通过嵌套容器表达。

      2、为.parent节点设置display: flex、flex-direction: column，并为其.children设置display: flex、flex-wrap: wrap。

      3、在父节点右侧插入一个绝对定位的，内含两个span：一个垂直线（height: 100%）、一个水平线（width: 24px），交汇处设为border-radius: 50%模拟连接圆点。

      4、对每个.children > .node应用margin-top: 12px统一垂直间距，避免重叠。

      5、当子节点数量超过一行时，使用justify-content: center使多列子节点居中对齐主干。

      三、利用CSS Grid定义固定坐标树形图

      此方法将整棵树视为二维坐标系，通过grid-template-rows/columns显式声明行高与列宽，再用grid-row/grid-column精确定位每个节点位置，适合结构稳定、需严格对齐的组织架构图。

      1、在外层容器上设置display: grid、grid-template-columns: repeat(7, 1fr)、grid-template-rows: repeat(5, auto)，预留足够行列空间。

      2、为根节点设置grid-column: 4 / 5、grid-row: 1 / 2，使其居中于第一行。

      3、为第二层三个子节点分别指定grid-column: 2 / 3、grid-column: 4 / 5、grid-column: 6 / 7，全部位于grid-row: 2 / 3。

      4、在对应行列交叉处添加::before伪元素，绘制从父节点中心到子节点中心的斜线，使用transform: rotate()配合height和width微调角度与长度。

      5、所有节点统一设置text-align: center与padding: 8px 12px，确保视觉尺寸一致。

      四、基于SVG内联绘制带路径动画的树形结构

      该方案将树形结构的连接关系抽象为SVG 与元素，通过CSS控制stroke-dasharray与stroke-dashoffset实现路径绘制动画，增强可视化表现力。

      1、在HTML中嵌入viewBox="0 0 800 400"。

      2、使用绘制每个节点，cx/cy坐标按层级与编号计算，例如根节点cx="400" cy="40"，子节点cy="120"，横向间隔200px。

      3、为每条父子连接生成元素，x1/y1取父节点坐标，x2/y2取子节点坐标，设置stroke: #666、stroke-width: 2。

      4、为每个添加CSS类，定义stroke-dasharray: 100与stroke-dashoffset: 100，再通过@keyframes将offset变为0，实现“生长”效果。

      5、节点添加fill: #fff、stroke: #333、stroke-width: 1.5，并用元素在圆心下方添加文字标签。

      理论要掌握，实操不能落！以上关于《HTML树形结构绘制教程及CSS技巧分享》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！