我正在尝试使用 HTML 创建一个简单的家谱（如果需要，我还可以包含 CSS 和 Javascript）。我想实现这样的目标：
http://www.gmrv.es/~sschvartzman/Sara_C._Schvartzman/example.png
有人知道我怎么做这个吗？
编辑：
我构建此网页的结构属于以下类型：
Father
Mother
n Number of children
children[n]
我想自动构建这个数字。我希望每个人都有一个指向另一个网页的链接，但我认为一旦我有了这个数字，这将很容易。
感谢您的帮助！
我终于设法创建了一个多父家庭树图。
<!DOCTYPE html> <html> <head><META http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport"content="width=device-width, initial-scale=1.0"> <meta name="description" content=""><meta name="author" content=""><link href="tree.css" rel="stylesheet">
<title>Family Tree</title> </head><body> <h1>Schvartzman family tree</h1>
<div class="tree">
<ul class="pf">
<li class="parent">
<a class="f_nolink">
<div class="person"">Claudia<br>Avila<span>(1961 - )</span></div>
</a>
</li>
<li class="divorce">
<ul class="c"> <li>
<a class="m_nolink">
<div class="person"">Sebastian<br>Berdichevsky<span>(1981 - )</span></div>
</a>
</li>
<li>
<a href="@F62327212@.html" class="f">
<div class="person"">Sara<br>Berdichevsky<span>(1986 - )</span></div>
</a>
</li>
<li>
<a class="m_nolink">
<div class="person"">Manuel<br>Berdichevsky<span>(1987 - )</span></div>
</a>
</li>
<li>
<a class="m_nolink">
<div class="person"">Sergio<br>Berdichevsky<span>(1989 - )</span></div>
</a>
</li>
</ul>
</li>
<li class="parentWithAncestor">
<a href="@F62638334@.html" class="m">
<div class="person"">Eduardo<br>Berdichevsky<span>(1961 - )</span></div>
</a>
</li>
<li class="marriage">
<ul class="c"> <li>
<a class="f_nolink">
<div class="person"">Abigail<br>Berdichevsky<span>(2001 - )</span></div>
</a>
</li>
<li>
<a class="m_nolink">
<div class="person"">Tobias<br>Berdichevsky<span>(2003 - )</span></div>
</a>
</li>
<li>
<a class="m_nolink">
<div class="person"">Iamin<br>Berdichevsky<span>(2007 - )</span></div>
</a>
</li>
</ul>
</li>
<li class="parent">
<a class="f_nolink">
<div class="person"">Carolina<br>Overlar<span>(1978 - )</span></div>
</a>
</li>
</ul>
</div>
<br>
</body> </html>
使用 CSS 文件：
.tree * {margin: 0; padding: 0; }
body {
font-family: arial, verdana, tahoma;
font-size: 12px;
color: #666;
background-color:#fff;
}
.tree{
white-space:nowrap;
padding-bottom: 250px;
}
.tree ul {
padding-top: 5px; position: relative;
display: table;
margin: 0 auto;
font-size:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.tree li {
/*float: left; */
display:inline-block;
text-align: center;
list-style-type: none;
position: relative;
padding: 70px 5px 0 5px;
font-size: 12px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
/*We will use ::before and ::after to draw the connectors*/
.tree li::before, .tree li::after{
content: '';
position: absolute; top: 0; right: 50%;
border-top: 1px solid #ccc;
width: 50%; height: 70px;
}
.tree li::after{
right: auto; left: 50%;
border-left: 2px solid #ccc;
}
/*We need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after {
display: none;
}
/*Remove space from the top of single children*/
/*
.tree li:only-child{ padding-top: 0;}
*/
/*Remove left connector from first child and
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li li:last-child::before{
border-right: 2px solid #ccc;
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
}
.tree li li:only-child::before {
right: auto; left: 50%;
border-left: 2px solid #ccc;
border-right:none;
}
/*
.tree ul.p>li::before {
border:none;
content: '&';
left:0;
width:100%;
}
.tree ul.p>li::after{
content: '';
position: absolute; top: 0; right: 50%;
border-top: none;
width: 50%; height: 20px;
}
.tree ul.p>li::after{
border-left: none;
}
*/
/* Use pf to indicate that its a child of another family. */
.tree ul.pf>li::before {
right: auto; left: 50%;
border-left: 2px solid #ccc;
border-right:none;
}
.tree ul.pf>li::after{
content: '';
position: absolute; top: 0; right: 50%;
border-top: none;
width: 50%; height: 20px;
}
.tree ul.pf>li::after{
border-left: none;
}
/*Time to add downward connectors from parents*/
.tree ul.c {
padding-top: 70px;
}
.tree ul ul.c::before{
content: '';
position: absolute; top: 0; left: 50%;
border-left: 2px solid #ccc;
width: 0; height: 20px;
border: none;
}
.tree li a{
border: 1px solid #ccc;
padding: 0px;
text-decoration: none;
color: #666;
background-color:#fff;
/*background-image:url(circle.jpg)*/
/*color: #fff;
background-color:#999;*/
display: inline-block;
min-width:50px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
/* red border on contacts
.tree li a.o{
border: 1px solid #f66;
}
*/
.tree li a span{
display:block;
font-size: 10px;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
/*.tree li a.m:hover { background: #c8e4f8; color: #000; border: 1px solid #94a0b4; }
.tree li a.f:hover { background: #ffc0cb; color: #000; border: 1px solid #94a0b4; }
.tree li a:hover+ul li a.m { background: #c8e4fb; color: #000; border: 1px solid #94a0b4; }
.tree li a:hover+ul li a.f { background: #ffc0cb; color: #000; border: 1px solid #94a0b4; }
.tree li a.md:hover { background: #c8e4f8; color: #000; border: 1px solid #94a0b4; }
.tree li a.fd:hover { background: #ffc0cb; color: #000; border: 1px solid #94a0b4; }
.tree li a:hover+ul li a.md { background: #c8e4fb; color: #000; border: 1px solid #94a0b4; }
.tree li a:hover+ul li a.fd { background: #ffc0cb; color: #000; border: 1px solid #94a0b4; }*/
.tree li a.m{width:80px;height:80px;border-radius:15px;font-size:10px;color:#000;text-align:center;background: #c8e4fb; box-shadow:1px 1px 2px #000}
.tree li a.f{width:80px;height:80px;border-radius:50px;font-size:10px;color:#000;text-align:center;background: #ffc0cb; box-shadow:1px 1px 2px #000}
.tree li a.m_dead{width:80px;height:80px;border-radius:15px;font-size:10px;color:#000;text-align:center;background: #F1F9FE; box-shadow:1px 1px 2px #000}
.tree li a.f_dead{width:80px;height:80px;border-radius:50px;font-size:10px;color:#000;text-align:center;background: #FFF0F2;box-shadow:1px 1px 2px #000}
.tree li a.m_nolink{width:80px;height:80px;border-radius:15px;font-size:10px;color:#000;text-align:center;background: #c8e4fb; box-shadow:1px 1px 2px #000}
.tree li a.f_nolink{width:80px;height:80px;border-radius:50px;font-size:10px;color:#000;text-align:center;background: #ffc0cb; box-shadow:1px 1px 2px #000}
.tree li a.m_dead_nolink{width:80px;height:80px;border-radius:15px;font-size:10px;color:#000;text-align:center;background: #F1F9FE; box-shadow:1px 1px 2px #000}
.tree li a.f_dead_nolink{width:80px;height:80px;border-radius:50px;font-size:10px;color:#000;text-align:center;background: #FFF0F2;box-shadow:1px 1px 2px #000}
.tree li.marriage{ height:0px; border: 1px; border-style: solid; border-color: #000; color: #000; padding: 0 ; background: #FFF; }
.tree li.marriage::before{border: none}
.tree li.divorce{ height:0px; border: 2px; border-style: dashed; border-color: #000; color: #000; padding: 0 ; background: #FFF; }
.tree li.divorce::before{border: none}
.tree ul.pf>li.parent::before{border: none}
.tree ul.pf>li.parentWithAncestor::before{border-top: none;}
.tree div.person
{
display:inline-block;
vertical-align:central;
padding:20px 0px;
width:80px;
}
/*
.tree li a.m:hover{width:100px;height:100px;border-radius:15px;font-size:12px;color:#000;text-align:center;background: #c8e4fb; box-shadow:0 0 4px #222 inset}
.tree li a.f:hover{width:100px;height:100px;border-radius:50px;font-size:12px;color:#000;text-align:center;background: #ffc0cb; box-shadow:0 0 4px #222 inset}
.tree li a.m_dead:hover{width:100px;height:100px;border-radius:15px;font-size:12px;color:#000;text-align:center;background: #F1F9FE; box-shadow:0 0 4px #222 inset}
.tree li a.f_dead:hover{width:100px;height:100px;border-radius:50px;font-size:12px;color:#000;text-align:center;background: #FFF0F2; box-shadow:0 0 4px #222 inset}
*/
/*.tree li a.m { background: #c8e4f8; color: #000; border: 1px solid #94a0b4; }
.tree li a.f { background: #ffc0cb; color: #000; border: 1px solid #94a0b4; }
.tree li a.md { background: #c8e4f8; color: #000; border: 1px solid #94a0b4; }
.tree li a.fd { background: #ffc0cb; color: #000; border: 1px solid #94a0b4; }
.tree li a+ul li a.m { background: #c8e4fb; color: #000; border: 1px solid #94a0b4; }
.tree li a+ul li a.f { background: #ffc0cb; color: #000; border: 1px solid #94a0b4; }*/
/*Thats all. I hope you enjoyed it.
Thanks :)*/
我为你开始的，只是为了让你得到照片。你应该能够自己得到其余的。
<!DOCTYPE html>
<html><head><title>Diagram</title></head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1260" height="765">
<defs
id="defs4">
<linearGradient
id="linearGradient5189"
osb:paint="solid">
<stop
style="stop-color:#000000;stop-opacity:1;"
offset="0"
id="stop5191" />
</linearGradient>
</defs>
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1"
transform="translate(0,-287.36218)">
<rect
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:23.50000000000000000;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1;fill-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
id="rect2985"
width="236.3757"
height="236.3757"
x="125.25892"
y="132.6445"
transform="translate(0,287.36218)" />
<path
style="fill:none;stroke:#000000;stroke-width:23.88199997;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
d="M 246.47723,713.3291 245.60768,587.95193 244.45692,422.02699"
id="path5199"
sodipodi:nodetypes="ccc" />
<path
style="fill:none;stroke:#000000;stroke-width:25;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:75,25;stroke-dashoffset:105"
d="m 793.9799,471.04561 -545.48237,0"
id="path5246"
transform="translate(0,287.36218)" />
<path
sodipodi:type="arc"
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:25;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:105"
id="path5248"
sodipodi:cx="717.71338"
sodipodi:cy="259.41864"
sodipodi:rx="122.73354"
sodipodi:ry="122.73354"
d="m 840.44692,259.41864 a 122.73354,122.73354 0 1 1 -245.46708,0 122.73354,122.73354 0 1 1 245.46708,0 z"
transform="translate(68.690373,264.12867)" />
<path
style="fill:none;stroke:#000000;stroke-width:25;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
d="m 787.87838,398.79348 0,-72.73098"
id="path5250" />
<image
y="652.83923"
x="775.43933"
id="image5271"
xlink:href=
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAABiCAYAAAClDHhhAAAABHNCSVQICAgIfAhkiAAAAElJREFU
aIHtzUENACAMBLCDoGn+FWGBeSDZrzXQleRl2J4OJBKJRCKRSCQSiUQikUgkEolEIpFIJBKJRCKR
SCQSiUTy5VTVnU4aD+ADVQ9kdZUAAAAASUVORK5CYII=
"
height="117.1929"
width="25" />
<path
style="fill:none;stroke:#000000;stroke-width:26.86911964;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
d="m 245.97214,741.68118 0,16.7063"
id="path5274" />
<path
style="fill:none;stroke:#000000;stroke-width:25;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="m 126.65969,249.12565 234.84816,2.63875"
id="path5314"
transform="translate(0,287.36218)" />
</g>
</svg>
</body>
</html>