css实现树结构和组织架构结构
普通的树结构
实现原理
- 通过 ul li 实现层级结构
- 通过 before 和 after 实现连接线
分步实现
使用 ul li 实现层级结构
去除 li 前面的点
使用 before 伪类画出横线
使用 after 伪类画出竖线
隐藏每个 ul 下的最后一个直属 子 li 的 after 伪类效果
修改 after 伪类的 height 值
修改 最外层第一个 li 的 after 伪类的 top 和 height 值
改进:连线处带弧度
最外层 ul 的第一个 li 和每层 ul 最后一个 li 的横线带弧度
创建竖直连线
多加几个节点测试
组织架构/家族树
html 结构
基于 flex 布局实现层级结构
实现居中效果
去除 li 边框，给 a 加上边框
各个层级之间加入间隔
加入横向连线
通过li的after,before设置横向连接线
解决横向连线间的缝隙：通过调整右上连线的 width 和 left
加入竖向连线
通过ul的after,before辅助解决竖向连线问题
最终效果