div+css制作箭头展示步骤流程

1、整理制作好的背景图片和需要用上的背景。

3、书写html代码。<div class="demo"> <ol class="main-flow"> <li class="first-current"><a href="#s1-1">第1步</a></li> <li><a href="#s1-2">第2步</a></li> <li><a href="#s1-3">第3步</a></li> <li><a href="#s1-4">第4步</a></li> <li><a href="#s1-5">第5步</a></li> <li class="last"><a href="#s1-6">成功</a></li> </ol> <ol class="main-flow"> <li class="first"><a href="#s1-1">第1步</a></li> <li class="current"><a href="#s1-2">第2步</a></li> <li><a href="#s1-3">第3步</a></li> <li><a href="#s1-4">第4步</a></li> <li><a href="#s1-5">第5步</a></li> <li class="last"><a href="#s1-6">成功</a></li> </ol> <ol class="main-flow"> <li class="first"><a href="#s1-1">第1步</a></li> <li><a href="#s1-2">第2步</a></li> <li class="current"><a href="#s1-3">第3步</a></li> <li><a href="#s1-4">第4步</a></li> <li><a href="#s1-5">第5步</a></li> <li class="last"><a href="#s1-6">成功</a></li> </ol> <ol class="main-flow"> <li class="first"><a href="#s1-1">第1步</a></li> <li><a href="#s1-2">第2步</a></li> <li><a href="#s1-3">第3步</a></li> <li class="current"><a href="#s1-4">第4步</a></li> <li><a href="#s1-5">第5步</a></li> <li class="last"><a href="#s1-6">成功</a></li> </ol> <ol class="main-flow"> <li class="first"><a href="#s1-1">第1步</a></li> <li><a href="#s1-2">第2步</a></li> <li><a href="#s1-3">第3步</a></li> <li><a href="#s1-4">第4步</a></li> <li class="current"><a href="#s1-5">第5步</a></li> <li class="last"><a href="#s1-6">成功</a></li> </ol> <ol class="main-flow"> <li class="first"><a href="#s1-1">第1步</a></li> <li><a href="#s1-2">第2步</a></li> <li><a href="#s1-3">第3步</a></li> <li><a href="#s1-4">第4步</a></li> <li><a href="#s1-5">第5步</a></li> <li class="last-current"><a href="#s1-6">成功</a></li> </ol></div>

5、查看效果。这里因为是用的多个展示。后面做程序可以隐藏。