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

互联网 18-10-23

本篇文章给大家带来的内容是介绍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>

以上就是css+html如何实现物流进度样式（代码示例）的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：物流进度