纯CSS实现订单流程步骤

纯CSS实现订单流程步骤

纯CSS实现订单流程步骤

一款纯CSS实现的订单流程步骤,可以点击分步步骤的序号来切换不同的步骤内容,步骤内容可以自由更换且宽度自适应,喜欢的童鞋请收下吧。

源码介绍

页面的head部分,需引入必要的样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="css/style.css"/>

               

页面的body部分,用了多个div容器的嵌套和排列,代码如下:

<div class='progress'> 
  <div class='progress_inner'> 
    <div class='progress_inner__step'> 
      <label for='step-1'>核实订单</label> 
    </div> 
    <div class='progress_inner__step'> 
      <label for='step-2'>准备礼物</label> 
    </div> 
    <div class='progress_inner__step'> 
      <label for='step-3'>打包礼物</label> 
    </div> 
    <div class='progress_inner__step'> 
      <label for='step-4'>装饰盒子</label> 
    </div> 
    <div class='progress_inner__step'> 
      <label for='step-5'>派送礼物</label> 
    </div> 
    <input checked='checked' id='step-1' name='step' type='radio'> 
    <input id='step-2' name='step' type='radio'> 
    <input id='step-3' name='step' type='radio'> 
    <input id='step-4' name='step' type='radio'> 
    <input id='step-5' name='step' type='radio'> 
    <div class='progress_inner__bar'></div> 
    <div class='progress_inner__bar--set'></div> 
    <div class='progress_inner__tabs'> 
      <div class='tab tab-0'> 
        <h1>核实订单</h1> 
        <p>根据网店客户的下单顺序,依次罗列出需要准备的礼物清单,并把清单递交至仓库。</p> 
      </div> 
      <div class='tab tab-1'> 
        <h1>准备礼物</h1> 
        <p>仓库根据订货清单,分别准备好每个客户的礼物,待下一个流程打包操作。</p> 
      </div> 
      <div class='tab tab-2'> 
        <h1>打包礼物</h1> 
        <p>按照订单的先后顺序,依次打包每个礼物,并按一定的顺序排放整齐。</p> 
      </div> 
      <div class='tab tab-3'> 
        <h1>装饰盒子</h1> 
        <p>根据每个客户的要求,来装饰礼物的包装盒子,装饰完成后拍照存档并发给客户,这一步需要客户的点评哦。</p> 
      </div> 
      <div class='tab tab-4'> 
        <h1>派送礼物</h1> 
        <p>按照订单上的地址,分别将礼物进行同城派送出去。</p> 
      </div> 
    </div> 
    <div class='progress_inner__status'> 
      <div class='box_base'></div> 
      <div class='box_lid'></div> 
      <div class='box_ribbon'></div> 
      <div class='box_bow'> 
        <div class='box_bow__left'></div> 
        <div class='box_bow__right'></div> 
      </div> 
      <div class='box_item'></div> 
      <div class='box_tag'></div> 
      <div class='box_string'></div> 
    </div> 
  </div> 
</div>


分享到 :
网站文字简体繁体切换js代码
上一篇 2018-05-05 14:59:37
关键字标签云球状3D旋转js效果
2018-05-05 15:14:17 下一篇

发表评论

登录... 后才能评论