给我写一个购物车的静态页面
时间: 2024-05-10 10:13:44 浏览: 4
好的,请稍等,我找一下相关的代码。以下是一个简单的购物车静态页面示例:
```
<!DOCTYPE html>
<html>
<head>
<title>购物车</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
background-color: #f1f1f1;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
font-size: 36px;
color: #333;
text-align: center;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
text-align: left;
padding: 8px;
border-bottom: 1px solid #ddd;
}
tr:hover {
background-color: #f5f5f5;
}
.total-price {
margin-top: 20px;
text-align: right;
font-size: 24px;
}
.btn {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px;
cursor: pointer;
float: right;
margin-top: 20px;
}
.btn:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="container">
<h1>我的购物车</h1>
<table>
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>商品1</td>
<td>$29.99</td>
<td>2</td>
<td>$59.98</td>
</tr>
<tr>
<td>商品2</td>
<td>$19.99</td>
<td>1</td>
<td>$19.99</td>
</tr>
</tbody>
</table>
<div class="total-price">总价:$79.97</div>
<button class="btn">结算</button>
</div>
</body>
</html>
```