flow-steps 導航效果常用於需要表示執行步驟的互動頁面，效果圖如下：
通常使用來實現 flow-steps 效果，但此方法的靈活性不足，當內容變化較大時就可能需要重新切圖，這裡介紹使用純 css 的方法來實現 flow-steps 效果：
此版本相容主流的瀏覽器（ie6、7、8… ff、chrome），但也因此導致 html 結構比較複雜，並且使用了 ie 的濾鏡，先看下 demo：
步驟一步驟二
步驟三
iinterest.net
因 ie6 下不支援 border-color:transparent，解決方法是先將其設定為乙個不常用的顏色，然後再用ie的濾鏡將其透明化（demo 中有注釋）
使用了 css3 的版本，html **就要簡潔很多，因為使用了偽元素來替代一些無意義的標籤，同時也實現 :hover 效果，缺點就是不相容 ie6。
步驟二
步驟三iinterest.net
純CSS打造Flow Steps導航
幾個要點 1.三角箭頭效果是用border實現的,詳細的可以google下css 三角 2.ie6下不支援border color transparent 透明 解決方法是先將其設定為乙個不常用的顏色,然後再用ie的濾鏡將其透明化 demo中有注釋 3.每個step之間的白色間隙為了等距所以處理比較...
純CSS打造的Family tree（族譜）
family tree 族譜 也稱家譜，用來記錄家族世系繁衍輩份關係。本文結合例項，不借助任何js指令碼，使用純css打造乙個漂亮的family tree 族譜 也可以應用的企業組織架構圖中。檢視演示 html 我們使用div tree來包含整個族譜結構，內部以ul和li元素構建資料來源。實際開發中...
純CSS打造可折疊樹狀選單
1 html 下級 下級下級 無限級無限級 無限級無限級 無限級無限級 實現的思路是運用checkbox的checked值來判斷下級欄目是否展開，css3的選擇器中提供了 checked 這個偽類，這個偽類提供我們，當元素擁有checked這個值的時候就執行你的css。很強大是吧。有了css3我們會...