在线预览与代码结构
为了方便您理解,我将整个模板分为几个核心部分：
（图片来源网络，侵删）
index.html- 首页，展示商品列表、轮播图、分类导航等。product.html- 商品详情页,展示单个商品的详细信息。cart.html- 购物车页面,展示已选商品并支持结算。style.css- 自定义样式文件，用于美化页面,覆盖默认样式。script.js- 核心交互脚本，实现购物车、数量选择、图片切换等功能。
核心文件代码
您可以直接复制以下代码到对应的文件中，然后在浏览器中打开 index.html 即可看到效果。
A. 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>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome 8 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 顶部导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
<div class="container">
<a class="navbar-brand" href="index.html">
<i class="fas fa-store"></i> 优选商城
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" href="index.html">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">分类</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">热卖</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">新品</a>
</li>
</ul>
<form class="d-flex me-3" role="search">
<input class="form-control me-2" type="search" placeholder="搜索商品" aria-label="Search">
<button class="btn btn-outline-success" type="submit">搜索</button>
</form>
<a href="cart.html" class="btn btn-outline-light position-relative">
<i class="fas fa-shopping-cart"></i> 购物车
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
3
</span>
</a>
</div>
</div>
</nav>
<!-- 轮播图 -->
<div id="mainCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="2"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/1200x400/343a40/ffffff?text=Banner+1" class="d-block w-100" alt="Banner 1">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1200x400/6c757d/ffffff?text=Banner+2" class="d-block w-100" alt="Banner 2">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1200x400/212529/ffffff?text=Banner+3" class="d-block w-100" alt="Banner 3">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#mainCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<!-- 商品分类 -->
<section class="container my-5">
<h2 class="text-center mb-4">热门分类</h2>
<div class="row g-4">
<div class="col-md-3 col-6">
<div class="card text-center h-100">
<div class="card-body">
<i class="fas fa-mobile-alt fa-3x text-primary mb-3"></i>
<h5 class="card-title">手机数码</h5>
</div>
</div>
</div>
<div class="col-md-3 col-6">
<div class="card text-center h-100">
<div class="card-body">
<i class="fas fa-tshirt fa-3x text-success mb-3"></i>
<h5 class="card-title">服装鞋包</h5>
</div>
</div>
</div>
<div class="col-md-3 col-6">
<div class="card text-center h-100">
<div class="card-body">
<i class="fas fa-home fa-3x text-info mb-3"></i>
<h5 class="card-title">家居生活</h5>
</div>
</div>
</div>
<div class="col-md-3 col-6">
<div class="card text-center h-100">
<div class="card-body">
<i class="fas fa-dumbbell fa-3x text-warning mb-3"></i>
<h5 class="card-title">运动户外</h5>
</div>
</div>
</div>
</div>
</section>
<!-- 精选商品 -->
<section class="container my-5">
<h2 class="text-center mb-4">精选商品</h2>
<div class="row g-4">
<!-- 商品卡片 1 -->
<div class="col-lg-3 col-md-4 col-6">
<div class="card product-card h-100">
<img src="https://via.placeholder.com/300x300/007bff/ffffff?text=商品1" class="card-img-top" alt="商品图片">
<div class="card-body d-flex flex-column">
<h5 class="card-title">时尚智能手表</h5>
<p class="card-text text-muted">健康监测，消息提醒，超长续航。</p>
<div class="mt-auto">
<div class="d-flex justify-content-between align-items-center">
<span class="h5 text-danger mb-0">¥899</span>
<a href="product.html" class="btn btn-sm btn-outline-primary">查看详情</a>
</div>
</div>
</div>
</div>
</div>
<!-- 商品卡片 2 -->
<div class="col-lg-3 col-md-4 col-6">
<div class="card product-card h-100">
<img src="https://via.placeholder.com/300x300/28a745/ffffff?text=商品2" class="card-img-top" alt="商品图片">
<div class="card-body d-flex flex-column">
<h5 class="card-title">无线降噪耳机</h5>
<p class="card-text text-muted">Hi-Fi音质，主动降噪，舒适佩戴。</p>
<div class="mt-auto">
<div class="d-flex justify-content-between align-items-center">
<span class="h5 text-danger mb-0">¥1299</span>
<a href="product.html" class="btn btn-sm btn-outline-primary">查看详情</a>
</div>
</div>
</div>
</div>
</div>
<!-- 商品卡片 3 -->
<div class="col-lg-3 col-md-4 col-6">
<div class="card product-card h-100">
<img src="https://via.placeholder.com/300x300/dc3545/ffffff?text=商品3" class="card-img-top" alt="商品图片">
<div class="card-body d-flex flex-column">
<h5 class="card-title">便携式投影仪</h5>
<p class="card-text text-muted">高清1080P，自动对焦，安卓智能系统。</p>
<div class="mt-auto">
<div class="d-flex justify-content-between align-items-center">
<span class="h5 text-danger mb-0">¥2499</span>
<a href="product.html" class="btn btn-sm btn-outline-primary">查看详情</a>
</div>
</div>
</div>
</div>
</div>
<!-- 商品卡片 4 -->
<div class="col-lg-3 col-md-4 col-6">
<div class="card product-card h-100">
<img src="https://via.placeholder.com/300x300/ffc107/ffffff?text=商品4" class="card-img-top" alt="商品图片">
<div class="card-body d-flex flex-column">
<h5 class="card-title">人体工学椅</h5>
<p class="card-text text-muted">腰背支撑，透气网布，久坐不累。</p>
<div class="mt-auto">
<div class="d-flex justify-content-between align-items-center">
<span class="h5 text-danger mb-0">¥1599</span>
<a href="product.html" class="btn btn-sm btn-outline-primary">查看详情</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-dark text-white py-4 mt-5">
<div class="container text-center">
<p>© 2025 优选商城. All rights reserved.</p>
</div>
</footer>
<!-- Bootstrap 5 JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom JS -->
<script src="script.js"></script>
</body>
</html>
B. product.html (商品详情页)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">商品详情 - 优选商城</title>
<!-- 引入 index.html 中的 CSS 和 JS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 顶部导航栏 (与首页相同) -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
<div class="container">
<a class="navbar-brand" href="index.html">
<i class="fas fa-store"></i> 优选商城
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">首页</a>
</li>
<!-- ... 其他导航项 ... -->
</ul>
<a href="cart.html" class="btn btn-outline-light position-relative">
<i class="fas fa-shopping-cart"></i> 购物车
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
3
</span>
</a>
</div>
</div>
</nav>
<!-- 商品详情内容 -->
<div class="container my-5">
<div class="row">
<!-- 左侧图片 -->
<div class="col-md-5">
<img id="main-product-image" src="https://via.placeholder.com/500x500/007bff/ffffff?text=主图" class="img-fluid rounded" alt="商品主图">
<div class="row mt-3 g-2">
<div class="col-3"><img src="https://via.placeholder.com/150x150/28a745/ffffff?text=图1" class="img-fluid img-thumbnail" onclick="changeImage(this.src)"></div>
<div class="col-3"><img src="https://via.placeholder.com/150x150/dc3545/ffffff?text=图2" class="img-fluid img-thumbnail" onclick="changeImage(this.src)"></div>
<div class="col-3"><img src="https://via.placeholder.com/150x150/ffc107/ffffff?text=图3" class="img-fluid img-thumbnail" onclick="changeImage(this.src)"></div>
<div class="col-3"><img src="https://via.placeholder.com/150x150/6c757d/ffffff?text=图4" class="img-fluid img-thumbnail" onclick="changeImage(this.src)"></div>
</div>
</div>
<!-- 右侧信息 -->
<div class="col-md-7">
<h2>时尚智能手表</h2>
<p class="text-muted">型号: SW-2025-Pro</p>
<div class="d-flex align-items-center mb-3">
<div class="text-warning me-2">
<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="far fa-star"></i>
</div>
<span class="text-muted">(128条评价)</span>
</div>
<hr>
<h3 class="text-danger">¥899</h3>
<p class="text-muted">市场价: <del>¥1299</del></p>
<p>这是一款功能强大的智能手表，拥有心率监测、血氧检测、睡眠分析、GPS定位等多种功能，1.4英寸高清AMOLED屏幕，支持多种表盘自定义，续航长达14天。</p>
<hr>
<div class="d-flex align-items-center mb-4">
<span class="me-3">数量:</span>
<div class="input-group" style="width: 120px;">
<button class="btn btn-outline-secondary" type="button" id="decrease-qty">-</button>
<input type="number" class="form-control text-center" id="quantity" value="1" min="1">
<button class="btn btn-outline-secondary" type="button" id="increase-qty">+</button>
</div>
</div>
<div class="d-grid gap-2 d-md-flex">
<button class="btn btn-primary btn-lg flex-fill me-md-2" onclick="addToCart()">
<i class="fas fa-cart-plus me-2"></i>加入购物车
</button>
<button class="btn btn-danger btn-lg flex-fill">
<i class="fas fa-bolt me-2"></i>立即购买
</button>
</div>
</div>
</div>
<!-- 商品详情标签页 -->
<div class="row mt-5">
<div class="col-12">
<ul class="nav nav-tabs" id="productDetailTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="description-tab" data-bs-toggle="tab" data-bs-target="#description" type="button">商品详情</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="specs-tab" data-bs-toggle="tab" data-bs-target="#specs" type="button">规格参数</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="reviews-tab" data-bs-toggle="tab" data-bs-target="#reviews" type="button">用户评价</button>
</li>
</ul>
<div class="tab-content" id="productDetailTabsContent">
<div class="tab-pane fade show active" id="description">
<div class="p-4">
<img src="https://via.placeholder.com/800x400/e9ecef/000000?text=商品详情图" class="img-fluid mb-3" alt="商品详情图">
<p>这里是商品的详细介绍内容，可以包含图片、文字、列表等多种格式...</p>
</div>
</div>
<div class="tab-pane fade" id="specs">
<div class="p-4">
<table class="table table-striped">
<tr><td>品牌</td><td>优选科技</td></tr>
<tr><td>型号</td><td>SW-2025-Pro</td></tr>
<tr><td>屏幕尺寸</td><td>1.4英寸</td></tr>
<tr><td>操作系统</td><td>RTOS</td></tr>
</table>
</div>
</div>
<div class="tab-pane fade" id="reviews">
<div class="p-4">
<p>暂无评价，成为第一个评价的人吧！</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 页脚 (与首页相同) -->
<footer class="bg-dark text-white py-4 mt-5">
<div class="container text-center">
<p>© 2025 优选商城. All rights reserved.</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
<script>
// 商品详情页特有JS
function changeImage(src) {
document.getElementById('main-product-image').src = src;
}
</script>
</body>
</html>
C. 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>
<!-- 引入 index.html 中的 CSS 和 JS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 顶部导航栏 (与首页相同) -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
<div class="container">
<a class="navbar-brand" href="index.html">
<i class="fas fa-store"></i> 优选商城
</a>
<!-- ... 导航栏其他部分 ... -->
</div>
</nav>
<!-- 购物车内容 -->
<div class="container my-5">
<h2 class="mb-4">我的购物车</h2>
<div class="table-responsive">
<table class="table table-hover align-middle">
<thead>
<tr>
<th width="5%"></th>
<th width="30%">商品信息</th>
<th width="15%">单价</th>
<th width="20%">数量</th>
<th width="15%">小计</th>
<th width="15%">操作</th>
</tr>
</thead>
<tbody id="cart-items">
<!-- 购物车项目 1 -->
<tr>
<td><input class="form-check-input" type="checkbox" checked></td>
<td>
<div class="d-flex">
<img src="https://via.placeholder.com/100x100/007bff/ffffff?text=商品1" class="img-thumbnail me-3" alt="商品图">
<div>
<h6 class="mb-1">时尚智能手表</h6>
<p class="text-muted mb-0 small">颜色: 黑色 | 尺寸: 42mm</p>
</div>
</div>
</td>
<td>¥899</td>
<td>
<div class="input-group" style="width: 120px;">
<button class="btn btn-outline-secondary btn-sm" type="button">-</button>
<input type="number" class="form-control text-center" value="1" min="1">
<button class="btn btn-outline-secondary btn-sm" type="button">+</button>
</div>
</td>
<td class="fw-bold">¥899</td>
<td><a href="#" class="btn btn-sm btn-link text-danger p-0">删除</a></td>
</tr>
<!-- 购物车项目 2 -->
<tr>
<td><input class="form-check-input" type="checkbox" checked></td>
<td>
<div class="d-flex">
<img src="https://via.placeholder.com/100x100/28a745/ffffff?text=商品2" class="img-thumbnail me-3" alt="商品图">
<div>
<h6 class="mb-1">无线降噪耳机</h6>
<p class="text-muted mb-0 small">颜色: 白色</p>
</div>
</div>
</td>
<td>¥1299</td>
<td>
<div class="input-group" style="width: 120px;">
<button class="btn btn-outline-secondary btn-sm" type="button">-</button>
<input type="number" class="form-control text-center" value="2" min="1">
<button class="btn btn-outline-secondary btn-sm" type="button">+</button>
</div>
</td>
<td class="fw-bold">¥2598</td>
<td><a href="#" class="btn btn-sm btn-link text-danger p-0">删除</a></td>
</tr>
</tbody>
</table>
</div>
<div class="d-flex justify-content-between align-items-center mt-4">
<a href="index.html" class="btn btn-outline-secondary">
<i class="fas fa-arrow-left me-2"></i>继续购物
</a>
<div class="d-flex align-items-center">
<span class="me-3">已选商品 <span class="text-danger">2</span> 件</span>
<span class="h4 me-4 mb-0">合计: <span class="text-danger">¥3497</span></span>
<button class="btn btn-danger btn-lg">去结算(2)</button>
</div>
</div>
</div>
<!-- 页脚 (与首页相同) -->
<footer class="bg-dark text-white py-4 mt-5">
<div class="container text-center">
<p>© 2025 优选商城. All rights reserved.</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>
D. style.css (自定义样式)
/* 全局样式 */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f8f9fa;
}
/* 导航栏样式 */
.navbar-brand {
font-weight: bold;
font-size: 1.5rem;
}
/* 轮播图样式 */
.carousel-item {
height: 400px;
}
.carousel-item img {
object-fit: cover;
height: 100%;
}
/* 商品卡片样式 */
.product-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.product-card .card-img-top {
height: 250px;
object-fit: cover;
}
/* 购物车数量选择器样式 */
.input-group button {
width: 40px;
}
E. script.js (交互脚本)
// 购物车功能
document.addEventListener('DOMContentLoaded', function() {
// 购物车数量增减
const qtyInput = document.getElementById('quantity');
if (qtyInput) {
const decreaseBtn = document.getElementById('decrease-qty');
const increaseBtn = document.getElementById('increase-qty');
decreaseBtn.addEventListener('click', () => {
if (qtyInput.value > 1) {
qtyInput.value = parseInt(qtyInput.value) - 1;
}
});
increaseBtn.addEventListener('click', () => {
qtyInput.value = parseInt(qtyInput.value) + 1;
});
}
// 加入购物车函数 (模拟)
window.addToCart = function() {
const productTitle = document.querySelector('#product-details h2').textContent;
const quantity = document.getElementById('quantity').value;
// 在实际应用中，这里应该发送AJAX请求到后端
alert(`已将 ${quantity} 件 "${productTitle}" 加入购物车！`);
// 模拟更新购物车图标上的数字
let cartBadge = document.querySelector('.badge.bg-danger');
if(cartBadge) {
let currentCount = parseInt(cartBadge.textContent);
cartBadge.textContent = currentCount + parseInt(quantity);
}
}
});
如何使用这个模板
- 创建文件: 在您的项目文件夹中，创建
index.html,product.html,cart.html,style.css, 和script.js这五个文件。 - 复制代码: 将上面提供的代码分别粘贴到对应的文件中。
- 本地预览: 使用浏览器打开
index.html文件,您就可以看到一个功能完整的商城首页了。 - 跳转测试:
- 点击首页的“查看详情”可以跳转到商品详情页。
- 点击导航栏的购物车图标可以跳转到购物车页面。
- 在商品详情页点击“加入购物车”，会弹出一个提示,并且购物车图标上的数字会增加。
- 在商品详情页点击小图,主图会切换。
如何扩展和定制
- 更换图片: 将所有
https://via.placeholder.com/...替换为您自己的商品图片URL。 - : 直接在HTML文件中修改商品名称、价格、描述等文本内容。
- 调整样式: 在
style.css文件中修改颜色、字体、间距等,以符合您的品牌风格。 - 后端集成: 目前所有数据都是硬编码的，要将其变为一个真正的网站，您需要：
- 后端API: 使用 Node.js (Express), Python (Django/Flask), PHP (Laravel) 等技术创建API，用于提供商品列表、商品详情、购物车数据等。
- 数据库: 使用 MySQL, PostgreSQL, MongoDB 等数据库来存储商品信息、用户信息、订单数据等。
- 前后端通信: 使用
fetch或axios在script.js中调用后端API,动态获取和展示数据。
这个模板为您提供了一个非常棒的起点,希望能帮助您快速构建出您的商城网站！
（图片来源网络，侵删）
