物流进度条样式

最新推荐文章于 2021-05-31 14:12:13 发布

SUQI七

最新推荐文章于 2021-05-31 14:12:13 发布

阅读量201

点赞数

文章标签： html css

原文链接：https://blog.csdn.net/chenLeiInTuling/article/details/78559889

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</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>

在这里插入图片描述

SUQI七

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
物流进度条样式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</.
复制链接

扫一扫