网页进度条设计:全兼容且自适应的进度条

在做这个东西之前，我们需要了解基本的信息：

• 是否为静态加载？（是）
• 有多少种状态？（三种基本状态：默认、当前、已完成）
• 是否使用JS程序实现状态的更改？（否）
• 使用的频率？（高）
• 更新的频率？（低）

1. 效果的完整性
2. 性能的优越性
3. 代码的可移植性及复用
4. 兼容性
5. 易维护
6. 易扩展

这些条件有助于我们所作出的东西更加优秀。

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

此做法使用了一张背景图片。

• 效果的完整性（很好的展示了其效果）
• 性能的优越性（使用了ul，li的结构，结构简单，代码清晰，图片大小2K左右，性能相当优越）
• 代码的可移植性及复用（一塌糊涂啊，当步骤多或者少时都不能使用这个图片，需再做一张图片）
• 兼容性（这个结构，兼容性相当的好呀，任何浏览器都不会出现问题）
• 易维护（当修改内部文字时，相当方便，当增加或减少步骤是，对不起，又坑爹了）
• 易扩展（纯图片做的东西，基本没啥扩展性）

那能否做出一种全兼容且自适应的进度条呢？

答案是有的，在经历过多次失败后，终于寻到了解决方案­—table。

移步Demo>>

HTML代码：

CSS代码：

三种基本状态：默认、当前、已完成，在TD标签上都一一对应。除第一步没加<div class=”tri”>尖角标签，其他步骤内部均一摸一样。

• 效果的完整性（同样很好的展示了其效果）
• 性能的优越性（使用了table的结构且内部有嵌套，比ul，li结构稍微复杂，图片大小不足1k，总体来说性能上相当不错。）
• 代码的可移植性及复用（当步骤多或者少时，自行添加TD即可，可满足任意要求，适用于任意地方）
• 兼容性（兼容IE6及其他浏览器是必须的）
• 易维护（维护起来相当方便）
• 易扩展（扩展性极强）

此做法的优越性在于其扩展性以及易于维护性，同样的效果，不同的实现方式，它的可维护、可扩展等等特性是不大相同的。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!