利用CSS制作購物車可以為我們網站的購物功能增添一些炫酷的效果,下面我們來介紹一些制作購物車時常用的CSS屬性。
/* 設置購物車區域的樣式 */ .cart { width: 80%; /* 設置購物車寬度為80% */ padding: 20px; /* 設置購物車內部的留白 */ margin: 0 auto; /* 設置購物車居中 */ } /* 設置購物車商品列表的樣式 */ .cart-items { list-style: none; /* 去掉列表項的標記 */ } /* 設置購物車商品項中的圖片的樣式 */ .cart-item img { width: 100px; /* 設置圖片寬度為100px */ height: 100px; /* 設置圖片高度為100px */ vertical-align: middle; /* 將圖片垂直居中 */ } /* 設置購物車商品項中的數量選擇框的樣式 */ .cart-item select { width: 50px; /* 設置選擇框的寬度為50px */ height: 30px; /* 設置選擇框的高度為30px */ } /* 設置購物車底部結算區域的樣式 */ .cart-total { margin-top: 20px; /* 設置結算區域與購物車列表的間距為20px */ text-align: right; /* 將結算區域文字右對齊 */ } /* 設置結算按鈕的樣式 */ .cart-total button { background-color: #158cba; /* 設置按鈕背景色為深藍色 */ color: #fff; /* 設置按鈕文字顏色為白色 */ border: none; /* 去掉按鈕邊框 */ padding: 10px 20px; /* 設置按鈕內邊距 */ }
以上代碼片段可以作為購物車樣式的基礎模板,根據實際需求進行調整和擴展即可。