Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
ul {
	list-style:none;
}
.package-info {
	margin:10px 14px 0;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
}
ul.package-status {
	width:100%;
}
ul.package-status li.package-status-list {
	color:#666;
	font-size:12px;
	border-left:1px solid #eee;
	padding-left:25px;
	position:relative;
	padding-bottom:26px;
}
ul.package-status li.package-status-list:last-child {
	border:0;
}
ul.package-status li .status-title {
	font-size:14px;
}
ul.package-status li .status-details {
	padding:4px 0;
	line-height:22px;
}
ul.package-status li.package-status-list i {
	width:24px;
	height:24px;
	display:inline-block;
	position:absolute;
	left:-12px;
	border-radius:50%;
}
ul.package-status li.package-status-list i.icon-package-fh {
	background:url(http://www.jq22.com/img/cs/500x500-1.png) no-repeat center;
	background-size:100%;
}
ul.package-status li.package-status-list i.icon-package-lj {
	background:url(http://www.jq22.com/img/cs/500x500-2.png) no-repeat center;
	background-size:100%;
}
ul.package-status li.package-status-list i.icon-package-ys {
	background:url(http://www.jq22.com/img/cs/500x500-3.png) no-repeat center;
	background-size:100%;
}
ul.package-status li.package-status-list i.icon-package-ps {
	background:url(http://www.jq22.com/img/cs/500x500-4.png) no-repeat center;
	background-size:100%;
}
ul.package-status li.package-status-list i.icon-package-qs {
	background:url(http://www.jq22.com/img/cs/500x500-5.png) no-repeat center;
	background-size:100%;
}
ul.package-status li.package-status-list span {
	width:8px;
	height:8px;
	display:inline-block;
	position:absolute;
	left:-5px;
	top:8px;
	background:#eee;
	border-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

纯css物流信息图

0