css+html实现时间轴

css+html实现时间轴

1.css

		body {
			font-size: 12px;
		}
		
		ul li {
			list-style: none;
		}
		.track-rcol {
			width: 100%;
			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/trank.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 {
			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;
		}

2.html

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

效果：