- 响应式设计: 完美适配桌面、平板和手机。
- 产品画廊: 多图展示,支持缩放和切换。
- 核心信息展示: 清晰展示标题、价格、促销信息。
- SKU 选择器: 颜色、尺码、规格等动态选择,影响库存和价格。
- 数量选择器: 带有库存限制的加减按钮。
- 用户评价预览: 展示评分和部分评论。
- 相关推荐: 横向滚动的推荐商品。
- 交互反馈: 加入购物车、收藏等按钮的动态效果。
最终效果预览
第一步：HTML 结构 (index.html)
这是整个页面的骨架，使用了语义化的 HTML5 标签。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">经典款小白鞋 - 产品详情</title>
<!-- 引入 Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入 Font Awesome 图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-100">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm">
<div class="container mx-auto px-4 py-3 flex items-center justify-between">
<a href="#" class="text-xl font-bold text-red-600">我的淘宝</a>
<div class="flex items-center space-x-4">
<a href="#" class="text-gray-600 hover:text-red-600"><i class="fas fa-search"></i></a>
<a href="#" class="text-gray-600 hover:text-red-600"><i class="fas fa-shopping-cart"></i></a>
<a href="#" class="text-gray-600 hover:text-red-600"><i class="fas fa-user"></i></a>
</div>
</div>
</header>
<main class="container mx-auto px-4 py-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- 左侧：产品图片 -->
<section class="bg-white p-6 rounded-lg shadow">
<div class="main-image mb-4">
<img id="main-img" src="https://via.placeholder.com/600x600/FFFFFF?text=Main+Image" alt="产品主图" class="w-full h-auto rounded-lg cursor-zoom-in">
</div>
<div class="thumbnail-list flex space-x-2 overflow-x-auto">
<img src="https://via.placeholder.com/150x150/EEEEEE?text=Thumb+1" alt="缩略图1" class="thumbnail w-20 h-20 object-cover rounded cursor-pointer border-2 border-red-500">
<img src="https://via.placeholder.com/150x150/DDDDDD?text=Thumb+2" alt="缩略图2" class="thumbnail w-20 h-20 object-cover rounded cursor-pointer border-2 border-transparent">
<img src="https://via.placeholder.com/150x150/CCCCCC?text=Thumb+3" alt="缩略图3" class="thumbnail w-20 h-20 object-cover rounded cursor-pointer border-2 border-transparent">
<img src="https://via.placeholder.com/150x150/BBBBBB?text=Thumb+4" alt="缩略图4" class="thumbnail w-20 h-20 object-cover rounded cursor-pointer border-2 border-transparent">
</div>
</section>
<!-- 右侧：产品信息和购买 -->
<section class="bg-white p-6 rounded-lg shadow">
<h1 class="text-2xl font-bold mb-2">2025新款 经典款百搭小白鞋 女款透气防滑运动鞋</h1>
<div class="mb-4">
<span class="text-3xl font-bold text-red-600">¥ 199.00</span>
<span class="text-gray-500 line-through ml-2">¥ 299.00</span>
<span class="bg-red-100 text-red-600 text-sm px-2 py-1 rounded ml-2">限时特惠</span>
</div>
<div class="mb-6">
<p class="text-gray-600 mb-2">已售 <span class="text-red-600 font-bold">20,000+</span> 件</p>
<p class="text-gray-600">累计评价 <span class="text-red-600 font-bold">5,000+</span> 条</p>
</div>
<!-- SKU 选择器 -->
<div class="mb-6">
<h3 class="font-semibold mb-3">选择颜色</h3>
<div class="flex space-x-3 mb-4">
<button class="sku-option border-2 border-gray-300 rounded px-4 py-2 hover:border-red-500 focus:border-red-500 focus:outline-none" data-sku="color-white">经典白</button>
<button class="sku-option border-2 border-gray-300 rounded px-4 py-2 hover:border-red-500 focus:border-red-500 focus:outline-none" data-sku="color-black">神秘黑</button>
</div>
<h3 class="font-semibold mb-3">选择尺码</h3>
<div class="flex flex-wrap gap-2">
<button class="size-option border border-gray-300 rounded w-12 h-10 hover:border-red-500 focus:border-red-500 focus:outline-none" data-sku="size-35">35</button>
<button class="size-option border border-gray-300 rounded w-12 h-10 hover:border-red-500 focus:border-red-500 focus:outline-none" data-sku="size-36">36</button>
<button class="size-option border border-gray-300 rounded w-12 h-10 hover:border-red-500 focus:border-red-500 focus:outline-none" data-sku="size-37">37</button>
<button class="size-option border border-gray-300 rounded w-12 h-10 hover:border-red-500 focus:border-red-500 focus:outline-none" data-sku="size-38">38</button>
<button class="size-option border border-gray-300 rounded w-12 h-10 hover:border-red-500 focus:border-red-500 focus:outline-none" data-sku="size-39">39</button>
<button class="size-option border border-gray-300 rounded w-12 h-10 hover:border-red-500 focus:border-red-500 focus:outline-none" data-sku="size-40">40</button>
</div>
</div>
<!-- 数量选择器 -->
<div class="mb-6">
<h3 class="font-semibold mb-3">数量</h3>
<div class="flex items-center">
<button id="decrease-btn" class="bg-gray-200 text-gray-700 w-10 h-10 rounded-l-lg hover:bg-gray-300 focus:outline-none">
<i class="fas fa-minus"></i>
</button>
<input id="quantity" type="number" value="1" min="1" max="99" class="w-16 h-10 text-center border-t border-b border-gray-300 focus:outline-none">
<button id="increase-btn" class="bg-gray-200 text-gray-700 w-10 h-10 rounded-r-lg hover:bg-gray-300 focus:outline-none">
<i class="fas fa-plus"></i>
</button>
<span class="ml-4 text-gray-600">库存 <span id="stock" class="text-red-600 font-bold">99</span> 件</span>
</div>
</div>
<!-- 购买按钮 -->
<div class="flex space-x-4 mb-6">
<button class="flex-1 bg-red-600 text-white py-3 rounded-lg font-bold hover:bg-red-700 transition duration-300">
立即购买
</button>
<button id="add-to-cart-btn" class="flex-1 bg-orange-500 text-white py-3 rounded-lg font-bold hover:bg-orange-600 transition duration-300">
加入购物车
</button>
</div>
<!-- 服务保障 -->
<div class="border-t pt-4">
<div class="flex items-center text-gray-600 text-sm mb-2">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>正品保证</span>
</div>
<div class="flex items-center text-gray-600 text-sm mb-2">
<i class="fas fa-shipping-fast text-blue-500 mr-2"></i>
<span>极速发货</span>
</div>
<div class="flex items-center text-gray-600 text-sm">
<i class="fas fa-undo text-purple-500 mr-2"></i>
<span>7天无理由退换</span>
</div>
</div>
</section>
</div>
<!-- 用户评价 -->
<section class="bg-white mt-8 p-6 rounded-lg shadow">
<h2 class="text-xl font-bold mb-4">用户评价 (4.8分)</h2>
<div class="border-b pb-4 mb-4">
<div class="flex items-center mb-2">
<span class="font-semibold">用户A</span>
<div class="ml-2 text-yellow-400">
<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"></i>
</div>
</div>
<p class="text-gray-700">鞋子很舒服，款式也好看，物流很快，下次还会再来！</p>
</div>
<div>
<div class="flex items-center mb-2">
<span class="font-semibold">用户B</span>
<div class="ml-2 text-yellow-400">
<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>
</div>
<p class="text-gray-700">尺码标准，穿着很合脚，就是希望颜色能再多一点选择。</p>
</div>
</section>
<!-- 相关推荐 -->
<section class="mt-8">
<h2 class="text-xl font-bold mb-4">相关推荐</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
<div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition duration-300">
<img src="https://via.placeholder.com/200x200/EEEEEE?text=Related+1" alt="相关商品1" class="w-full h-40 object-cover">
<div class="p-3">
<h3 class="text-sm font-semibold mb-1 truncate">复古帆布鞋</h3>
<p class="text-red-600 font-bold">¥ 159.00</p>
</div>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition duration-300">
<img src="https://via.placeholder.com/200x200/DDDDDD?text=Related+2" alt="相关商品2" class="w-full h-40 object-cover">
<div class="p-3">
<h3 class="text-sm font-semibold mb-1 truncate">高帮板鞋</h3>
<p class="text-red-600 font-bold">¥ 229.00</p>
</div>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition duration-300">
<img src="https://via.placeholder.com/200x200/CCCCCC?text=Related+3" alt="相关商品3" class="w-full h-40 object-cover">
<div class="p-3">
<h3 class="text-sm font-semibold mb-1 truncate">跑步鞋</h3>
<p class="text-red-600 font-bold">¥ 399.00</p>
</div>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition duration-300">
<img src="https://via.placeholder.com/200x200/BBBBBB?text=Related+4" alt="相关商品4" class="w-full h-40 object-cover">
<div class="p-3">
<h3 class="text-sm font-semibold mb-1 truncate">休闲皮鞋</h3>
<p class="text-red-600 font-bold">¥ 459.00</p>
</div>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition duration-300">
<img src="https://via.placeholder.com/200x200/AAAAAA?text=Related+5" alt="相关商品5" class="w-full h-40 object-cover">
<div class="p-3">
<h3 class="text-sm font-semibold mb-1 truncate">登山鞋</h3>
<p class="text-red-600 font-bold">¥ 599.00</p>
</div>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition duration-300">
<img src="https://via.placeholder.com/200x200/999999?text=Related+6" alt="相关商品6" class="w-full h-40 object-cover">
<div class="p-3">
<h3 class="text-sm font-semibold mb-1 truncate">洞洞鞋</h3>
<p class="text-red-600 font-bold">¥ 89.00</p>
</div>
</div>
</div>
</section>
</main>
<!-- 页脚 -->
<footer class="bg-gray-800 text-white mt-12 py-8">
<div class="container mx-auto px-4 text-center">
<p>© 2025 我的淘宝. All rights reserved.</p>
</div>
</footer>
<!-- 引入自定义 JavaScript -->
<script src="script.js"></script>
</body>
</html>
第二步：CSS 样式 (style.css)
虽然我们使用了 Tailwind CSS，但为了处理一些特定的交互效果（如图片缩放），我们还需要一些自定义 CSS。
创建一个名为 style.css 的文件，并将其链接到 HTML 的 <head> 中（在 Tailwind CSS 之后）。
/* style.css */
/* 图片缩放效果 */
.zoom-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
z-index: 1000;
cursor: zoom-out;
justify-content: center;
align-items: center;
}
.zoom-overlay img {
max-width: 90%;
max-height: 90%;
object-fit: contain;
}
/* 选中 SKU 时的样式 */
.sku-option.selected,
.size-option.selected {
border-color: #ef4444 !important; /* Tailwind red-500 */
background-color: #fee2e2; /* Tailwind red-100 */
color: #dc2626; /* Tailwind red-600 */
}
/* 数量输入框样式优化 */
#quantity {
-moz-appearance: textfield; /* Firefox */
}
#quantity::-webkit-outer-spin-button,
#quantity::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
别忘了在 index.html 的 <head> 中添加这个链接：
<link rel="stylesheet" href="style.css">
第三步：JavaScript 交互 (script.js)
这是让页面“活”起来的关键部分，处理图片切换、SKU选择、数量增减等所有交互逻辑。
（图片来源网络，侵删）
创建一个名为 script.js 的文件，并将其放在 HTML 文件的同级目录下。
// script.js
document.addEventListener('DOMContentLoaded', function () {
// 1. 图片画廊功能
const mainImg = document.getElementById('main-img');
const thumbnails = document.querySelectorAll('.thumbnail');
thumbnails.forEach(thumb => {
thumb.addEventListener('click', function() {
// 移除所有缩略图的选中边框
thumbnails.forEach(t => t.classList.remove('border-red-500'));
thumbnails.forEach(t => t.classList.add('border-transparent'));
// 为当前点击的缩略图添加选中边框
this.classList.remove('border-transparent');
this.classList.add('border-red-500');
// 更新主图
mainImg.src = this.src;
});
});
// 2. 图片缩放功能
mainImg.addEventListener('click', function() {
const overlay = document.createElement('div');
overlay.className = 'zoom-overlay';
overlay.innerHTML = `<img src="${this.src}" alt="Zoomed Image">`;
document.body.appendChild(overlay);
overlay.style.display = 'flex';
overlay.addEventListener('click', function() {
document.body.removeChild(this);
});
});
// 3. SKU 选择功能
const skuOptions = document.querySelectorAll('.sku-option');
const sizeOptions = document.querySelectorAll('.size-option');
let selectedColor = '';
let selectedSize = '';
let currentStock = 99; // 初始库存
// 模拟不同SKU的库存
const skuStock = {
'color-white': { 'size-35': 10, 'size-36': 15, 'size-37': 20, 'size-38': 25, 'size-39': 20, 'size-40': 9 },
'color-black': { 'size-35': 5, 'size-36': 8, 'size-37': 12, 'size-38': 18, 'size-39': 15, 'size-40': 5 }
};
skuOptions.forEach(option => {
option.addEventListener('click', function() {
skuOptions.forEach(o => o.classList.remove('selected'));
this.classList.add('selected');
selectedColor = this.dataset.sku;
updateAvailableSizes();
});
});
sizeOptions.forEach(option => {
option.addEventListener('click', function() {
sizeOptions.forEach(o => o.classList.remove('selected'));
this.classList.add('selected');
selectedSize = this.dataset.sku;
updateStock();
});
});
function updateAvailableSizes() {
sizeOptions.forEach(option => {
const sizeKey = option.dataset.sku;
if (skuStock[selectedColor] && skuStock[selectedColor][sizeKey] > 0) {
option.disabled = false;
option.classList.remove('opacity-50', 'cursor-not-allowed');
} else {
option.disabled = true;
option.classList.add('opacity-50', 'cursor-not-allowed');
}
});
// 清空已选尺码
sizeOptions.forEach(o => o.classList.remove('selected'));
selectedSize = '';
document.getElementById('stock').textContent = '请选择尺码';
}
function updateStock() {
if (selectedColor && selectedSize) {
currentStock = skuStock[selectedColor][selectedSize];
document.getElementById('stock').textContent = currentStock;
// 同步更新数量选择器的最大值
document.getElementById('quantity').max = currentStock;
if (parseInt(document.getElementById('quantity').value) > currentStock) {
document.getElementById('quantity').value = currentStock;
}
}
}
// 4. 数量选择器功能
const quantityInput = document.getElementById('quantity');
const decreaseBtn = document.getElementById('decrease-btn');
const increaseBtn = document.getElementById('increase-btn');
decreaseBtn.addEventListener('click', function() {
let val = parseInt(quantityInput.value);
if (val > 1) {
quantityInput.value = val - 1;
}
});
increaseBtn.addEventListener('click', function() {
let val = parseInt(quantityInput.value);
if (val < currentStock && val < 99) {
quantityInput.value = val + 1;
}
});
quantityInput.addEventListener('change', function() {
let val = parseInt(this.value);
if (isNaN(val) || val < 1) {
this.value = 1;
} else if (val > currentStock) {
this.value = currentStock;
alert('您选择的数量已超过库存上限！');
} else if (val > 99) {
this.value = 99;
}
});
// 5. 加入购物车按钮反馈
const addToCartBtn = document.getElementById('add-to-cart-btn');
addToCartBtn.addEventListener('click', function() {
if (!selectedColor || !selectedSize) {
alert('请先选择颜色和尺码！');
return;
}
// 这里可以添加实际的加入购物车逻辑，比如发送AJAX请求
const originalText = this.innerHTML;
this.innerHTML = '<i class="fas fa-check mr-2"></i>已加入';
this.classList.remove('bg-orange-500', 'hover:bg-orange-600');
this.classList.add('bg-green-500');
setTimeout(() => {
this.innerHTML = originalText;
this.classList.remove('bg-green-500');
this.classList.add('bg-orange-500', 'hover:bg-orange-600');
}, 2000);
});
});
如何使用
- 创建文件: 在一个文件夹中创建
index.html,style.css, 和script.js三个文件。 - 复制代码: 将上面提供的代码分别复制到对应的文件中。
- 替换图片: 将占位图片 URL (
https://via.placeholder.com/...) 替换为你自己的产品图片路径。 - 打开浏览器: 直接用浏览器打开
index.html文件,即可看到一个功能齐全的产品详情页。
这个模板为你提供了一个坚实的基础，你可以根据实际需求进行修改和扩展，例如添加商品详情描述、规格参数、更复杂的SKU逻辑等。
（图片来源网络，侵删）
