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、查看效果。这里因为是用的多个展示。后面做程序可以隐藏。
