div+css制作箭头展示步骤流程
1、整理制作好的背景图片和需要用上的背景。
2、新建html文档。
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>
4、书写css样式。
<style>
* { margin: 0; padding: 0; list-style-type: none; }
a, img { border: 0; }
body { font: 12px/180% Arial, Helvetica, sans-serif, "宋体"; }
.demo { margin: 0 auto; width: 600px; }
.demo .main-flow { margin: 20px 0 0 0; }
/* main-flow */
.main-flow li,.main-flow li.first, .main-flow li a, .main-flow li.last a, .main-flow .current, .main-flow .first-current, .main-flow .last-current, .main-flow .first-current, .main-flow .current a, .main-flow .first-current a, .main-flow .last-current a, .main-flow .last-current a { background: url(images/stepflow.png) no-repeat }
.main-flow { overflow: hidden; zoom: 1; height: 28px; }
.main-flow a { font-size: 12px; font-weight: 600; text-decoration: none; color: #fff; }
.main-flow li { float: left; position: relative; z-index: 9; background-position: left -164px; line-height: 1.0; }
.main-flow li.first { background-position: left -4px; }
.main-flow li a { display: block; float: left; position: relative; z-index: 10; height: 21px; margin: 0 -15px 0 0; padding: 7px 25px 0; line-height: 12px; background-position: right -204px; }
.main-flow li.first a { padding: 7px 25px 0 15px; }
.main-flow li.last a { background-position: right -84px; }
.main-flow .current, .main-flow .first-current, .main-flow .last-current { position: relative; z-index: 11; background-position: left -244px; }
.main-flow .first-current { background-position: left -44px; }
.main-flow .current a, .main-flow .first-current a, .main-flow .last-current a { color: #427c9b; position: relative; z-index: 12; background-position: right -284px; }
.main-flow .first-current a { padding: 7px 25px 0 15px; }
.main-flow .last-current a { background-position: right -124px; }
</style>
5、查看效果。这里因为是用的多个展示。后面做程序可以隐藏。
