本文目錄導(dǎo)讀：

1. HTML結(jié)構(gòu)
2. CSS樣式
3. JS功能

購物車是電商網(wǎng)站的重要組成部分，它可以讓用戶方便地選擇并購買心儀的商品，下面我們將介紹如何使用HTML、CSS和JS來制作一個購物車。

HTML結(jié)構(gòu)

我們需要創(chuàng)建一個HTML結(jié)構(gòu)來展示購物車，這個結(jié)構(gòu)應(yīng)該包括以下幾個部分：

1、購物車圖標

2、購物車名稱

3、購物車按鈕

4、購物車列表

下面是一個簡單的HTML代碼示例：

<div class="cart">
  <img src="cart-icon.png" alt="購物車圖標">
  <h2>購物車</h2>
  <button id="cart-btn">查看購物車</button>
  <div id="cart-list"></div>
</div>

CSS樣式

我們需要給購物車添加一些樣式，使其更加美觀和易用，以下是一個簡單的CSS代碼示例：

.cart {
  width: 300px;
  height: 500px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
}
.cart img {
  width: 50px;
  height: 50px;
}
.cart h2 {
  margin-top: 0;
}
.cart button {
  margin-top: 10px;
}

JS功能

我們需要給購物車添加一些交互功能，例如添加商品、刪除商品和計算總價等，以下是一個簡單的JS代碼示例：

// 假設(shè)我們有一個商品列表和商品數(shù)量列表
var products = ['商品1', '商品2', '商品3'];
var quantities = [1, 2, 3];
var total = 0;
// 添加商品到購物車列表
function addToCart(product, quantity) {
  var item = document.createElement('div');
  item.style.border = '1px solid #ccc';
  item.style.borderRadius = '5px';
  item.style.padding = '10px';
  item.style.margin = '5px 0';
  item.style.backgroundColor = '#f8f8f8';
  item.style.userSelect = 'none'; // 防止文本被選中
  item.style.cursor = 'pointer'; // 添加鼠標指針樣式
  item.style.transition = '0.3s'; // 添加過渡效果，使鼠標指針更平滑地移動
  item.style.position = 'relative'; // 設(shè)置相對定位，以便添加刪除按鈕和數(shù)量輸入框
  item.style.width = '100%'; // 設(shè)置寬度為100%，以便內(nèi)容可以水平排列，并留出空間添加刪除按鈕和數(shù)量輸入框。