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

2020-11-02 来源：个人技术集锦

本篇文章给大家带来的内容是介绍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如何实现物流进度样式（代码示例）