- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
- <style>
- body,
- html {
- background-color: #f2f2f2;
- }
- ul,li{
- list-style: none;
- }
- .order_track {
- background-color: #fff;
- margin-bottom: 0.5em;
- padding: 0.5em;
- }
- .order_track p {
- font-size: 1.0em;
- line-height: 1.5;
- color: #666;
- margin-bottom: 0;
- }
- .order_track p span {
- color: #333;
- }
- .order_logistics{
- padding-left: 2.0em;
- background-color: #fff;
- }
- .order-flow {
- padding-left: 0em;
- padding-bottom: 1.0em;
- position: relative;
- }
- .order-flow:before{
- content: '';
- position: absolute;
- width: 200%;
- height: 200%;
- border-left: 1px solid rgb(230, 230, 230);/* 直接改变border的位置即可 */
- -webkit-transform-origin: 0 0;
- transform-origin: 0 0;
- -webkit-transform: scale(0.5, 0.5);
- transform: scale(0.5, 0.5);
- box-sizing: border-box;
- }
- .of-storey li {
- position: relative;
- padding: 10px;
- /* border-bottom: 1px solid #e8e5e5; */
- }
- .of-storey li:after{
- content: " ";
- position: absolute;
- left: 0;
- width: 100%;
- height: 1px;
- bottom: 0;
- border-bottom: 1px solid rgb(230, 230, 230);
- -webkit-transform-origin: 0 100%;
- transform-origin: 0 100%;
- -webkit-transform: scaleY(.5);
- transform: scaleY(.5);
- }
- .of-storey li span {
- display: block;
- font-size: 1.0em;
- color: #666;
- }
- .of-storey li span.time {
- font-size: 0.9em;
- color: #999;
- }
- .of-storey li .icon {
- position: absolute;
- top: 45%;
- left: -2.75em;
- width: 9px;
- height: 9px;
- border-radius: 5px;
- background-color: #ccc;
- }
- .of-storey li .icon.on {
- background-color: #0099ff;
- }
- </style>
- </head>
- <body>
- <div class="order_logistics">
- <div class="order-flow">
- <ul class="of-storey">
- <li>
- <span class="icon on"></span>
- <span>快递快递快递快递快递快递</span>
- <span class="time">2017-03-04 9:26</span>
- </li>
- </ul>
- </div>
- </div>
- </body>
- </html>
来源: http://www.bubuko.com/infodetail-1968232.html