简介这是一份展示纯CSS族谱树形结构实现的Web示例资源面向前端开发者、PHP应用开发人员以及需要在项目中呈现层级关系的技术学习者。HTML文件完整演示了无限级树形结构的构建思路通过display、position、float布局父子节点借助:before与:after伪元素绘制连接线利用:hover增强悬停反馈并进一步讨论了递归式节点扩展、媒体查询响应式适配以及懒加载性能优化等进阶做法。资源同时提供二次开发方向包括自定义节点样式、增加折叠交互、适配不同屏幕尺寸及使用CSS预处理器维护代码可迁移至家谱展示、企业组织架构、文件目录树、流程图等多种场景。压缩包仅含1个HTML文件大小约2KB轻量且无外部依赖特别适合快速验证和移植学习。目前已有1269人学习下载适合作为低成本理解CSS树形布局与前端可视化思路的实用参考。 大概一个多月前我接了一个偏冷门的前端需求做一个族谱展示页。需求方反复强调不要后台管理、不要拖拽编辑、不要炫酷动画就要一个打开就能直接看的家族关系页面最好在手机上也别卡。我盘了一下数据量和交互五到六代人、上百个血缘节点层级深但操作极少。取舍一下就明确了——不引图表库、不引框架直接用浏览器原生HTML和CSS搭一套纯CSS树形结构。这套东西交付后客户用得挺满意之后还追了一个打印全家谱的需求也是同一套结构改出来的。今天把实现思路、连线原理和踩坑过程完整拆一遍给接到同类需求的朋友做个参考。1. 接到族谱需求后我为什么先排除了JS图表库1.1 这类页面表面上是“展示”骨子里是“排版”族谱页面和我平时做的后台管理系统差别很大。后台的数据是增删改查族谱的数据是“只读”用户打开页面的核心诉求就三个看清楚谁是谁的爹、谁和谁是兄弟、哪一房传了几代人。说白了这是一个排版问题不是交互问题。既然是排版第一反应其实是ECharts或者d3。但真把数据丢进去试了一遍问题就来了。ECharts关系图对这种深层级树形支持不算好节点一多标签互相挤连线样式也偏“数据可视化”一看就像大屏驾驶舱没有族谱该有的纸张感。d3灵活是灵活但为了这个需求引入一个近300KB的库首屏加载时间直接多出一截移动端体验也受影响。最烦的是canvas方案里文字是画出来的用户想选中某个人名复制都做不到。DOM树的好处在这里就体现出来了文字可选中、可被搜索引擎收录、打印样式好控制而且一张静态页面不用等任何脚本执行打开就渲染完。族谱这种“内容型”页面用最笨的HTML反而最合适。1.2 纯CSS的能力边界展示能做的尽力做交互别硬撑做技术选型的时候得先划一条线哪些事纯CSS能干哪些事它干不了。纯CSS能解决的是布局、连线、hover高亮、代际区分这类纯视觉问题凡是需要跟系统能力打交道的比如点击按钮把文字复制到剪贴板或者读取某个数据再渲染最终都得靠JS。总有人喜欢问“纯CSS能不能做复制”答案很明确复制这个动作必然会触发浏览器API纯CSS写不了必须用JS的事件监听来调用。我的原则是静态数据、以阅读为主、结构基本不变的场景优先纯CSS如果需求里出现动态增删节点、搜索过滤、拖拽调整亲缘关系那就老实回到JS或框架的赛道。族谱场景恰好落在前一种所以纯CSS是性价比最高的方案。2. 三层嵌套的HTML结构把家谱层级翻译成文档语义2.1 用ul/li表达“分支”是天然的选择树形结构和HTML里的无序列表长得一模一样一个祖先节点下面挂着几个孩子每个孩子下面又可能挂着自己的孩子。用ul嵌套ul来表达这种层级语义上完全说得通也不需要额外发明什么标签。我最开始搭的结构是这样的ul classtree li div classperson曾祖/div ul li div classperson祖父/div ul lidiv classperson父亲/div/li lidiv classperson叔叔/div/li /ul /li li div classperson伯祖父/div ul lidiv classperson堂伯/div/li /ul /li /ul /li /ul外层再包一个.tree根节点用来承载整个树的统一间距和样式。每个.person只是树里的一个“叶子标记”真正决定形状的是ul和li的嵌套关系。这里有个很重要的设计思路节点卡片和连线是分离的卡片负责内容展示ul/li的伪元素负责画线。这样后面想换卡片样式完全不影响树的骨架。2.2 配偶和“父代单元”怎么放族谱和普通组织架构图最大的区别是组织架构里的每个节点是一个人族谱里的每个节点往往是一个家庭。一个父亲节点下面不能只画一个人得把配偶也放进去否则看起来就不像“家谱”。我试过两种方案。第一种是在同一个li下面并列放两个.person比如一个“父亲”一个“母亲”再在下面挂孩子。这种方案的缺点是连线会从两个人中间穿过视觉上很怪而且两个.person如果名字长短不同对齐会很痛苦。第二种方案是我最终采用的用一个内部的.family容器把夫妻两个人包成一个整体再让这个整体作为连线出口。li div classfamily span classperson祖父/span span classperson祖母/span /div ul lidiv classperson父亲/div/li /ul /li.family里的两个span用flex水平排列中间用一个很小的占位符或者直接写个“配”字隔开线下连接时就从.family容器的中心走。这样无论是独身节点还是夫妻节点对外暴露的连线锚点都是同一个位置计算伪元素时就不用区分两种情况了。3. 连线怎么画伪元素、边框和坐标推演3.1 连接线其实是一段段边框拼接出来的很多人第一次看到纯CSS树形结构都会觉得神奇其实原理非常简单页面里根本没有“一条长线”所有连线都是不同层级的ul和li用伪元素分别画出一小段最后拼成一个完整图案。就像拼积木每块积木只负责自己那一小截组合在一起就形成了连续的树状结构。树形结构里的连线一共就三种形态从父节点往下的垂直公共线同一层兄弟节点之间的水平横线每个节点正上方的一小段垂直引入线这三种形态分别对应三个位置ul::before画公共垂直线li::before和li::after画水平横线以及节点上方的垂直引入线。下面是我最终用的核心CSS比网上流传的老版本清爽一些关键是用flex替代了传统的float解决了子节点一多就换行的问题:root { --line-color: #b0a08a; --line-width: 2px; --v-space: 28px; } .tree, .tree ul { margin: 0; padding: 0; list-style: none; } .tree li { display: flex; flex-direction: column; align-items: center; } .tree ul { position: relative; display: flex; justify-content: center; padding-top: var(--v-space); } .tree ul::before { content: ; position: absolute; top: 0; left: 50%; width: 0; height: var(--v-space); border-left: var(--line-width) solid var(--line-color); } .tree li { position: relative; display: flex; flex-direction: column; align-items: center; padding: var(--v-space) 14px 0; } .tree li::before, .tree li::after { content: ; position: absolute; top: 0; height: var(--v-space); } .tree li::before { right: 50%; width: 50%; border-top: var(--line-width) solid var(--line-color); } .tree li::after { left: 50%; width: 50%; border-top: var(--line-width) solid var(--line-color); border-left: var(--line-width) solid var(--line-color); } .tree li:first-child::before, .tree li:last-child::after { width: 0; border-top: none; }这段代码里最关键的三个位置是ul::before的左50%、li::after的border-left、以及li的左右padding。它们共同决定了一条线从哪里起、到哪里停。3.2 边界情况的处理单子节点和首尾节点如果直接照上面的CSS跑你会看到第一个子节点左侧多出一截横线最后一个子节点右侧也多出一截这是因为每个li::before默认从自己的左边界画到中心第一个节点的左边界前面没有兄弟线就延伸出去了。解决办法是精确裁剪首尾.tree li:first-child::before { width: 0; border-top: none; } .tree li:last-child::after { width: 0; border-top: none; border-left: var(--line-width) solid var(--line-color); }last-child::after要去掉横线但保留border-left因为那个节点正上方的垂直引入线还得靠它画。同理first-child::after里的border-left要保留否则第一个节点上方会缺一段竖线。另一个容易被忽略的坑是“只有一个子节点”的情况。比如某个祖先只生了一个孩子那这个孩子下方不应该出现横跨整行的水平线只需要一根垂直的公共线直接连到孩子头顶。.tree li:only-child::before, .tree li:only-child::after { width: 0; border-top: none; border-left: var(--line-width) solid var(--line-color); }只有li:only-child时横线全部去掉中心竖线保留。这个细节我第一次没处理结果单传分支下面多出一条横杠客户截图问我“这条线是啥意思”尴尬得很。3.3 关于横向padding和坐标计算的实操笔记写这个CSS时最耗时间的不是概念而是坐标偏移。li的左右padding取的是14px这14px会直接影响横线的覆盖范围。默认box-sizing: content-box下li的宽度等于内容宽度加左右padding伪元素的left: 50%和right: 50%都是以li的border-box为参考系的。只要padding一变横线覆盖范围也会跟着变所以我把所有间距统一成了CSS变量。如果实在不想折腾伪元素坐标还有一个备选方案在每个li内部额外放一个span classconnector专门画线。这样做的好处是把横线和竖线完全分开不会出现两个伪元素职责纠缠的问题代价是HTML结构里会多一些没有语义的标签。对我来说为了保持结构干净我宁愿多调试一会CSS坐标。4. 从纵向树到横向族谱布局变体与间距换算4.1 改成横向树的关键旋转观察视角纵向树是从上往下展开父节点在上、子节点在下符合大部分人看家谱的习惯。但实际需求里总会有人问“能不能做成从左往右的像书本翻页那样。”横向树在纸面上确实更好读因为人的视线习惯是横向扫描。实现横向树不需要推翻重写核心改动是调整flex的方向和伪元素的边框位置。纵向树里ul是flex-direction: row子节点横向排列横向树里要让子节点纵向排列display: flex不变但把整个层级结构换成flex-direction: row同时让每个li变成flex-direction: column。连线的方向也跟着转90度原本的border-top改成border-right原本的border-left改成border-bottom。我实际项目里没单独写一套横向CSS而是利用CSS变量做了一个简单的方向开关.tree.horizontal .tree ul { flex-direction: column; padding-top: 0; padding-left: var(--v-space); } .tree.horizontal .tree li { flex-direction: row; padding: 14px 0 14px var(--v-space); }只能说思路是这样具体每个边框的位置都需要重新对一遍。我个人觉得如果需求里明确要横向树不如直接基于纵向树做一次旋转变换给根容器加transform: rotate(90deg)代价是阅读方向也会旋转需要再对内容做反向旋转比较绕但小范围用一下很快。4.2 代际高亮和夫妻节点的视觉层次族谱看久了容易串行尤其是同辈兄弟多的时候很容易看花眼。页面做完后我加了一个非常实用的功能代际背景色。每间隔一代节点卡片的底色做轻微变化祖辈用深一点的米色父辈用浅米色当前代用白色。实现方式很简单写一个.generation类在每一层ul上手动标记层级然后按层级设置不同的卡片背景。夫妻节点的处理前面提过这里补一个具体样式.family { display: inline-flex; align-items: center; gap: 4px; background: #f8f4ec; border: 1px solid #d8cbb8; border-radius: 6px; padding: 6px 10px; line-height: 1.4; } .person { white-space: nowrap; }这样“祖父 配 祖母”会作为一个整体卡片呈现下面的连线从这个卡片的中心点出去视觉上非常干净。4.3 间距换算别把垂直间距写死成像素层级树的间距直接影响阅读舒适度。间距太小分支挤在一起间距太大页面变得很长移动端滚动起来很累。我一开始用的是固定像素后来改成CSS变量统一管理。.tree li { padding: var(--v-space) 14px 0; }这样想调整疏密只需要改--v-space一个变量。不同屏幕尺寸下也可以做媒体查询覆盖media (max-width: 640px) { :root { --v-space: 18px; } .tree li { padding-left: 6px; padding-right: 6px; } }移动端还有一个容易被忽略的问题人名超过一定长度会把li撑得很宽导致分支被迫换行。保险做法是给.person加一个max-width和省略号处理但族谱里名字通常很短我这边没有遇到特别严重的溢出只做了个保险性约束。5. 实操中最容易翻车的三个细节以及一个扩展方向5.1 第一个坑连线的圆角处理纯CSS树形结构常见的圆角处理是给横线和竖线交界处加一点弧度让连接处看起来不那么生硬。网上很多方案直接用border-radius但要注意border-radius在伪元素上的表现和普通元素一样弧度加在哪个角必须想清楚。我自己没有给连线加圆角原因是这个族谱的视觉风格偏传统纸质直角线反而更有“族谱线条”的感觉。如果要做圆角建议只给最外层首尾节点加.tree li:first-child::after { border-radius: 6px 0 0 0; } .tree li:last-child::before { border-radius: 0 6px 0 0; }加圆角的时候要同步检查border-top和border-left同时存在的情况否则会出现一个角有弧度但旁边的边框没对齐看起来像断线。5.2 第二个坑hover高亮时背景会盖住连线族谱页面做成静态展示后客户又说“能不能鼠标放在某个人身上把这个人所在的这一代高亮出来”。这个需求用纯CSS的:hover很容易实现。但有个问题li的伪元素画出的连线在层级上位于li内部如果给.person卡片加background并把层级抬得过高会遮挡上方垂下来的竖线。我的处理方式是给.person加position: relative; z-index: 1;让卡片浮在连线上方视觉上竖线刚好停在卡片上方边缘不会穿到卡片内部。.tree li:hover .person, .tree li:hover .family { background: #e7e0d2; box-shadow: 0 0 0 2px #b0a08a; transform: translateY(-2px); transition: background 0.2s; }5.3 第三个坑打印样式远比屏幕样式麻烦前面提到客户后来追加了打印全家谱的需求。打印是纯CSS的强项但坑也不少。第一屏幕上看刚好的一页打印时会因为内容高度和A4纸高度不一致被硬生生截断需要加page-break-inside: avoid防止单个节点卡片被劈成两半。第二细线边框在部分浏览器里会变得很淡打印时把border-width调成1px并且颜色加深。第三如果树太宽横向会被截断这时候我建议先按辈分拆成多页而不是强行缩放在一张纸上。5.4 一个值得收藏的扩展用checkbox hack实现展开折叠纯CSS不是完全不能做交互。如果树层级太深希望默认收起一部分分支点击再展开可以用一个隐藏的checkbox配合label实现不需要写任何JS。li label forbranch-1 classtoggle祖父/label input typecheckbox idbranch-1 classbranch-toggle checked ul classbranch lidiv classperson父亲/div/li /ul /li.branch-toggle .branch { max-height: none; } .branch-toggle:not(:checked) .branch { max-height: 0; overflow: hidden; }借助:checked状态控制子树的max-height就能实现展开和收起。不过说实话这种hack在层级多、状态多的时候维护成本很高交互复杂了还是交给JS更顺手。这个技巧的价值更多在于理解纯CSS的边界——展示和轻交互能做到重交互就别硬撑。我在这个项目里的总体手感是静态族谱、组织架构图这类内容型树形结构纯CSS不但能做而且做得比图表库更轻、更贴合阅读场景但凡是涉及“用户修改数据”的需求比如拖拽节点改亲缘关系、冗余剪枝、搜索定位纯CSS就完全不合适了。前端技术选型没有绝对的好与坏只有愿不愿意为“省事”压缩用户的操作体验。对我来说一个能打开就看、能选中文字、能顺利打印的族谱页面已经比很多动辄引入大库的方案更像是给人用的东西了。本文还有配套的精品资源点击获取