当前位置：首页 > 行业动态 > 正文

html购物网站制作教程

admin
行业动态
2025-04-26
2

HTML购物网站需设计商品页、购物车、支付流程，结合CSS布局与JS交互，整合后端接口实现完整功能

HTML购物网站制作教程

网站整体规划

确定网站功能模块

模块名称	功能描述
首页	展示网站logo、导航栏、轮播图、热门商品推荐
商品分类	按品类展示商品列表（如服装/数码/食品）
商品详情	展示商品图片、价格、参数、加入购物车按钮
购物车	显示选中商品、数量、单价、总价及结算功能
用户中心	登录/注册、订单管理、个人信息修改

设计文件结构

文件类型	文件示例	用途说明
HTML	index.html	网站首页
HTML	product.html	商品详情页
HTML	cart.html	购物车页面
CSS	style.css	全局样式表
JS	script.js	交互功能脚本
IMG	/images/	存放商品图片

核心页面制作

创建首页基础结构

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">购物网站</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="logo">网站LOGO</div>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="category.html">商品分类</a></li>
                <li><a href="cart.html">购物车</a></li>
                <li><a href="user.html">个人中心</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <!-轮播图 -->
        <div class="carousel">
            <img src="images/banner.jpg" alt="促销广告">
        </div>
        <!-商品推荐 -->
        <div class="product-list">
            <h3>热门推荐</h3>
            <div class="product-item">
                <img src="images/product1.jpg" alt="商品1">
                <span class="price">¥99.00</span>
                <button class="add-cart">加入购物车</button>
            </div>
            <!-更多商品条目 -->
        </div>
    </main>
    <footer>
        <p>版权所有 &copy; 2023 购物网站</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

商品详情页制作

<div class="product-detail">
    <div class="product-images">
        <img src="images/product1-large.jpg" alt="商品主图">
        <!-缩略图切换 -->
    </div>
    <div class="product-info">
        <h2>商品名称 XXXX</h2>
        <p class="price">¥199.0</p>
        <p>库存状态：<span id="stock">剩余5件</span></p>
        <div class="select-wrapper">
            <label>颜色：</label>
            <select id="color">
                <option value="red">红色</option>
                <option value="blue">蓝色</option>
            </select>
            <label>数量：</label>
            <input type="number" id="quantity" min="1" max="5" value="1">
        </div>
        <button id="buy-now">立即购买</button>
        <button id="add-cart">加入购物车</button>
    </div>
</div>

购物车功能实现

本地存储应用

// 添加商品到购物车
document.querySelectorAll('.add-cart').forEach(button => {
    button.addEventListener('click', function(){
        const product = {
            id: this.dataset.id,
            name: this.dataset.name,
            price: parseFloat(this.dataset.price),
            quantity: 1
        };
        addToCart(product);
    });
});
function addToCart(product){
    let cart = JSON.parse(localStorage.getItem('cart')) || [];
    const index = cart.findIndex(item => item.id === product.id);
    if(index > -1){
        cart[index].quantity += product.quantity;
    }else{
        cart.push(product);
    }
    localStorage.setItem('cart', JSON.stringify(cart));
    updateCartUI();
}

购物车数据展示

字段名称	数据类型	说明
id	String	商品唯一标识
name	String	商品名称
price	Number	单价（元）
quantity	Number	选购数量
total	Number	小计（自动计算）

用户系统开发

登录表单验证

<form id="login-form">
    <input type="text" name="username" placeholder="用户名" required>
    <input type="password" name="password" placeholder="密码" required>
    <button type="submit">登录</button>
</form>
<script>
    document.getElementById('login-form').addEventListener('submit', function(e){
        e.preventDefault();
        const username = e.target.username.value;
        const password = e.target.password.value;
        // 简单验证示例（实际应连接数据库）
        if(username === 'admin' && password === '123456'){
            alert('登录成功');
            window.location = 'user.html';
        }else{
            alert('账号或密码错误');
        }
    });
</script>

样式设计与优化

基础CSS样式

body {
    font-family: "Microsoft YaHei", sans-serif;
    background-color: #f8f8f8;
    margin: 0;
    padding: 0;
}
header {
    background-color: #ff6700;
    color: white;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
}
.product-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}