CSS 可以實現許多網頁特效，而實現購物車功能也是其中之一。

/* 購物車頁面的樣式 */
.cart {
width: 80%;
margin: 0 auto;
}
/* 商品列表 */
.cart-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
/* 商品圖片 */
.cart-item img {
width: 100px;
height: 100px;
}
/* 商品信息 */
.cart-item-info {
margin-left: 10px;
}
/* 商品名稱 */
.cart-item-info h4 {
margin: 0;
font-size: 1.2rem;
}
/* 商品價格 */
.cart-item-info p {
margin: 0;
font-size: 1rem;
}
/* 商品數量 */
.cart-item-quantity {
display: flex;
justify-content: center;
align-items: center;
}
/* 數量減少按鈕 */
.cart-item-quantity button:first-child {
margin-right: 5px;
}
/* 數量增加按鈕 */
.cart-item-quantity button:last-child {
margin-left: 5px;
}
/* 結算欄 */
.cart-summary {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #ccc;
}
/* 結算欄總價 */
.cart-summary p {
margin: 0;
font-size: 1.2rem;
}
/* 結算按鈕 */
.checkout-btn {
background-color: #f0ad4e;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
}

以上是基本的樣式代碼，當然還需要 JavaScript 來實現添加商品、刪除商品、計算總價等交互功能。