family tree（族譜），也稱家譜，用來記錄家族世系繁衍輩份關係。本文結合例項，不借助任何js指令碼，使用純css打造乙個漂亮的family tree（族譜），也可以應用的企業組織架構圖中。
檢視演示
html
我們使用div#tree來包含整個族譜結構，內部以ul和li元素構建資料來源。實際開發中這些族譜資料來源可以從資料庫中讀取，就像得到乙個無限級的分類列表，以下是主要的html結構。
html**
<
divclass="tree"
>
<
ul>
<
li>
<
ahref="#"
>parent
a>
<
ul>
<
li>
<
ahref="#"
>child
a>
<
ul>
<
li>
<
ahref
="#"
>grand child
a>
li>
ul>
li>
<
li>
<
ahref="#"
>child
a>
<
ul>
<
li>
<
ahref="#"
>grand child
a>
li>
<
li>
<
ahref="#"
>grand child
a>
<
ul>
<
li>
<
ahref="#"
>great grand child
a>
li>
<
li>
<
ahref="#"
>great grand child
a>
li>
<
li>
<
ahref="#"
>great grand child
a>
li>
ul>
li>
<
li>
<
ahref="#"
>grand child
a>
li>
ul>
li>
ul>
li>
ul>
div>
css我們使用css中的 :before、:after 兩個偽類的content屬性來構建元素間的連線線，同時使用了css3實現元素的圓角效果，並加上了滑鼠滑上hover效果，這樣滑鼠滑向族譜中的乙個 節點元素，與之相關的後輩元素都會有hover效果，完整的css**如下：
html**
.tree ul
.tree li
/*we will use ::before and ::after to draw the connectors*/
.tree li::before, .tree li::after
.tree li::after
/*we need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after, .tree li:only-child::before
/*remove space from the top of single children*/
.tree li:only-child
/*remove left connector from first child and
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after
/*adding back the vertical connector to the last nodes*/
.tree li:last-child::before
.tree li:first-child::after
/*time to add downward connectors from parents*/
.tree ul ul::before
.tree li a
/*time for some hover effects*/
.tree li a:hover, .tree li a:hover+ul li a
/*connector styles on hover*/
.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before
純CSS打造Flow Steps導航
幾個要點 1.三角箭頭效果是用border實現的,詳細的可以google下css 三角 2.ie6下不支援border color transparent 透明 解決方法是先將其設定為乙個不常用的顏色,然後再用ie的濾鏡將其透明化 demo中有注釋 3.每個step之間的白色間隙為了等距所以處理比較...
純CSS打造可折疊樹狀選單
1 html 下級 下級下級 無限級無限級 無限級無限級 無限級無限級 實現的思路是運用checkbox的checked值來判斷下級欄目是否展開，css3的選擇器中提供了 checked 這個偽類，這個偽類提供我們，當元素擁有checked這個值的時候就執行你的css。很強大是吧。有了css3我們會...
純 CSS 打造 Flow Steps 麵包屑導航
flow steps 導航效果常用於需要表示執行步驟的互動頁面，效果圖如下 通常使用來實現 flow steps 效果，但此方法的靈活性不足，當內容變化較大時就可能需要重新切圖，這裡介紹使用純 css 的方法來實現 flow steps 效果 此版本相容主流的瀏覽器 ie6 7 8 ff chrom...