武林網(www.49028c.com)文章簡介：網頁進度條設計:全兼容且自適應的進度條.

在了解這些基本信息后，我們還需要關注：

這些條件有助于我們所作出的東西更加優秀。

先看一下我們以前的做法：

此做法使用了一張背景圖片。

那能否做出一種全兼容且自適應的進度條呢？

答案是有的，在經歷過多次失敗后，終于尋到了解決方案­—table。

移步Demo>>

HTML代碼：

CSS代碼：

三種基本狀態：默認、當前、已完成，在TD標簽上都一一對應。除第一步沒加<div class=”tri”>尖角標簽，其他步驟內部均一摸一樣。

此做法的優越性在于其擴展性以及易于維護性，同樣的效果，不同的實現方式，它的可維護、可擴展等等特性是不大相同的。