HTML購物車代碼：
<!DOCTYPE html>
<html>
<head>
<title>購物車</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>購物車</h1>
<div class="cart-items">
<div class="cart-item">
<img src="img/product1.jpg" alt="Product 1">
<div class="item-details">
<h3>商品1</h3>
<p>顏色：紅</p>
<p>尺碼：S</p>
<p>價格：$19.99</p>
<p class="item-counter">
<button class="quantity-btn minus-btn">-</button>
<span class="quantity">1</span>
<button class="quantity-btn plus-btn">+</button>
</p>
</div>
<button class="remove-btn">刪除</button>
</div>
<div class="cart-item">
<img src="img/product2.jpg" alt="Product 2">
<div class="item-details">
<h3>商品2</h3>
<p>顏色：藍</p>
<p>尺碼：M</p>
<p>價格：$29.99</p>
<p class="item-counter">
<button class="quantity-btn minus-btn">-</button>
<span class="quantity">1</span>
<button class="quantity-btn plus-btn">+</button>
</p>
</div>
<button class="remove-btn">刪除</button>
</div>
</div>
<div class="cart-total">
<p>總計：<span class="total-price">$49.98</span></p>
<button class="checkout-btn">結算</button>
</div>
<script src="js/script.js"></script>
</body>
</html>上面是一個簡單的HTML購物車代碼。它包含了一些基本的HTML標簽，如圖片、文本和按鈕。在該代碼中，每個產品都有自己的細節和數量計數器，用戶可以添加或刪除產品。最后，購物車總價和結算按鈕也顯示在屏幕上。在JavaScript中，可以通過一些簡單的函數來添加或刪除產品，并更新價格。
上一篇css二層菜單
下一篇php vue 登陸源碼