仿京東手機充值進度導航

　　由于項目要做一個充值功能，看京東的手機充值進度條導航覺得還不錯

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

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

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

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

　　接下來到了關鍵時候了，要定義偽元素:after了

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

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

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

然后給這些span定義樣式：

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

　　這些完成以后就差當前活動的li的樣式了，給那個li變個藍色就好了：

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

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

　　IE8下長這樣

　　IE7以下的IE就不要看了，負責任的告訴你，真的不是我想要的

　　最后附上樣式類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;
}

　　網頁上就比較簡單：

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

　　最后給伸手黨附上示例代碼吧：進度導航示例