问构建步骤进度栏(css和jquery)

EN

下面是如何制作一个：

http://24ways.org/2008/checking-out-progress-meters

这里有一些鼓舞人心的例子：

http://www.smashingmagazine.com/2010/01/15/progress-trackers-in-web-design-examples-and-best-design-practices/

这就是我是如何使用纯CSS和HTML (没有JavaScript/图像等)来实现它的。

http://jsfiddle.net/tuPrn/

它在大多数浏览器中都会优雅地降级(我确实需要在

我所要做的就是使用与悬停按钮相同的技巧。准备一个包含两个部分的图像：(1)上半部分是灰色的，表示不完整，(2)下半部分是彩色的，表示完成。使用相同的图像4次组成进度条的4个步骤，对于未完成的步骤，请在顶部对齐，对于未完成的步骤，请在底部对齐。

为了利用图像对齐的优势，您必须使用图像作为4个div的背景，而不是使用img元素。

这是用于背景图像对齐的CSS：

div.progress-incomplete {
  background-position: top;
}
div.progress-finished {
  background-position: bottom;
}