Home > Article > Web Front-end > Example code for continuous updating of logistics status using pure css3
Example code for continuous updating of logistics status using pure css3
- 零下一度Original
- 2017-05-17 17:30:482365browse
Code snippets, pure CSS3 example code to achieve continuous updating of logistics status, are specially shared as follows.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{font-size: 12px;}
ul li{list-style: none;}
.track-rcol{width: 900px; border: 1px solid #eee;}
.track-list{margin: 20px; padding-left: 5px; position: relative;}
.track-list li{position: relative; padding: 9px 0 0 25px; line-height: 18px; border-left: 1px solid #d9d9d9; color: #999;}
.track-list li.first{color: red; padding-top: 0; border-left-color: #fff;}
.track-list li .node-icon{position: absolute; left: -6px; top: 50%; width: 11px; height: 11px; background: url(http://demo.daimabiji.com/3531/img/order-icons.png) -21px -72px no-repeat;}
.track-list li.first .node-icon{background-position:0 -72px;}
.track-list li .time{margin-right: 20px; position: relative; top: 4px; display: inline-block; vertical-align: middle;}
.track-list li .txt{max-width: 600px; position: relative; top: 4px; display: inline-block; vertical-align: middle;}
.track-list li.first .time{margin-right: 20px; }
.track-list li.first .txt{max-width: 600px; }
</style>
</head>
<body>
<div class="track-rcol">
<div class="track-list">
<ul>
<li class="first">
<i class="node-icon"></i>
<span class="time">2016-03-10 18:07:15</span>
<span class="txt">感谢您在京东购物，欢迎您再次光临！</span>
</li>
<li>
<i class="node-icon"></i>
<span class="time">2016-03-10 18:07:15</span>
<span class="txt">【京东到家】京东配送员【申国龙】已出发，联系电话【18410106883，感谢您的耐心等待，参加评价还能赢取京豆呦】</span>
</li>
<li>
<i class="node-icon"></i>
<span class="time">2016-03-10 18:07:15</span>
<span class="txt">感谢您在京东购物，欢迎您再次光临！</span>
</li>
<li>
<i class="node-icon"></i>
<span class="time">2016-03-10 18:07:15</span>
<span class="txt">感谢您在京东购物，欢迎您再次光临！</span>
</li>
<li>
<i class="node-icon"></i>
<span class="time">2016-03-10 18:07:15</span>
<span class="txt">感谢您在京东购物，欢迎您再次光临！</span>
</li>
<li>
<i class="node-icon"></i>
<span class="time">2016-03-10 18:07:15</span>
<span class="txt">感谢您在京东购物，欢迎您再次光临！</span>
</li>
</ul>
</div>
</div>
</body>
</html>【Related recommendations】
1. Special recommendation:"php programmer toolbox" V0.1 version download
2. Free css online video tutorial
3. php.cn Dugu Jiujian (2)-css video Tutorial
The above is the detailed content of Example code for continuous updating of logistics status using pure css3. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn