我的订单jsp页面css

我的订单jsp页面css

该jsp页面主要是用来展示用户的订单信息。为了使页面看起来更加美观和易于理解，我们设计了一些css样式。

首先，我们定义了一个class叫做order-list，它用于一个包含订单信息的div元素，将订单按照列表的形式呈现出来。

.order-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
}

接下来，我们定义了另一个class叫做order-item，它用于每一个订单的元素，将订单的每一个细节都归类在里面。我们为order-item定义了灰色的背景色和白色的字体颜色，让订单信息更加清晰易读。

.order-item {
    margin: 10px;
    padding: 10px;
    background-color: #f5f5f5;
    color: #fff;
    border-radius: 5px;
}

最后，我们还定义了class叫做order-status，它用于表示订单状态的元素。我们为不同状态定义了不同的背景色和字体颜色。

.order-status {
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
}
.order-status--pending {
    background-color: #f9a825;
    color: #fff;
}
.order-status--shipped {
    background-color: #00796b;
    color: #fff;
}
.order-status--delivered {
    background-color: #43a047;
    color: #fff;
}
    

以上是我们在我的订单jsp页面所使用的css样式，它们为用户提供了更加清晰和方便的订单信息展示。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！