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

于是模仿他做了一個,不過沒搞那么復雜,不分那么多顏色了。通過分析可以看出此進度導航關鍵在于每個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>
最后給伸手黨附上示例代碼吧:進度導航示例
浙公網安備 33010602011771號