由于項(xiàng)目要做一個充值功能，看京東的手機(jī)充值進(jìn)度條導(dǎo)航覺得還不錯

于是模仿他做了一個，不過沒搞那么復(fù)雜，不分那么多顏色了。通過分析可以看出此進(jìn)度導(dǎo)航關(guān)鍵在于每個li右邊的箭頭，這個可以用css的:after選擇器搞定，記住不要用::after這種寫法，這種寫法在IE8下會失效的，至于IE8以前的IE瀏覽器則不能正確的還原我想要的效果，不知道哪位大神可以教一下我如何在IE8以前正確的使用:after選擇器。

　　首先定義一個ul樣式progress-nav：

其中l(wèi)ist-style:none是用于消除ul每個li前面的小圓點(diǎn)的，overflow:hidden是為了美觀的，當(dāng)瀏覽器寬度不足以放下li里的文字的時候把放不下的文字直接隱藏掉。接下來就定義每個li的樣式：

li采用相對定位，向左浮動，此演示用三個li，所以li的寬度定義為32%，這個可以根據(jù)li的個數(shù)自行修改的，也可以把寬度寫死，足以放下文字就好。

　　接下來到了關(guān)鍵時候了，要定義偽元素:after了

給偽元素設(shè)為絕對定位（相當(dāng)于母節(jié)點(diǎn)li），邊框定義為實(shí)線，邊框顏色定義為透明的，其實(shí)也就是看到的是父節(jié)點(diǎn)的顏色，border-width是關(guān)鍵，這個定義了三角形的形狀，15px的兩倍30px即為導(dǎo)航條也即偽元素的高，12px的兩倍24px即為偽元素的寬，border-left-color也是邊框的左部分的顏色也就是我們看到的三角形的顏色，矩形的左邊框也就是矩形的左上角和左下角以及中心連成的三角形，三角形做好后得把他移到li的外面去呀，所以right向右偏移偽元素矩形的寬24px，可是這樣做好后你會發(fā)現(xiàn)什么效果都沒有，這時content就派上用場了，去w3c學(xué)習(xí)一下可以知道，content是配合:before和:after偽元素使用的，用來插入生成內(nèi)容，可是這樣做了你會發(fā)現(xiàn)媽蛋還是沒效果，別急，那是因?yàn)閭卧乇幌乱粋€li給擋住視線了，所以才要加個z-index把偽元素反覆蓋下一個li。

　　說了那么多，口水都干了，先來個效果圖吧

　　你一下子就可以發(fā)現(xiàn)，這樣還是不行呀，因?yàn)?.確認(rèn)訂單信息和3.支付之間神馬都木有，別急，其實(shí)處理很簡單，那就在兩個li之間加個白線呀，這樣的話需要在首個li后的每個li加個span：

然后給這些span定義樣式：

span的樣式和偽元素:after長的差不多，不過顏色不一樣，span的左邊框顏色是白色的，同時他絕對定位母li左邊右移兩個像素，這兩個像素就會是我們看到我li之間的白條了，如果想白條寬一點(diǎn)就加大span的left值就可以了。

　　這些完成以后就差當(dāng)前活動的li的樣式了，給那個li變個藍(lán)色就好了：

　　同時這個li的右邊的偽元素:after也要相應(yīng)的修改顏色：

　　好了，總算完成了，來張效果圖吧，IE9以上的IE和其他大部分瀏覽器下長這樣

　　IE8下長這樣

　　IE7以下的IE就不要看了，負(fù)責(zé)任的告訴你，真的不是我想要的

　　最后附上樣式類progress.css吧，方便大家查看：

.progress-nav {    height: 30px;    margin-bottom: 10px;    list-style:none;    line-height: 30px;    text-align: center;    color: #7a91b2;    overflow: hidden;}    .progress-nav li.active {        color: #fff;        background: #5495ec;    }    .progress-nav li {        position: relative;        float: left;        width: 32%;        background: #bdcee6;    }        .progress-nav li:after {            content: "";            position: absolute;            border: solid transparent;            border-left-color: #bdcee6;            border-width: 15px 12px;            right: -24px;            z-index: 100;        }        .progress-nav li.active:after {            border-left-color: #5495ec;        }.progress-nav span {    position: absolute;    border: solid transparent;    border-left-color: #fff;    border-width: 15px 12px;    left: 2px;}

　　網(wǎng)頁上就比較簡單：

    <ul class="progress-nav">        <li class="active">            1.填寫訂單信息        </li>        <li>            <span></span>            2.確認(rèn)訂單信息        </li>        <li>            <span></span>            3.支付        </li>    </ul>

　　最后給伸手黨附上示例代碼吧：進(jìn)度導(dǎo)航示例