您的位置：首页 > Web前端 > CSS

物流跟踪css

2017-11-17 12:45 1106 查看

<!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(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>

</ul>

</div>

</div>

</body>
</html>

精灵：

效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 物流

相关文章推荐

新的分享

章节导航