html简单组件（九）：简洁的商城订单列表显示（带状态）

最新推荐文章于 2024-07-03 21:45:00 发布

置顶

一方通行00

最新推荐文章于 2024-07-03 21:45:00 发布

阅读量2.7k

点赞数 4

分类专栏： HTML简单组件文章标签： html 商城 css3 订单列表

本文链接：https://blog.csdn.net/qq_26666947/article/details/115242445

版权

这是一个关于HTML简单组件的示例，展示了如何创建一个带有不同状态（待发货、已发货、已退货）的商城订单列表。每个订单条目包含订单编号、订单时间及订单价格，使用CSS进行样式设计，通过不同颜色标识订单状态。

摘要由CSDN通过智能技术生成

html简单组件（九）：简洁的商城订单列表显示（带状态）

效果图为：

在这里插入图片描述

HTML代码

		<div class="textDiv">
			<div class="head">
				<b>订单编号：</b>
				2021032610194432
			</div>
			<div class="context">
				<b>订单时间：</b>
				2021-03-26 10:11:23
			</div>
			<div class="price">
				<b>订单价格：</b>
				<b style="color: red;"