纯CSS实现订单流程步骤

纯CSS实现订单流程步骤

添加时间:2021-02-26 07:56:53
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:分类导航
  • 模板颜色模板颜色:初级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

一款纯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>
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:纯CSS实现订单流程步骤

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.099627s