淘宝商品网页HTML怎么做？-网页设计-锦华智联科技

下面我将为你提供一个从零开始的详细教程,带你一步步构建一个功能完整的淘宝商品详情页，我们将使用纯 HTML、CSS 和原生 JavaScript，这样你能更好地理解底层原理。

（图片来源网络，侵删）

最终效果预览

我们将创建一个类似下面这样的页面：

第一步：准备工作

文件结构：创建一个项目文件夹，然后在里面创建以下三个文件：
- index.html (存放网页内容)
- style.css (存放样式)
- script.js (存放交互逻辑)
图片资源：你需要一些商品图片，你可以使用你自己的图片，或者从网上下载一些示例图片（main.jpg, thumb1.jpg, thumb2.jpg 等），将这些图片也放在你的项目文件夹中。
图标资源：我们使用一个非常流行的图标库 Font Awesome，在你的 HTML 文件的 <head> 标签中，引入它的 CDN：
（图片来源网络，侵删）
```
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
```

第二步：HTML 结构 (`index.html`)

HTML 是网页的骨架，我们将整个页面划分为几个主要部分。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Apple iPhone 15 Pro Max - 商品详情</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- 1. 顶部导航栏 -->
    <header class="main-header">
        <div class="container">
            <h1>我的淘宝店</h1>
        </div>
    </header>
    <!-- 2. 主要内容区 -->
    <main class="main-content container">
        <div class="product-container">
            <!-- 左侧：图片展示区 -->
            <div class="product-gallery">
                <div class="main-image-container">
                    <img id="main-image" src="images/main.jpg" alt="商品主图">
                </div>
                <div class="thumbnail-list">
                    <img class="thumbnail active" src="images/thumb1.jpg" alt="缩略图1" data-src="images/main.jpg">
                    <img class="thumbnail" src="images/thumb2.jpg" alt="缩略图2" data-src="images/thumb2.jpg">
                    <img class="thumbnail" src="images/thumb3.jpg" alt="缩略图3" data-src="images/thumb3.jpg">
                    <img class="thumbnail" src="images/thumb4.jpg" alt="缩略图4" data-src="images/thumb4.jpg">
                </div>
            </div>
            <!-- 右侧：商品信息区 -->
            <div class="product-info">
                <h1 class="product-title">Apple iPhone 15 Pro Max 256GB 钛金属 - 全新上市</h1>
                <div class="review-section">
                    <span class="price">¥ 9,999</span>
                    <div class="rating">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                        <span class="review-count">(4.5分 · 12,345条评价)</span>
                    </div>
                </div>
                <div class="summary">
                    <p class="summary-line"><span class="summary-label">促销</span> <span class="summary-value">限时优惠，满10000减200</span></p>
                    <p class="summary-line"><span class="summary-label">配送</span> <span class="summary-value">至 · 北京 朝阳区 免运费</span></p>
                    <p class="summary-line"><span class="summary-label">服务</span> <span class="summary-value">7天无理由退换 · 正品保证</span></p>
                </div>
                <div class="color-picker">
                    <span class="option-label">颜色：</span>
                    <div class="options">
                        <button class="option-btn active">钛原色</button>
                        <button class="option-btn">蓝色钛金属</button>
                        <button class="option-btn">白色钛金属</button>
                    </div>
                </div>
                <div class="quantity-picker">
                    <span class="option-label">数量：</span>
                    <div class="quantity-controls">
                        <button id="decrease-qty">-</button>
                        <input type="number" id="quantity" value="1" min="1" max="10">
                        <button id="increase-qty">+</button>
                    </div>
                </div>
                <div class="action-buttons">
                    <button class="add-to-cart-btn">
                        <i class="fas fa-shopping-cart"></i> 加入购物车
                    </button>
                    <button class="buy-now-btn">立即购买</button>
                </div>
            </div>
        </div>
    </main>
    <!-- 3. 页脚 -->
    <footer class="main-footer">
        <div class="container">
            <p>&copy; 2025 我的淘宝店. All rights reserved.</p>
        </div>
    </footer>
    <script src="script.js"></script>
</body>
</html>

第三步：CSS 样式 (`style.css`)

CSS 负责美化我们的网页，让它看起来像真正的淘宝页面。

/* --- 全局样式和变量 --- */
:root {
    --primary-color: #ff6900; /* 淘宝橙色 */
    --text-color: #333;
    --light-gray: #f4f4f4;
    --border-color: #eee;
    --max-width: 1200px;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    background-color: #f5f5f5;
    color: var(--text-color);
}
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}
/* --- 顶部导航 --- */
.main-header {
    background-color: #fff;
    border-bottom: 1px solid var(--border-color);
    padding: 15px 0;
}
.main-header h1 {
    margin: 0;
    font-size: 24px;
    color: var(--primary-color);
}
/* --- 主要内容 --- */
.main-content {
    padding: 40px 0;
}
.product-container {
    display: flex;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    overflow: hidden;
}
/* --- 左侧图片区 --- */
.product-gallery {
    flex: 1;
    padding: 20px;
    max-width: 600px;
}
.main-image-container {
    width: 100%;
    height: 600px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}
.main-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 关键：保持图片比例并填充容器 */
}
.thumbnail-list {
    display: flex;
    margin-top: 15px;
    gap: 10px;
}
.thumbnail {
    width: 80px;
    height: 80px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
}
.thumbnail:hover,
.thumbnail.active {
    opacity: 1;
    border-color: var(--primary-color);
}
/* --- 右侧商品信息区 --- */
.product-info {
    flex: 1;
    padding: 30px;
    display: flex;
    flex-direction: column;
}
.product-title {
    font-size: 24px;
    font-weight: 500;
    margin: 0 0 20px 0;
    line-height: 1.4;
}
.review-section {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}
.price {
    font-size: 32px;
    font-weight: bold;
    color: var(--primary-color);
    margin-right: 20px;
}
.rating i {
    color: #f5a623;
}
.review-count {
    color: #999;
    font-size: 14px;
    margin-left: 10px;
}
.summary {
    margin-bottom: 30px;
}
.summary-line {
    font-size: 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.summary-label {
    color: #999;
    width: 60px;
}
.summary-value {
    flex: 1;
}
.option-label {
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
}
.color-picker .options {
    display: flex;
    gap: 10px;
}
.option-btn {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    background-color: #fff;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
}
.option-btn:hover,
.option-btn.active {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.quantity-controls {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    width: fit-content;
}
.quantity-controls button {
    width: 40px;
    height: 40px;
    border: none;
    background-color: #fff;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-color);
}
.quantity-controls button:hover {
    background-color: var(--light-gray);
}
#quantity {
    width: 60px;
    height: 40px;
    border: none;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    text-align: center;
    font-size: 16px;
}
/* --- 行动按钮 --- */
.action-buttons {
    margin-top: auto;
    display: flex;
    gap: 15px;
}
.add-to-cart-btn, .buy-now-btn {
    flex: 1;
    padding: 15px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}
.add-to-cart-btn {
    background-color: #ff9900;
    color: #fff;
}
.add-to-cart-btn:hover {
    background-color: #e68a00;
}
.buy-now-btn {
    background-color: #ff6900;
    color: #fff;
}
.buy-now-btn:hover {
    background-color: #e55a00;
}
/* --- 页脚 --- */
.main-footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
}

第四步：JavaScript 交互 (`script.js`)

让我们的页面“活”起来。

// 1. 图片切换功能
document.addEventListener('DOMContentLoaded', () => {
    const mainImage = document.getElementById('main-image');
    const thumbnails = document.querySelectorAll('.thumbnail');
    thumbnails.forEach(thumb => {
        thumb.addEventListener('click', () => {
            // 移除所有缩略图的 'active' 类
            thumbnails.forEach(t => t.classList.remove('active'));
            // 给当前点击的缩略图添加 'active' 类
            thumb.classList.add('active');
            // 更换主图
            mainImage.src = thumb.getAttribute('data-src');
        });
    });
    // 2. 数量增减功能
    const decreaseBtn = document.getElementById('decrease-qty');
    const increaseBtn = document.getElementById('increase-qty');
    const quantityInput = document.getElementById('quantity');
    decreaseBtn.addEventListener('click', () => {
        let currentValue = parseInt(quantityInput.value);
        if (currentValue > 1) {
            quantityInput.value = currentValue - 1;
        }
    });
    increaseBtn.addEventListener('click', () => {
        let currentValue = parseInt(quantityInput.value);
        if (currentValue < 10) { // 假设最大库存为10
            quantityInput.value = currentValue + 1;
        }
    });
    // 3. 颜色选择功能
    const colorButtons = document.querySelectorAll('.color-picker .option-btn');
    colorButtons.forEach(btn => {
        btn.addEventListener('click', () => {
            // 移除所有颜色按钮的 'active' 类
            colorButtons.forEach(b => b.classList.remove('active'));
            // 给当前点击的按钮添加 'active' 类
            btn.classList.add('active');
            // 这里可以添加切换商品图片的逻辑
            //  mainImage.src = 'images/' + btn.textContent + '.jpg';
            console.log('选择了颜色:', btn.textContent);
        });
    });
    // 4. 加入购物车和立即购买按钮功能
    const addToCartBtn = document.querySelector('.add-to-cart-btn');
    const buyNowBtn = document.querySelector('.buy-now-btn');
    addToCartBtn.addEventListener('click', () => {
        const selectedColor = document.querySelector('.color-picker .option-btn.active').textContent;
        const selectedQuantity = quantityInput.value;
        // 创建一个提示信息
        const message = `已将 ${selectedQuantity} 件 "${selectedColor}" 加入购物车！`;
        // 创建一个自定义的提示框
        const toast = document.createElement('div');
        toast.className = 'toast';
        toast.textContent = message;
        document.body.appendChild(toast);
        // 3秒后移除提示框
        setTimeout(() => {
            document.body.removeChild(toast);
        }, 3000);
        console.log('加入购物车:', { color: selectedColor, quantity: selectedQuantity });
    });
    buyNowBtn.addEventListener('click', () => {
        const selectedColor = document.querySelector('.color-picker .option-btn.active').textContent;
        const selectedQuantity = quantityInput.value;
        alert(`即将跳转到结算页面，购买 ${selectedQuantity} 件 "${selectedColor}"，`);
        console.log('立即购买:', { color: selectedColor, quantity: selectedQuantity });
    });
});
// 5. 添加自定义提示框的样式
const style = document.createElement('style');
style.textContent = `
    .toast {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #333;
        color: white;
        padding: 15px 25px;
        border-radius: 4px;
        z-index: 1000;
        animation: fadeInOut 3s ease-in-out;
    }
    @keyframes fadeInOut {
        0% { opacity: 0; transform: translate(-50%, 20px); }
        10% { opacity: 1; transform: translate(-50%, 0); }
        90% { opacity: 1; transform: translate(-50%, 0); }
        100% { opacity: 0; transform: translate(-50%, 20px); }
    }
`;
document.head.appendChild(style);

总结与进阶

恭喜！你已经成功创建了一个功能完整的淘宝风格商品页面。

（图片来源网络，侵删）

我们做了什么：

HTML：搭建了页面的基本结构，包括头部、主体（图片和信息区）和页脚。
CSS：使用 Flexbox 布局实现了左右分栏，并添加了各种样式，使其美观且具有响应式设计的基础。
JavaScript：实现了四个核心交互功能：
- 点击缩略图切换主图。
- 使用和按钮调整购买数量。
- 选择商品颜色（并预留了扩展接口）。
- 点击“加入购物车”和“立即购买”按钮，并给出了用户友好的反馈。

如何进一步改进？

响应式设计：使用 CSS Media Queries，让页面在手机和平板上也能完美显示。
轮播图：为图片添加自动轮播功能。
SKU 选择：当选择不同颜色或规格时，动态更新价格和库存信息。
更真实的交互：使用 AJAX 向后端发送请求，模拟真实的加入购物车和购买流程。
更多细节：添加商品详情标签页（如“宝贝详情”、“规格与包装”等）。

这个项目是学习前端开发的绝佳起点,希望这个教程对你有帮助！

淘宝商品网页HTML怎么做？

最终效果预览

第一步：准备工作

第二步：HTML 结构 (index.html)

第三步：CSS 样式 (style.css)

第四步：JavaScript 交互 (script.js)

总结与进阶

第二步：HTML 结构 (`index.html`)

第三步：CSS 样式 (`style.css`)

第四步：JavaScript 交互 (`script.js`)