步骤条

<div class="step-wrap"> <div class="step-bg"></div> <div class="step-progress"></div> <div class="step"> <div class="step-item active"> <div class="step-num">1</div> <div class="step-title">账户信息</div> </div> <div class="step-item"> <div class="step-num">2</div> <div class="step-title">付款信息</div> </div> <div class="step-item"> <div class="step-num">3</div> <div class="step-title">确认信息</div> </div> </div> </div>

位置

<div class="step-wrap step-bottom"> <div class="step-bg"></div> <div class="step-progress"></div> <div class="step"> <div class="step-item active"> <div class="step-title">账户信息</div> <div class="step-num">1</div> </div> <div class="step-item active"> <div class="step-title">付款信息</div> <div class="step-num">2</div> </div> <div class="step-item"> <div class="step-title">确认信息</div> <div class="step-num">3</div> </div> </div> </div>

颜色

<div class="step-wrap step-bottom step-red"> <div class="step-bg"></div> <div class="step-progress"></div> <div class="step"> <div class="step-item active"> <div class="step-title">账户信息</div> <div class="step-num">1</div> </div> <div class="step-item"> <div class="step-title">付款信息</div> <div class="step-num">2</div> </div> <div class="step-item"> <div class="step-title">确认信息</div> <div class="step-num">3</div> </div> </div> </div> <br> <div class="step-wrap step-bottom step-yellow"> <div class="step-bg"></div> <div class="step-progress"></div> <div class="step"> <div class="step-item active"> <div class="step-title">账户信息</div> <div class="step-num">1</div> </div> <div class="step-item active"> <div class="step-title">付款信息</div> <div class="step-num">2</div> </div> <div class="step-item"> <div class="step-title">确认信息</div> <div class="step-num">3</div> </div> </div> </div> <br> <div class="step-wrap step-bottom step-green"> <div class="step-bg"></div> <div class="step-progress"></div> <div class="step"> <div class="step-item active"> <div class="step-title">账户信息</div> <div class="step-num">1</div> </div> <div class="step-item active"> <div class="step-title">付款信息</div> <div class="step-num">2</div> </div> <div class="step-item active"> <div class="step-title">确认信息</div> <div class="step-num">3</div> </div> </div> </div> <br> <div class="step-wrap step-bottom step-info"> <div class="step-bg"></div> <div class="step-progress"></div> <div class="step"> <div class="step-item active"> <div class="step-title">账户信息</div> <div class="step-num">1</div> </div> <div class="step-item active"> <div class="step-title">付款信息</div> <div class="step-num">2</div> </div> <div class="step-item"> <div class="step-title">确认信息</div> <div class="step-num">3</div> </div> </div> </div>

Js调用

<br> <div id="step-1"></div> <br> <div id="step-2"></div> <br> <div id="step-3"></div> <div style="background:linear-gradient(#fff,#f9f9f9);margin-top:-10px;padding:20px 30px;border:1px solid #eaeaea;border-radius:6px;font-size:15px;position:relative;box-shadow:1px 2px 10px rgba(0,0,0,0.1);z-index:0;"> 您的订单已发货 </div> <script> $(function(){ $("#step-1").step({data:['下单','付款','发货','收货','完成'],index:1}) $("#step-2").step({data:['下单','付款','发货','收货','完成'],index:2,theme:'red'}) $("#step-3").step({data:['下单','付款','发货','收货','完成'],index:3,theme:'info',align:'bottom','arrow':true}) }) </script>