网上书店HTML模板如何快速搭建？

模板特点

• 响应式设计: 适配桌面、平板和手机等各种屏幕尺寸。
• 现代美观: 采用简洁的设计风格，配色和谐,布局清晰。
• 功能完整: 包含了商品展示、分类筛选、购物车、搜索等核心电商功能。
• 代码清晰: 使用 HTML5, CSS3 和原生 JavaScript,易于理解和修改。
• 模块化: 代码结构清晰，方便您后续集成后端数据（如 PHP, Node.js, Python 等）。

文件结构

为了方便管理,建议您创建以下文件结构：

bookstore/
├── index.html          # 首页
├── book-detail.html    # 图书详情页
├── cart.html           # 购物车页面
├── css/
│   └── style.css       # 全局样式
├── js/
│   └── script.js       # 交互逻辑 (JavaScript)
└── images/
    ├── book1.jpg       # 示例图书图片
    ├── book2.jpg
    └── ...             # 更多图片

全局样式 (css/style.css)

这个文件包含了所有页面共用的样式。

/* --- 全局样式 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
}
a {
    text-decoration: none;
    color: #333;
}
ul {
    list-style: none;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
/* --- 头部导航 --- */
.header {
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}
.navbar .logo {
    font-size: 1.8rem;
    font-weight: bold;
    color: #2c3e50;
}
.navbar .nav-links {
    display: flex;
    gap: 20px;
}
.navbar .nav-links a {
    font-weight: 500;
    transition: color 0.3s;
}
.navbar .nav-links a:hover {
    color: #3498db;
}
.navbar .cart-icon {
    position: relative;
    cursor: pointer;
}
.navbar .cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #e74c3c;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}
/* --- 主要内容区域 --- */
.main-content {
    padding: 40px 0;
}
/* --- 图书网格 --- */
.books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
}
.book-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
}
.book-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.book-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}
.book-info {
    padding: 15px;
}
.book-info h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: #2c3e50;
}
.book-info .author {
    color: #7f8c8d;
    font-size: 0.9rem;
    margin-bottom: 10px;
}
.book-info .price {
    font-size: 1.3rem;
    font-weight: bold;
    color: #e74c3c;
}
/* --- 按钮样式 --- */
.btn {
    display: inline-block;
    padding: 10px 20px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.3s;
}
.btn:hover {
    background: #2980b9;
}
.btn-secondary {
    background: #95a5a6;
}
.btn-secondary:hover {
    background: #7f8c8d;
}
.btn-danger {
    background: #e74c3c;
}
.btn-danger:hover {
    background: #c0392b;
}
/* --- 图书详情页 --- */
.book-detail-container {
    display: flex;
    gap: 40px;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.book-detail-container img {
    width: 400px;
    height: auto;
    border-radius: 5px;
}
.book-details {
    flex: 1;
}
.book-details h1 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #2c3e50;
}
.book-details .author {
    font-size: 1.2rem;
    color: #7f8c8d;
    margin-bottom: 20px;
}
.book-details .description {
    margin-bottom: 20px;
    color: #555;
}
.book-details .price {
    font-size: 2rem;
    font-weight: bold;
    color: #e74c3c;
    margin-bottom: 20px;
}
/* --- 购物车页面 --- */
.cart-container {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.cart-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
.cart-table th, .cart-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
.cart-table th {
    font-weight: bold;
    color: #2c3e50;
}
.cart-table img {
    width: 80px;
    height: 100px;
    object-fit: cover;
    border-radius: 5px;
}
.cart-table .quantity-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cart-table .quantity-controls button {
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    background: #f9f9f9;
    cursor: pointer;
    border-radius: 5px;
}
.cart-total {
    text-align: right;
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 20px;
    color: #2c3e50;
}
.cart-actions {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 20px;
}
/* --- 页脚 --- */
.footer {
    background: #2c3e50;
    color: #ecf0f1;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        gap: 15px;
    }
    .books-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
    }
    .book-detail-container {
        flex-direction: column;
    }
    .book-detail-container img {
        width: 100%;
    }
    .cart-table {
        font-size: 0.9rem;
    }
    .cart-table img {
        width: 60px;
        height: 80px;
    }
}

交互逻辑 (js/script.js)

这个文件处理购物车的添加、更新、删除和本地存储功能。

// --- 购物车功能 ---
// 从 localStorage 加载购物车
let cart = JSON.parse(localStorage.getItem('cart')) || [];
// 更新购物车图标上的数量
function updateCartCount() {
    const cartCountElement = document.querySelector('.cart-count');
    if (cartCountElement) {
        const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
        cartCountElement.textContent = totalItems;
        cartCountElement.style.display = totalItems > 0 ? 'flex' : 'none';
    }
}
// 保存购物车到 localStorage
function saveCart() {
    localStorage.setItem('cart', JSON.stringify(cart));
    updateCartCount();
}
// 添加商品到购物车
function addToCart(book) {
    const existingItem = cart.find(item => item.id === book.id);
    if (existingItem) {
        existingItem.quantity += 1;
    } else {
        cart.push({ ...book, quantity: 1 });
    }
    saveCart();
    alert(`《${book.title}》已加入购物车！`);
}
// 从购物车中移除商品
function removeFromFromCart(bookId) {
    cart = cart.filter(item => item.id !== bookId);
    saveCart();
    renderCart(); // 重新渲染购物车页面
}
// 更新商品数量
function updateQuantity(bookId, change) {
    const item = cart.find(item => item.id === bookId);
    if (item) {
        item.quantity += change;
        if (item.quantity <= 0) {
            removeFromFromCart(bookId);
        } else {
            saveCart();
            renderCart(); // 重新渲染购物车页面
        }
    }
}
// 渲染购物车页面
function renderCart() {
    const cartContainer = document.querySelector('.cart-container');
    if (!cartContainer) return; // 如果不在购物车页面，则不执行
    if (cart.length === 0) {
        cartContainer.innerHTML = '<p>您的购物车是空的。</p>';
        return;
    }
    let tableHTML = `
        <table class="cart-table">
            <thead>
                <tr>
                    <th>商品</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
    `;
    let total = 0;
    cart.forEach(item => {
        const subtotal = item.price * item.quantity;
        total += subtotal;
        tableHTML += `
            <tr>
                <td>
                    <div style="display: flex; align-items: center; gap: 15px;">
                        <img src="${item.image}" alt="${item.title}">
                        <span>${item.title}</span>
                    </div>
                </td>
                <td>¥${item.price.toFixed(2)}</td>
                <td>
                    <div class="quantity-controls">
                        <button onclick="updateQuantity(${item.id}, -1)">-</button>
                        <span>${item.quantity}</span>
                        <button onclick="updateQuantity(${item.id}, 1)">+</button>
                    </div>
                </td>
                <td>¥${subtotal.toFixed(2)}</td>
                <td><button class="btn btn-danger" onclick="removeFromFromCart(${item.id})">删除</button></td>
            </tr>
        `;
    });
    tableHTML += `
            </tbody>
        </table>
        <div class="cart-total">总计: ¥${total.toFixed(2)}</div>
        <div class="cart-actions">
            <a href="index.html" class="btn btn-secondary">继续购物</a>
            <button class="btn">结算</button>
        </div>
    `;
    cartContainer.innerHTML = tableHTML;
}
// 页面加载时执行
document.addEventListener('DOMContentLoaded', () => {
    updateCartCount();
    renderCart(); // 在购物车页面加载时渲染
});

首页 (index.html)

这是书店的主页,展示图书列表。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">悦读书店 - 您的知识宝库</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- 头部导航 -->
    <header class="header">
        <div class="container">
            <nav class="navbar">
                <a href="index.html" class="logo">悦读书店</a>
                <ul class="nav-links">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="#">小说</a></li>
                    <li><a href="#">科技</a></li>
                    <li><a href="#">历史</a></li>
                    <li><a href="#">艺术</a></li>
                </ul>
                <a href="cart.html" class="cart-icon">
                    🛒
                    <span class="cart-count">0</span>
                </a>
            </nav>
        </div>
    </header>
    <!-- 主要内容 -->
    <main class="main-content">
        <div class="container">
            <h1 style="margin-bottom: 30px; text-align: center; color: #2c3e50;">热门推荐</h1>
            <div class="books-grid">
                <!-- 图书卡片 1 -->
                <div class="book-card" onclick="window.location.href='book-detail.html?id=1'">
                    <img src="images/book1.jpg" alt="人类简史">
                    <div class="book-info">
                        <h3>人类简史</h3>
                        <p class="author">尤瓦尔·赫拉利</p>
                        <p class="price">¥68.00</p>
                        <button class="btn" onclick="event.stopPropagation(); addToCart({id: 1, title: '人类简史', price: 68, image: 'images/book1.jpg'})">加入购物车</button>
                    </div>
                </div>
                <!-- 图书卡片 2 -->
                <div class="book-card" onclick="window.location.href='book-detail.html?id=2'">
                    <img src="images/book2.jpg" alt="三体">
                    <div class="book-info">
                        <h3>三体</h3>
                        <p class="author">刘慈欣</p>
                        <p class="price">¥45.00</p>
                        <button class="btn" onclick="event.stopPropagation(); addToCart({id: 2, title: '三体', price: 45, image: 'images/book2.jpg'})">加入购物车</button>
                    </div>
                </div>
                <!-- 图书卡片 3 -->
                <div class="book-card" onclick="window.location.href='book-detail.html?id=3'">
                    <img src="images/book3.jpg" alt="活着">
                    <div class="book-info">
                        <h3>活着</h3>
                        <p class="author">余华</p>
                        <p class="price">¥35.00</p>
                        <button class="btn" onclick="event.stopPropagation(); addToCart({id: 3, title: '活着', price: 35, image: 'images/book3.jpg'})">加入购物车</button>
                    </div>
                </div>
                <!-- 图书卡片 4 -->
                <div class="book-card" onclick="window.location.href='book-detail.html?id=4'">
                    <img src="images/book4.jpg" alt="百年孤独">
                    <div class="book-info">
                        <h3>百年孤独</h3>
                        <p class="author">加西亚·马尔克斯</p>
                        <p class="price">¥55.00</p>
                        <button class="btn" onclick="event.stopPropagation(); addToCart({id: 4, title: '百年孤独', price: 55, image: 'images/book4.jpg'})">加入购物车</button>
                    </div>
                </div>
                 <!-- 图书卡片 5 -->
                 <div class="book-card" onclick="window.location.href='book-detail.html?id=5'">
                    <img src="images/book5.jpg" alt="原则">
                    <div class="book-info">
                        <h3>原则</h3>
                        <p class="author">瑞·达利欧</p>
                        <p class="price">¥98.00</p>
                        <button class="btn" onclick="event.stopPropagation(); addToCart({id: 5, title: '原则', price: 98, image: 'images/book5.jpg'})">加入购物车</button>
                    </div>
                </div>
                 <!-- 图书卡片 6 -->
                 <div class="book-card" onclick="window.location.href='book-detail.html?id=6'">
                    <img src="images/book6.jpg" alt="小王子">
                    <div class="book-info">
                        <h3>小王子</h3>
                        <p class="author">安托万·德·圣-埃克苏佩里</p>
                        <p class="price">¥28.00</p>
                        <button class="btn" onclick="event.stopPropagation(); addToCart({id: 6, title: '小王子', price: 28, image: 'images/book6.jpg'})">加入购物车</button>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2025 悦读书店. All rights reserved.</p>
        </div>
    </footer>
    <script src="js/script.js"></script>
</body>
</html>

图书详情页 (book-detail.html)

展示单本图书的详细信息。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">图书详情 - 悦读书店</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- 头部导航 (与首页相同) -->
    <header class="header">
        <div class="container">
            <nav class="navbar">
                <a href="index.html" class="logo">悦读书店</a>
                <ul class="nav-links">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="#">小说</a></li>
                    <li><a href="#">科技</a></li>
                    <li><a href="#">历史</a></li>
                    <li><a href="#">艺术</a></li>
                </ul>
                <a href="cart.html" class="cart-icon">
                    🛒
                    <span class="cart-count">0</span>
                </a>
            </nav>
        </div>
    </header>
    <!-- 主要内容 -->
    <main class="main-content">
        <div class="container">
            <div class="book-detail-container" id="bookDetail">
                <!-- 图书数据将通过 JavaScript 动态加载 -->
                <p>加载中...</p>
            </div>
        </div>
    </main>
    <!-- 页脚 (与首页相同) -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2025 悦读书店. All rights reserved.</p>
        </div>
    </footer>
    <script src="js/script.js"></script>
    <script>
        // 模拟的图书数据库
        const booksDB = {
            1: {
                id: 1,
                title: "人类简史",
                author: "尤瓦尔·赫拉利",
                price: 68.00,
                image: "images/book1.jpg",
                description: "《人类简史：从动物到上帝》是以色列新锐历史学家尤瓦尔·赫拉利的一部重磅作品，从十万年前有生命迹象开始到21世纪资本、科技交织的人类发展史，十万年前，地球上至少有六个人种，为何今天却只剩下了我们自己？我们曾经只是非洲角落一个毫不起眼的族群，对地球上生态的影响力和萤火虫、猩猩或者水母相差无几，为何我们能登上生物链的顶端，最终成为地球的主宰？"
            },
            2: {
                id: 2,
                title: "三体",
                author: "刘慈欣",
                price: 45.00,
                image: "images/book2.jpg",
                description: "文化大革命如火如荼进行的同时，军方探寻外星文明的绝秘计划“红岸工程”取得了突破性进展，但在按下发射键的那一刻，历史没有如预想的那样继续演进，四光年外，“三体文明”正苦于三颗无规则运行的太阳所带来的极端气候，急于寻找新的家园，在运用超技术锁死地球人的基础科学之后，庞大的三体舰队开始向地球进发，人类的末日悄然来临。"
            },
            3: {
                id: 3,
                title: "活着",
                author: "余华",
                price: 35.00,
                image: "images/book3.jpg",
                description: "《活着》讲述了在大时代背景下，随着内战、三反五反，大跃进，文化大革命等社会变革，徐福贵的人生和家庭不断经受着苦难，到了最后所有亲人都先后离他而去，仅剩下年老的他和一头老牛相依为命。"
            }
            // ... 可以继续添加更多图书数据
        };
        document.addEventListener('DOMContentLoaded', () => {
            updateCartCount(); // 更新购物车数量
            // 从 URL 获取图书 ID
            const urlParams = new URLSearchParams(window.location.search);
            const bookId = urlParams.get('id');
            if (bookId && booksDB[bookId]) {
                const book = booksDB[bookId];
                const bookDetailContainer = document.getElementById('bookDetail');
                bookDetailContainer.innerHTML = `
                    <img src="${book.image}" alt="${book.title}">
                    <div class="book-details">
                        <h1>${book.title}</h1>
                        <p class="author">作者：${book.author}</p>
                        <p class="description">${book.description}</p>
                        <p class="price">¥${book.price.toFixed(2)}</p>
                        <button class="btn" onclick="addToCart({id: ${book.id}, title: '${book.title}', price: ${book.price}, image: '${book.image}'})">加入购物车</button>
                    </div>
                `;
            } else {
                document.getElementById('bookDetail').innerHTML = '<p>未找到该图书。</p>';
            }
        });
    </script>
</body>
</html>

购物车页面 (cart.html)

展示用户已选择的商品。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">购物车 - 悦读书店</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- 头部导航 (与首页相同) -->
    <header class="header">
        <div class="container">
            <nav class="navbar">
                <a href="index.html" class="logo">悦读书店</a>
                <ul class="nav-links">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="#">小说</a></li>
                    <li><a href="#">科技</a></li>
                    <li><a href="#">历史</a></li>
                    <li><a href="#">艺术</a></li>
                </ul>
                <a href="cart.html" class="cart-icon">
                    🛒
                    <span class="cart-count">0</span>
                </a>
            </nav>
        </div>
    </header>
    <!-- 主要内容 -->
    <main class="main-content">
        <div class="container">
            <h1 style="margin-bottom: 30px; color: #2c3e50;">我的购物车</h1>
            <div class="cart-container">
                <!-- 购物车内容将通过 JavaScript 动态加载 -->
            </div>
        </div>
    </main>
    <!-- 页脚 (与首页相同) -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2025 悦读书店. All rights reserved.</p>
        </div>
    </footer>
    <script src="js/script.js"></script>
</body>
</html>

如何使用这个模板

1. 创建文件和目录: 按照上面的文件结构创建所有文件和文件夹。
2. 复制代码: 将对应的代码复制到相应的文件中。
3. 准备图片: 在 images 文件夹中放入一些图书封面图片，并命名为 book1.jpg, book2.jpg 等，然后在 HTML 中引用它们。
4. 打开首页: 用浏览器打开 index.html 文件,您应该能看到一个功能完整的网上书店首页。
5. 测试功能:
   • 点击图书卡片进入详情页。
   • 在详情页或首页点击“加入购物车”按钮,观察右上角购物车图标数量的变化。
   • 点击购物车图标进入购物车页面，查看、修改数量或删除商品。

后续可以扩展的方向

• 后端集成: 将 booksDB 从 JavaScript 对象替换为从服务器 API (如 RESTful API) 获取数据。
• 用户系统: 添加登录和注册功能，实现用户个人中心、订单管理等。
• 搜索和筛选: 在首页添加搜索框和分类筛选器,让用户能更快找到想要的图书。
• 支付集成: 集成第三方支付接口（如支付宝、微信支付）。
• UI/UX 优化: 添加加载动画、更丰富的交互效果等。

这个模板为您提供了一个坚实的基础,希望能帮助您快速构建自己的网上书店项目！