用table写一个css明确的购物车页面
时间: 2023-10-11 10:09:37 浏览: 168
好的,以下是一个简单的购物车页面的HTML和CSS代码示例:
HTML代码:
```
<div class="cart">
<table>
<thead>
<tr>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>商品1</td>
<td>100元</td>
<td>1</td>
<td>100元</td>
</tr>
<tr>
<td>商品2</td>
<td>50元</td>
<td>2</td>
<td>100元</td>
</tr>
<tr>
<td colspan="3">合计:</td>
<td>200元</td>
</tr>
</tbody>
</table>
<button class="checkout-btn">结算</button>
</div>
```
CSS代码:
```
.cart {
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ccc;
}
th {
background-color: #f2f2f2;
}
td:first-child {
width: 60%;
}
td:nth-child(2), td:nth-child(4) {
width: 15%;
}
td:nth-child(3) {
width: 10%;
}
tr:last-child td {
font-weight: bold;
}
.checkout-btn {
display: block;
margin: 20px auto 0;
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.checkout-btn:hover {
background-color: #0062cc;
}
```
注释:这个购物车页面使用了一个table元素来呈现商品列表和合计金额。通过CSS样式设置表格的宽度、单元格宽度、背景颜色、边框等属性,使表格看起来更美观。最后添加了一个结算按钮,用来提交订单。
阅读全文