如何制作“一步一步”的元素？

Question

我有兴趣了解如何制作“一步一步”元素（对不起，我不知道它实际上是什么叫）。一个例子是：http://www.downloadweb.org/join.php我想知道如何制作这个3步元素。有谁知道我可以在哪里找到更多信息？

Answer 1

您在示例中链接到的网站是通过创建3张图片完成此操作的 - 向导的每个“页面”都有1张。

您只需要：

a）3页，其中嵌入了该页面的正确图像（或者，如您的示例所示，1个脚本呈现正确的页面）
b）1页，根据您所在的向导的哪个阶段动态更改图像src。这可以通过jQuery轻松完成 - 有很多例子。

Answer 2

只需将它们视为3个不同的页面即可。您必须制作6张图像（每个步骤2个，一个活动，一个不活动）。然后在每个页面设置正确的类。

Answer 3

你的意思是表格上方的3步横幅吗？这是使用3个不同的图像创建的。

您还可以在浏览器中分析网站。在Internet Explorer和Google Chrome中，您可以点击F12。对于Firefox，您可以安装“FireBug”扩展。 然后，您可以看到HTML，脚本和样式表以及您正在查看的网站的所有内容。

Answer 4

创建 3 图片（不是6）：

  

bar_step_1.png   bar_step_2.png   bar_step_3.png

然后制作div或其他内容：

<div class="pager step_1">...</div>

在你的CSS中：

div.pager {
    height: ...px;
    width: ...px;
}

div.pager.step_1 {
    background-image: url(bar_step_1.png);
}