模拟淘宝订单页面代码
时间: 2023-10-11 19:09:36 浏览: 65
以下是一个简单的模拟淘宝订单页面的HTML和CSS代码示例,供您参考:
HTML代码:
```html
<div class="order">
<h2>订单信息</h2>
<div class="order-item">
<div class="item-left">
<img src="商品图片地址" alt="商品图片">
</div>
<div class="item-right">
<h3>商品名称</h3>
<p>商品描述</p>
<p>商品价格:¥99.00</p>
</div>
</div>
<div class="order-info">
<p>订单编号:1234567890</p>
<p>下单时间:2022-01-01 10:00:00</p>
<p>收货地址:xxxxxx</p>
</div>
<div class="order-action">
<button>取消订单</button>
<button>付款</button>
</div>
</div>
```
CSS代码:
```css
.order {
border: 1px solid #ccc;
padding: 10px;
font-size: 14px;
margin: 10px;
}
.order h2 {
font-size: 18px;
margin-bottom: 10px;
}
.order-item {
display: flex;
margin-bottom: 10px;
}
.order-item img {
width: 100px;
height: 100px;
margin-right: 10px;
}
.order-info {
margin-bottom: 10px;
}
.order-action {
display: flex;
justify-content: flex-end;
}
.order-action button {
margin-left: 10px;
background-color: #f60;
color: #fff;
border: none;
padding: 5px 10px;
border-radius: 2px;
cursor: pointer;
}
.order-action button:hover {
background-color: #f90;
}
```
这只是一个简单的示例,您可以根据实际需求进行修改和优化。