小米手機購物車CSS

小米手機購物車的頁面需要對美觀和用戶體驗做出充分考慮。以下是該頁面用到的CSS樣式代碼：

/* 整體樣式 */
.cart-wrapper {
margin: 10px;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* 表格樣式 */
.cart-table {
margin: 0 auto;
width: 100%;
border-collapse: collapse;
}
/* 表頭 */
.cart-table th {
text-align: left;
font-weight: bold;
padding: 10px;
border-bottom: 2px solid #eee;
}
/* 表格行 */
.cart-table tr {
border-bottom: 1px solid #eee;
}
/* 購物車項 */
.cart-item {
display: flex;
align-items: center;
padding: 10px;
}
/* 縮略圖 */
.cart-item img {
width: 80px;
height: auto;
margin-right: 10px;
}
/* 名稱和價格 */
.cart-item-info {
flex-grow: 1;
}
.cart-item-name {
font-weight: bold;
}
.cart-item-price {
color: #f60;
}
/* 數量輸入框 */
.cart-item-input {
width: 50px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
text-align: center;
}
/* 操作按鈕 */
.cart-item-btn {
margin-left: 20px;
padding: 8px 12px;
background-color: #f60;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.cart-item-btn:hover {
background-color: #f90;
}

上述CSS樣式代碼可以實現一個美觀且易于操作的手機購物車頁面。其中包括了購物車中每項的縮略圖、名稱、價格、數量輸入框和加減按鈕等元素。