html 查看物流信息详情

最新推荐文章于 2025-05-29 22:19:41 发布

xumoqiu

最新推荐文章于 2025-05-29 22:19:41 发布

阅读量9.7k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： js插件文章标签： html css 物流

本文链接：https://blog.youkuaiyun.com/xumoqiu/article/details/78409188

js插件专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种用于展示物流状态的CSS样式设计方案，通过不同颜色和样式的元素来区分最新的物流信息和其他历史记录，使用户能够清晰地了解包裹的状态变化过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS 样式

.package-status{padding:18px 0 0 0}
.package-status .status-list{margin:0;padding:0;margin-top:-5px;padding-left:8px;list-style:none;}
.package-status .status-list li{border-left:2px solid #d9d9d9;text-align:left;}
.package-status .status-list li:before{ /* 流程点的样式 */
	content:'';
	border:3px solid #f3f3f3;
	background-color:#d9d9d9;
	display:inline-block;
	width:10px;
	height:10px;
	border-radius:10px;
	margin-left:-9px;
	margin-right:10px
}
.package-status .status-list .latest:before{background-color:#0dad12;border-color:#f8e9e4;}
.package-status .status-box{overflow:hidden}
.package-status .status-list li{height:auto;}
.package-status .status-list{margin-top:-8px}
.package-status .status-box{position:relative}
.package-status .status-box:before{content:" ";background-color:#f3f3f3;display:block;position:absolute;top:-8px;left:20px;width:10px;height:4px}
.package-status .status-list{margin-top:0px;}
/* .package-status .status-list .latest{border:none} */
/* .package-status .status-list li{margin-bottom:-2px} */



.status-list li:not(:first-child){
	padding-top:10px;
}

.status-content-before{
	text-align:left;
	margin-left:25px;
	margin-top:-20px;
}
.status-content-latest{
	text-align:left;
	margin-left:25px;
	color:green;
	margin-top:-20px;
}
.status-time-before{qqqqqqqqq
	text-align:left;
	margin-left:25px;
	font-size:10px;
	margin-top:5px;
	
}
.status-time-latest{
	text-align:left;
	margin-left:25px;
	color:green;
	font-size:10px;
	margin-top:5px;
}
.status-line{
	border-bottom:1px solid #ccc;
	margin-left:25px;
	margin-top:10px;
	
}

html 代码

		<div class="package-status">
			<div class="status-box" >
				<ul  class="status-list">
					<li>
						<div class="status-content-before">您的订单开始处理</div>
						<div class="status-time-before">2017-08-17 23:31 周四</div>
						<div class="status-line"></div>
					</li>
					<li>
						<div class="status-content-before">卖家发货</div>
						<div class="status-time-before">2017-08-18 09:11 周五</div>
						<div class="status-line"></div>
					</li >
					<li>
						<div class="status-content-before">发往深圳中转站</div>
						<div class="status-time-before">2017-08-19 01:21 周六</div>
						<div class="status-line"></div>
					</li>
					<li>
						<div class="status-content-before">到达深圳</div>
						<div class="status-time-before">2017-08-19 06:21 周六</div>
						<div class="status-line"></div>
					</li>
					<li>
						<div class="status-content-before">发往潮汕中心</div>
						<div class="status-time-before">2017-08-19 09:21 周六</div>
						<div class="status-line"></div>
					</li>
					<li class="latest">
						<div class="status-content-latest">快件到达 潮汕中心</div>
						<div class="status-time-latest">2017-08-20 14:16 周日</div>
						<div class="status-line"></div>
					</li>
				</ul>
			</div>
	</div>

至于动态生成物流信息可以自行拼接html

效果图如下