html + css 快速实现订单详情的布局demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order Details Layout</title>
<style>
body {
font-family: Arial, sans-serif;
}
.order-container {
width: 90%;
margin: auto;
padding: 20px;
background-color: #f2f2f2;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.order-header {
text-align: center;
padding: 20px 0;
border-bottom: 1px solid #eee;
}
.order-details {
padding: 20px;
border-bottom: 1px solid #eee;
}
.order-details th, .order-details td {
padding: 10px;
border-bottom: 1px solid #ddd;
}
.order-summary {
padding: 20px;
}
.order-summary th, .order-summary td {
padding: 10px;
}
.text-right {
text-align: right;
}
</style>
</head>
<body>
<div class="order-container">
<div class="order-header">
<h2>Order Details</h2>
</div>
<div class="order-details">
<table width="100%">
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Subtotal</th>
</tr>
<tr>
<td>Product Name</td>
<td>$99.99</td>
<td>1</td>
<td class="text-right">$99.99</td>
</tr>
<!-- More product rows here -->
</table>
</div>
<div class="order-summary">
<table width="100%">
<tr>
<th>Items</th>
<th class="text-right">1</th>
</tr>
<tr>
<th>Subtotal</th>
<th class="text-right">$99.99</th>
</tr>
<tr>
<th>Tax (10%)</th>
<th class="text-right">$9.99</th>
</tr>
<tr>
<th>Total</th>
<th class="text-right">$109.98</th>
</tr>
</table>
</div>
</div>
</body>
</html>这个简单的HTML和CSS代码示例展示了如何创建一个基本的订单详情布局。它包括了订单头部、订单详情表格、和订单总结表格。通过这个示例，开发者可以学习到如何使用HTML表格、CSS样式来增强页面的视觉效果，并且可以通过添加更多的数据行来扩展订单详情表格。
评论已关闭