纯CSS实现订单流程步骤

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

分类：导航菜单 > 分类导航难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的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>