在现代网页设计中,购物车功能是电商网站不可或缺的一部分。本文将通过一个简单的HTML示例来展示如何构建一个基础的购物车界面。虽然这是一个简化的版本,但它可以帮助开发者理解购物车的基本结构和功能。
HTML代码示例
```html
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: f4f4f9;
}
.container {
width: 60%;
margin: 50px auto;
background: white;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: 333;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
table th, table td {
padding: 10px;
border: 1px solid ddd;
text-align: left;
}
table th {
background-color: f2f2f2;
}
button {
display: block;
width: 100%;
padding: 10px;
margin-top: 20px;
background-color: 28a745;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: 218838;
}
购物车
商品名称 | 单价 | 数量 | 小计 |
---|---|---|---|
苹果 | ¥5.00 | ¥5.00 | |
香蕉 | ¥3.00 | ¥6.00 | |
橙子 | ¥4.00 | ¥4.00 |
```
代码说明
1. HTML结构:页面包含一个标题`