仿小米商城购物车css
时间: 2023-08-28 08:22:28 浏览: 85
以下是一个简单的仿小米商城购物车页面的 CSS 代码示例:
```css
/* 购物车容器 */
.cart-container {
width: 100%;
padding: 20px;
background-color: #f5f5f5;
}
/* 购物车列表 */
.cart-list {
list-style-type: none;
margin: 0;
padding: 0;
}
/* 购物车项 */
.cart-item {
display: flex;
align-items: center;
padding: 10px;
background-color: #fff;
margin-bottom: 10px;
}
/* 商品图片 */
.cart-item img {
width: 80px;
height: 80px;
margin-right: 10px;
}
/* 商品信息 */
.cart-item .item-info {
flex-grow: 1;
}
/* 商品标题 */
.cart-item .item-title {
font-size: 16px;
font-weight: bold;
}
/* 商品价格 */
.cart-item .item-price {
font-size: 14px;
color: #ff6700;
}
/* 数量选择器 */
.cart-item .quantity-selector {
display: flex;
align-items: center;
}
/* 数量减少按钮 */
.cart-item .quantity-selector .minus-btn,
.cart-item .quantity-selector .plus-btn {
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #ff6700;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
/* 数量输入框 */
.cart-item .quantity-selector input {
width: 40px;
height: 24px;
border: none;
text-align: center;
font-size: 14px;
font-weight: bold;
}
/* 小计价格 */
.cart-item .subtotal-price {
font-size: 14px;
color: #666;
}
/* 结算按钮 */
.checkout-btn {
width: 100%;
padding: 10px;
background-color: #ff6700;
color: #fff;
font-size: 16px;
text-align: center;
cursor: pointer;
}
/* 响应式布局 */
@media (max-width: 768px) {
.cart-item {
flex-direction: column;
align-items: flex-start;
}
.cart-item img {
margin-bottom: 10px;
}
}
```
这只是一个简单的 CSS 示例,你可以根据需要进行修改和扩展。希望对你有帮助!
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)