步骤条 CSS样式
在这里记录一个手写的步骤条，先看效果
重点就是，进度条与步骤div的宽保持一致，比如完成了第一步，就是进度条的width就是22%，完成了第二步，就是44%，当然这个是可以自由调整的
HTML代码
1 <div class="step-div">
2 <div class="eis-horizontal-steps">
3 <div class="eis-form-steps">
4 <div class="eis-form-step is-finish" style="width:22%;margin-left: 4%">
5 <div class="eis-step-head">
6 <div class="eis-step-icon">
7 <div class="step-icon-txt">1div>
8 div>
9 <div class="eis-step-line">
10 div>
11 div>
12 <div class="eis-step-main">填写基本信息div>
13 div>
14 <div class="eis-form-step is-finish" style="width:22%">
15 <div class="eis-step-head">
16 <div class="eis-step-icon">
17 <div class="step-icon-txt">2div>
18 div>
19 <div class="eis-step-line">
20 div>
21 div>
22 <div class="eis-step-main">获取报价信息div>
23 div>
24 <div class="eis-form-step" style="width:22%">
25 <div class="eis-step-head">
26 <div class="eis-step-icon">
27 <div class="step-icon-txt">3div>
28 div>
29 <div class="eis-step-line">
30 div>
31 div>
32 <div class="eis-step-main">确认投保div>
33 div>
34 <div class="eis-form-step" style="width:22%">
35 <div class="eis-step-head">
36 <div class="eis-step-icon">
37 <div class="step-icon-txt">4div>
38 div>
39 <div class="eis-step-line">
40 div>
41 div>
42 <div class="eis-step-main">支付订单div>
43 div>
44 <div class="eis-form-step" style="width:8%">
45 <div class="eis-step-head">
46 <div class="eis-step-icon">
47 <div class="step-icon-txt">5div>
48 div>
49 div>
50 <div class="eis-step-main">生成保单div>
51 div>
52 <div class="eis-step-progress">div>
53 div>
54 div>
55 div>
CSS样式
1
参考链接：jquery步骤条step插件