仿京東手機充值進度導航

　　因爲項目要作一個充值功能，看京東的手機充值進度條導航以爲還不錯

因而模仿他作了一個，不過沒搞那麼複雜，不分那麼多顏色了。經過分析能夠看出此進度導航關鍵在於每一個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>

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