模仿淘寶-導航式訂單跟蹤css簡單實現

一時心血來潮，在淘寶買了個寶貝，看到淘寶的訂單跟蹤狀態做的很好，正好可以用在自己的小項目上練練手。特將淘寶的圖片copy了下來。

 

用Firefox的firebug偷學到了一點點技巧，自己動手慢慢試了試，終於做出了點摸樣，特貼出來分享一下，日後些許有可用之處。

html頁面主要布局如下

<div class="logistics"><table cellpadding="0" cellspacing="0" align="center" width="100%"><tr><td align="center" height="30">填寫使用者資訊</td><td align="center">綁定銀行卡號</td><td align="center">開戶成功</td></tr><tr><td class="step-no1"></td><td class="step-no2"></td><td class="step-no3"></td></tr></table></div>

通過css控制，第一種狀態：

.step-no1,.step-no2,.step-no3{    height:35px;    }    .step-no1 {    background: url("images/T1ze0ZXA0aXXcVlxZa-734-340.png") no-repeat scroll 50% -33px rgba(0,0,0,0);    }    .step-no2 {    background: url("images/T1ze0ZXA0aXXcVlxZa-734-340.png") no-repeat scroll 50% -101px rgba(0,0,0,0);    }    .step-no3 {    background: url("images/T1ze0ZXA0aXXcVlxZa-734-340.png") no-repeat scroll 50% -135px rgba(0,0,0,0);    }

效果如下：

第二種狀態，相應的css應改為：

.step-no1 {    background: url("images/T1ze0ZXA0aXXcVlxZa-734-340.png") no-repeat scroll 50% -203px rgba(0,0,0,0);    }    .step-no2 {    background: url("images/T1ze0ZXA0aXXcVlxZa-734-340.png") no-repeat scroll 50% 1px rgba(0,0,0,0);    }    .step-no3 {    background: url("images/T1ze0ZXA0aXXcVlxZa-734-340.png") no-repeat scroll 50% -135px rgba(0,0,0,0);    }

效果如下

 

第三種狀態，css設定如下：

.step-no1 {    background: url("images/T1ze0ZXA0aXXcVlxZa-734-340.png") no-repeat scroll 50% -203px rgba(0,0,0,0);    }    .step-no2 {    background: url("images/T1ze0ZXA0aXXcVlxZa-734-340.png") no-repeat scroll 50% -169px rgba(0,0,0,0);    }    .step-no3 {    background: url("images/T1ze0ZXA0aXXcVlxZa-734-340.png") no-repeat scroll 50% -67px rgba(0,0,0,0);    }

效果如下：

這樣設計比較簡單，只需要每次定位需要“哪一行”的圖片就好了，內容僅供參考，互相學習之用。