如何使用純CSS3來生成家譜（family tree）

日期：2012-7-28  來源：GBin1.com

今天咱們將要介紹的是如何在不使用Flash和JavaScript的 狀況下，用純CSS來完成一個可組織數據或者家譜。這裏使用一個很是簡單的標籤 - 嵌套列表li。 其中僞元素用於繪製之間家庭成員關係，它還具備懸停的效果 - 用在顯示整個家族圖譜中。 [5月1日，2012年]注：此版本爲當前最新版本，並支持IE瀏覽，若是家族中有更多的成員，也能夠輕鬆的加入。但願你們喜歡這個CSS實現的家族圖 譜，固然你也能夠使用它來生成一個組織結構圖

在線演示 

HTML代碼 

<!--
We will create a family tree using just CSS(3)
The markup will be simple nested lists
-->
<div class="tree">
	<ul>
		<li>
			<a href="#">Parent</a>
			<ul>
				<li>
					<a href="#">Child</a>
					<ul>
						<li>
							<a href="#">Grand Child</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">Child</a>
					<ul>
						<li><a href="#">Grand Child</a></li>
						<li>
							<a href="#">Grand Child</a>
							<ul>
								<li>
									<a href="#">Great Grand Child</a>
								</li>
								<li>
									<a href="#">Great Grand Child</a>
								</li>
								<li>
									<a href="#">Great Grand Child</a>
								</li>
							</ul>
						</li>
						<li><a href="#">Grand Child</a></li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>

CSS代碼

...........

來源：如何使用純CSS3來生成家譜（family tree）