css+html如何实现物流进度样式(代码示例)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是介绍css+html如何实现物流进度样式(代码示例),有需要的朋友可以参考一下,希望对你们有所帮助。

效果:

css+html如何实现物流进度样式(代码示例)

css样式:

<style type="text/css">         ul li {             list-style: none;         }                  .package-status {             padding: 18px 0 0 0         }                  .package-status .status-list {             margin: 0;             padding: 0;             margin-top: -5px;             padding-left: 8px;             list-style: none;         }                  .package-status .status-list>li {             border-left: 2px solid #0278D8;             text-align: left;         }                  .package-status .status-list>li:before {             /* 流程点的样式 */             content: '';             border: 3px solid #0278D8;             background-color: #0278D8;             display: inline-block;             width: 6px;             height: 6px;             border-radius: 10px;             margin-left: -7px;             margin-right: 10px         }                  .package-status .status-box {             overflow: hidden         }                  .package-status .status-list>li {             height: auto;             width: 95%;         }                  .package-status .status-list {             margin-top: -8px         }                  .package-status .status-box {             position: relative         }                  .package-status .status-box:before {             content: " ";             background-color: #f3f3f3;             display: block;             position: absolute;             top: -8px;             left: 20px;             width: 10px;             height: 4px         }                  .package-status .status-list {             margin-top: 0px;         }                  .status-list>li:not(:first-child) {             padding-top: 10px;         }                  .status-content-before {             text-align: left;             margin-left: 25px;             margin-top: -20px;         }                  .status-content-latest {             text-align: left;             margin-left: 25px;             color: #0278D8;             margin-top: -20px;         }                  .status-time-before {             text-align: left;             margin-left: 25px;             font-size: 10px;             margin-top: 5px;         }                  .status-time-latest {             text-align: left;             margin-left: 25px;             color: #0278D8;             font-size: 10px;             margin-top: 5px;         }                  .status-line {             border-bottom: 1px solid #ccc;             margin-left: 25px;             margin-top: 10px;         }                  .list {             padding: 0 20px;             background-color: #F8F8F8;             margin: 10px 0 0 25px;             border: 1px solid #EBEBEB;         }                  .list li {             line-height: 30px;             color: #616161;         }     </style>

HTML:

<body>     <p class="package-status">         <p class="status-box">             <ul class="status-list">                 <li>                     <p class="status-content-before">您的订单开始处理</p>                     <p class="status-time-before">2017-08-17 23:31 周四</p>                     <p class="status-line"></p>>                 </li>                 <li>                     <p class="status-content-before">卖家发货</p>                     <p class="status-time-before">2017-08-18 09:11 周五</p>                     <p class="status-line"></p>                 </li>                 <li>                     <p class="status-content-before">发往深圳中转站</p>                     <p class="status-time-before">2017-08-19 01:21 周六</p>                     <p class="status-line"></p>                 </li>                 <li>                     <p class="status-content-before">到达深圳</p>                     <p class="status-time-before">2017-08-19 06:21 周六</p>                     <p class="status-line"></p>                 </li>                 <li>                     <p class="status-content-before">发往潮汕中心</p>                     <p class="status-time-before">2017-08-19 09:21 周六</p>                     <p class="status-line"></p>                 </li>                 <li class="latest">                     <p class="status-content-latest">快件到达 潮汕中心</p>                     <p class="status-time-latest">2017-08-20 14:16 周日</p>                     <p class="status-line"></p>                 </li>             </ul>         </p>     </p>  </body>
本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » css+html如何实现物流进度样式(代码示例)

发表评论

提供最优质的资源集合

立即查看 了解详情