在網頁開發中，購物車是一個非常常見的交互功能，而CSS和JS是用來實現這個交互效果的重要工具。
CSS和購物車
CSS主要用來控制網頁的樣式，因此在購物車的實現中，CSS也起到一個至關重要的作用。
首先，我們可以使用CSS來美化購物車的界面，比如對購物車中的商品列表進行排版、字體和顏色的調整，使得購物車更加美觀、易于使用。
/*購物車列表樣式*/
.shopping-cart__list{
display:flex;
flex-direction:column;
align-items:center;
padding:0;
margin:0;
}
.shopping-cart__item{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
margin-bottom:10px;
}
.shopping-cart__item-info{
display:flex;
align-items:center;
width:80%;
}
.shopping-cart__item-img{
width:100px;
height:100px;
margin-right:10px;
}
.shopping-cart__item-desc{
display:flex;
flex-direction:column;
justify-content:center;
}
.shopping-cart__item-desc h3{
font-size:20px;
margin:0;
}另外，在購物車中，我們也需要對一些特殊的狀態進行樣式處理，比如商品已下架、庫存不足等情況，這些都需要使用CSS來表現。
/*商品已下架的樣式*/
.shopping-cart__item.is-out-of-stock{
opacity:0.5;
}JS和購物車
JS則主要用來實現購物車的交互效果，比如添加、刪除商品、計算總價等功能。
在購物車中，我們需要使用JS來監聽用戶的操作，從而進行相應的處理。比如，當用戶點擊了商品的添加按鈕時，我們就需要通過JS來獲取該商品的信息并添加到購物車中。
//添加商品到購物車
function addToCart(product){
//獲取購物車列表
const cartList = document.querySelector('.shopping-cart__list');
//創建商品元素
const item = document.createElement('li');
item.classList.add('shopping-cart__item');
item.innerHTML = `
${product.name}
單價：${product.price}元
`;
//添加到購物車列表
cartList.appendChild(item);
}除了添加商品，我們還需要使用JS來實現購物車中商品的刪除、數量的增減、價格的計算等功能。
總之，CSS和JS在購物車的實現中都發揮著重要作用，通過它們的協作，我們可以讓用戶更加方便、快捷地完成購物流程。