創建一個簡單的商品網頁可以用HTML、CSS和JavaScript來實現。這種網頁會包括商品的圖片、名稱、描述、價格和購買按鈕等。下面是一個詳細的源碼案例及其講解：
1. 文件結構
假設我們有以下文件結構：
/product-page/imagesproduct.jpgindex.htmlstyle.cssscript.js
2. HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>商品頁面</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="product-container"><div class="product-image"><img src="images/product.jpg" alt="Product Image"></div><div class="product-details"><h1 class="product-name">商品名稱</h1><p class="product-description">這是一個非常好的商品，它有很多優點和特點，非常適合您。</p><span class="product-price">$99.99</span><button class="buy-button">購買</button></div></div><script src="script.js"></script>
</body>
</html>
3. CSS (style.css)
body {font-family: Arial, sans-serif;background-color: #f4f4f4;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;
}.product-container {background-color: #fff;box-shadow: 0 4px 8px rgba(0,0,0,0.1);border-radius: 10px;overflow: hidden;width: 300px;text-align: center;
}.product-image img {width: 100%;height: auto;
}.product-details {padding: 15px;
}.product-name {font-size: 24px;margin: 0;
}.product-description {color: #777;font-size: 14px;margin: 10px 0;
}.product-price {font-size: 20px;color: #333;margin: 15px 0;display: block;
}.buy-button {background-color: #28a745;color: white;border: none;padding: 10px 20px;font-size: 16px;cursor: pointer;border-radius: 5px;transition: background-color 0.3s ease;
}.buy-button:hover {background-color: #218838;
}
4. JavaScript (script.js)
document.querySelector('.buy-button').addEventListener('click', function() {alert('感謝您的購買！');
});
講解
-
HTML:
<!DOCTYPE html>聲明文檔類型為HTML5。<head>部分包括字符集、視口設置和引用CSS文件。<body>部分包含商品的圖片和詳情，并引用JavaScript文件。
-
CSS:
- 設置了整體頁面的樣式，包括字體、背景顏色和布局。
- 為商品容器和其中的元素（如圖片、名稱、描述、價格、按鈕）定義了具體的樣式和樣式效果。
-
JavaScript:
- 添加了一個點擊事件監聽器，當點擊“購買”按鈕時，彈出一個感謝信息的提示框。
這個示例展示了一個簡單但功能完整的商品展示頁面。可以根據具體需求擴展和調整，例如添加更多商品、實現購物車功能、連接后端API獲取商品數據等。
)
