完善<div style="text-align: center;" > <table class="table table-hover tar" style="margin: 0 auto;"> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>总价</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><img src="img/t_recommen/cup.jpg" width="220" height="170"><br>健身水杯 </td> <td>100</td> <td><input type="number" value="1" min="1"></td> <td>100</td> <td><button class="btn btn-danger">删除</button></td> </tr> <tr> <td><img src="img/t_recommen/xiaomi.jpg" width="220" height="170"><br>商品2</td> <td>200</td> <td><input type="number" value="1" min="1"></td> <td>200</td> <td><button class="btn btn-danger">删除</button></td> </tr> <tr> <td><img src="img/mobile/m2.jpg" width="220" height="170"><br>商品3</td> <td>300</td> <td><input type="number" value="1" min="1"></td> <td>300</td> <td><button class="btn btn-danger">删除</button></td> </tr> </tbody> <tfoot> <tr> <td colspan="3">总价:</td> <td colspan="2">600</td> </tr> </tfoot> </table> </div>让它变得美观
时间: 2023-07-02 08:20:12 浏览: 76
为了让这个购物车页面变得美观,我们可以添加一些 CSS 样式来修饰表格和按钮。以下是一个简单的 CSS 样式示例,可以将其添加到页面的头部区域:
```html
<head>
<style type="text/css">
/* 设置表格的宽度和边框 */
table {
width: 100%;
border-collapse: collapse;
border: 1px solid #ddd;
}
/* 设置表格头部的背景色和字体颜色 */
thead {
background-color: #f2f2f2;
color: #666;
}
/* 设置表格主体中每个单元格的边框 */
tbody td {
border: 1px solid #ddd;
}
/* 设置表格主体中每个单元格的内边距和字体颜色 */
tbody td {
padding: 10px;
color: #666;
}
/* 设置表格主体中每个单元格中商品图片的大小和位置 */
tbody td img {
width: 80px;
height: 80px;
float: left;
margin-right: 10px;
}
/* 设置表格主体中每个单元格中商品名称的字体大小和位置 */
tbody td span {
font-size: 18px;
display: block;
margin-bottom: 5px;
}
/* 设置表格主体中每个单元格中商品单价和总价的字体颜色和位置 */
tbody td .price {
color: #f00;
font-weight: bold;
display: block;
margin-bottom: 5px;
}
/* 设置表格主体中每个单元格中商品数量的位置 */
tbody td .quantity {
display: block;
margin-bottom: 5px;
}
/* 设置表格底部中总价的位置和字体大小 */
tfoot td {
font-size: 24px;
text-align: right;
}
/* 设置删除按钮的背景色、字体颜色和边框 */
.btn-danger {
background-color: #d9534f;
color: #fff;
border: none;
}
/* 设置删除按钮的鼠标悬停效果 */
.btn-danger:hover {
background-color: #c9302c;
color: #fff;
}
</style>
</head>
```
这些 CSS 样式可以让表格看起来更加美观和易于阅读,同时也让删除按钮更加醒目和易于使用。当然,你也可以根据自己的需求来进行样式的调整和修改。