小虾虎鱼

小虾虎鱼

纯HTML+CSS打造组织架构图

作者 禾惠 发表于 2013/03/12,最后修改于 2013/03/12

组织架构图


  前段时间公司总监要我用HTML+CSS做一个部门组织架构图,问我能否实现的了?一开始以为很简单,就随口答应了。当着手做的时候才发现是多么的棘手。最后还是咬着牙做出来了。

上图就是最后实现的效果,唯一的瑕疵就是父级与它的子级不能居中对齐。于是使用js来辅助父级与它的子级对齐,不过依然还是存在一些瑕疵(不过相对之前是要好一些),如图:

组织架构图


HTML代码结构也应该也算清晰,只要找到<div class="strt-block">...</div>和<div class="strt-part">...</div>这两个DIV就大致明白HTML结构;

CSS中,只要注意的是 .line-h-l 、.line-h-c 、.line-h-r 对应的线条。


具体效果请下载附件查看,附件中的实例也添加了拖拽效果。

下载附件