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