javascript - 如何使用 HTML CSS 绘制家谱线?

标签 javascript html css family-tree

我正在尝试实现类似于 http://www.ancestry.com 的东西有,但我不确定如何划定界线。

这是我想要做的粗略的 ascii 草图:

                 +----GrDAD1
                 |
     +----DAD----+
     |           +----GrMOM1
ME --+
     |           +----GrDAD2
     +----MOM----+
                 |
                 +----GrMOM2

我认为一种方法是创建一个单元格表,并创建线条图像, 将每个 child 与他们的 parent 联系起来。 我猜想有一种更简单的方法可以做到这一点,但我对 CSS 的了解非常有限。 有人对我如何实现这个有什么建议吗?

最佳答案

您可以使用纯 CSS 来实现。这是一个例子:

http://thecodeplayer.com/walkthrough/css3-family-tree

关于javascript - 如何使用 HTML CSS 绘制家谱线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1695115/

相关文章:

javascript - 悬停时播放多个 Plyr Vimeo 嵌入

javascript - 使整个 DIV block 可点击

javascript - 在 Angular 输入字段中输入时触发功能

javascript - 在 Chrome 扩展中使用动态生成的 anchor 标记

javascript - 页面向下滚动时更改标题颜色

javascript - 如何创建自己的确认对话框?

html - 不使用 HTML 文本可以制作纯背景吗?

javascript - 隐藏在 JS 幻灯片后面的下拉菜单

javascript - 显示给定 (X,Y) 元组的图形

c# - Global.asx 和 CSS 之间的冲突