本源码是一款典型「电商商品详情页」单页模板，采用红白黑配色，清爽、促销感强，与主流电商平台的视觉语言接近。顶部设置搜索栏与导航，商品主区左侧是主图加四张缩略图，右侧展示标题、评分、销量、价格、SKU 选择、数量与立即购买按钮，信息层级完全符合用户的下单决策路径。
设计亮点在于高转化细节：价格区用红色大号字体与删除线原价形成对比，搭配「限时直降」「12 期免息」「以旧换新」等促销标签；SKU 选择区模拟真实电商的颜色、版本与数量交互样式；商品详情 Tab 页展示卖点文案、三列特性图标与规格参数表，让商品信息一目了然。所有模块均用 HTML/CSS 原生实现，无需后端即可展示完整详情。
适合作为电商模板展示、产品页原型或轻量级独立站商品页。替换商品图、标题、价格、SKU 与参数后即可用于实际项目，也可作为前端面试或作品集的项目演示。
使用教程
1. 下载与保存
将下方 HTML 源码全部复制，保存为 index.html 文件（注意文件后缀必须是 .html）。
2. 本地预览
直接双击 index.html 文件，浏览器会自动打开并渲染页面效果。也可以在文件夹内运行 python -m http.server 后访问 localhost:8000 进行预览。
3. 自定义修改
替换文字：直接编辑 HTML 中的标题、段落文本与链接。调整配色：修改 <style> 标签内的 CSS 变量（:root 部分）或具体颜色值。更换图片：将 <img> 的 src 属性换成你自己的图片地址，或将背景渐变替换为 background-image。
4. 上线部署
将 index.html 上传到任意支持静态网页托管的服务（GitHub Pages、Vercel、Netlify、阿里云 OSS、腾讯云 COS 等）即可获得独立访问网址。
HTML 源码
复制下方完整代码，保存为 .html 文件即可在浏览器中预览使用。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AirNote 无线降噪耳机 · 商品详情</title>
<style>
:root{
--brand:#e03131;
--brand-dark:#c22525;
--ink:#191c1f;
--muted:#767e87;
--line:#e9ecef;
--bg:#f6f7f9;
--card:#ffffff;
--star:#ff9f1a;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--ink);line-height:1.7}
a{text-decoration:none;color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}
/* 顶栏 */
.topbar{background:var(--ink);color:#c9ced4;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;height:36px;align-items:center}
header{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.nav{height:66px;display:flex;align-items:center;gap:28px}
.logo{font-size:21px;font-weight:900;letter-spacing:-.5px}
.logo i{font-style:normal;color:var(--brand)}
.search{flex:1;display:flex;max-width:440px}
.search input{flex:1;padding:9px 14px;border:1.5px solid var(--line);border-right:none;border-radius:8px 0 0 8px;font-size:14px;font-family:inherit}
.search input:focus{outline:none;border-color:var(--brand)}
.search button{padding:0 20px;background:var(--brand);color:#fff;border:none;border-radius:0 8px 8px 0;font-size:14px;cursor:pointer;font-family:inherit;font-weight:600}
.nav .links{margin-left:auto;display:flex;gap:22px;font-size:14.5px;color:var(--muted)}
.crumb{font-size:13px;color:var(--muted);padding:16px 0}
/* 商品主区 */
.detail{display:grid;grid-template-columns:460px 1fr;gap:36px;background:var(--card);border-radius:16px;padding:28px;border:1px solid var(--line)}
.gallery .main{aspect-ratio:1/1;border-radius:14px;background:linear-gradient(145deg,#2b3138,#0f1215);display:flex;align-items:center;justify-content:center;font-size:140px;position:relative;overflow:hidden}
.gallery .main::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.18),transparent 50%)}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.thumb{aspect-ratio:1/1;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:30px;border:2px solid var(--line);cursor:pointer;transition:.2s}
.thumb:hover,.thumb.on{border-color:var(--brand)}
.tb1{background:#2b3138;color:#fff}.tb2{background:#f1f3f5}.tb3{background:#ffe8e8}.tb4{background:#e7f5ff}
.info h1{font-size:26px;line-height:1.4;margin-bottom:10px}
.rate{display:flex;align-items:center;gap:14px;font-size:13.5px;color:var(--muted);margin-bottom:18px}
.stars{color:var(--star);letter-spacing:2px;font-size:15px}
.price-box{background:linear-gradient(100deg,#fff5f5,#ffe9e9);border-radius:12px;padding:20px 22px;margin-bottom:22px}
.price-now{display:flex;align-items:baseline;gap:10px}
.price-now b{font-size:40px;color:var(--brand);font-weight:900}
.price-now b small{font-size:20px}
.price-now del{color:#a9b1b9;font-size:16px}
.price-tags{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.pt{background:var(--brand);color:#fff;font-size:12px;padding:3px 9px;border-radius:4px;font-weight:600}
.pt.o{background:#fff;color:var(--brand);border:1px solid var(--brand)}
.opt{display:flex;align-items:flex-start;gap:18px;margin-bottom:18px;font-size:14.5px}
.opt .lb{color:var(--muted);width:56px;flex-shrink:0;padding-top:6px}
.choices{display:flex;gap:10px;flex-wrap:wrap}
.choice{border:1.5px solid var(--line);border-radius:8px;padding:7px 16px;cursor:pointer;transition:.2s;background:#fff}
.choice:hover{border-color:var(--brand);color:var(--brand)}
.choice.on{border-color:var(--brand);color:var(--brand);background:#fff5f5;font-weight:600}
.qty{display:flex;border:1.5px solid var(--line);border-radius:8px;overflow:hidden;width:fit-content}
.qty span{width:36px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fafbfc;user-select:none}
.qty input{width:52px;border:none;text-align:center;font-size:15px;font-family:inherit}
.qty input:focus{outline:none}
.buy{display:flex;gap:12px;margin:26px 0 20px}
.buy a{flex:1;text-align:center;padding:15px;border-radius:10px;font-size:16.5px;font-weight:800;transition:.2s}
.b-cart{background:#fff1f1;color:var(--brand);border:1.5px solid var(--brand)}
.b-cart:hover{background:#ffe1e1}
.b-buy{background:var(--brand);color:#fff}
.b-buy:hover{background:var(--brand-dark);transform:translateY(-2px)}
.promise{display:flex;gap:22px;flex-wrap:wrap;font-size:13.5px;color:var(--muted);border-top:1px dashed var(--line);padding-top:16px}
.promise span::before{content:"🛡 ";}
/* 下方详情 */
.tabs{display:flex;gap:2px;margin:30px 0 0}
.tabs div{padding:13px 26px;background:var(--card);border:1px solid var(--line);border-bottom:none;border-radius:10px 10px 0 0;font-size:15px;color:var(--muted);cursor:pointer}
.tabs div.on{color:var(--brand);font-weight:700;border-top:2px solid var(--brand)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:0 12px 12px 12px;padding:30px}
.panel h3{font-size:19px;margin-bottom:14px}
.panel p{color:#4c545c;margin-bottom:14px}
.specs{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:6px}
.specs td{padding:12px 14px;border:1px solid var(--line)}
.specs td:nth-child(odd){background:#fafbfc;color:var(--muted);width:130px}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0}
.f{background:var(--bg);border-radius:12px;padding:20px;text-align:center}
.f i{font-style:normal;font-size:30px;display:block;margin-bottom:8px}
.f b{display:block;font-size:15.5px;margin-bottom:4px}
.f span{font-size:13.5px;color:var(--muted)}
footer{text-align:center;color:var(--muted);font-size:13.5px;padding:40px 20px}
@media(max-width:960px){
.detail{grid-template-columns:1fr;padding:20px}
.search,.nav .links{display:none}
.feat{grid-template-columns:1fr}
.price-now b{font-size:32px}
}
</style>
</head>
<body>
<div class="topbar"><div class="wrap"><span>下载 App 首单立减 30 元</span><span>你好，请登录 | 我的订单 | 帮助中心</span></div></div>
<header>
<div class="wrap nav">
<div class="logo">Air<i>Note</i></div>
<div class="search"><input placeholder="搜索耳机、音箱、配件…"><button>搜索</button></div>
<div class="links"><a href="#">全部商品</a><a href="#">购物车 (2)</a><a href="#">我的</a></div>
</div>
</header>
<div class="wrap">
<div class="crumb">首页 › 数码影音 › 耳机 › AirNote Pro 2</div>
<div class="detail">
<div class="gallery">
<div class="main">🎧</div>
<div class="thumbs">
<div class="thumb tb1 on">🎧</div>
<div class="thumb tb2">📦</div>
<div class="thumb tb3">🔋</div>
<div class="thumb tb4">🎵</div>
</div>
</div>
<div class="info">
<h1>AirNote Pro 2 无线主动降噪耳机｜48dB 深度降噪 · 单次续航 12 小时</h1>
<div class="rate">
<span class="stars">★★★★★</span><span>4.8 分</span><span>|</span><span>12,483 条评价</span><span>|</span><span>累计销量 8.6 万</span>
</div>
<div class="price-box">
<div class="price-now"><b><small>¥</small>899</b><del>¥1,299</del></div>
<div class="price-tags"><span class="pt">限时直降 400</span><span class="pt o">12 期免息</span><span class="pt o">以旧换新补贴 200</span></div>
</div>
<div class="opt"><span class="lb">颜色</span>
<div class="choices"><span class="choice on">曜石黑</span><span class="choice">月光白</span><span class="choice">雾霭蓝</span></div>
</div>
<div class="opt"><span class="lb">版本</span>
<div class="choices"><span class="choice on">标准版</span><span class="choice">充电盒套装 +129</span></div>
</div>
<div class="opt"><span class="lb">数量</span>
<div class="qty"><span>−</span><input value="1"><span>+</span></div>
</div>
<div class="buy">
<a href="#" class="b-cart">加入购物车</a>
<a href="#" class="b-buy">立即购买</a>
</div>
<div class="promise"><span>7 天无理由退货</span><span>全国联保 2 年</span><span>顺丰包邮</span><span>官方正品</span></div>
</div>
</div>
<div class="tabs"><div class="on">商品详情</div><div>规格参数</div><div>用户评价</div><div>售后保障</div></div>
<div class="panel">
<h3>把世界调成静音，只留下音乐</h3>
<p>AirNote Pro 2 搭载第三代自适应降噪算法，通过前后馈六麦克风阵列实时采样环境噪声，最高可实现 48dB 的深度降噪。无论是地铁的轰鸣、办公室的键盘声，还是飞机上的低频噪音，都能被有效抑制。</p>
<p>13.4mm 复合振膜单元带来更宽的低频下潜与更干净的中高频解析，支持 LDAC 高解析传输。佩戴方面采用记忆海绵耳罩与自适应头梁压力设计，长时间佩戴不夹头。</p>
<div class="feat">
<div class="f"><i>🔇</i><b>48dB 主动降噪</b><span>六麦克风阵列自适应调节</span></div>
<div class="f"><i>🔋</i><b>12 小时续航</b><span>充电 10 分钟可听 3 小时</span></div>
<div class="f"><i>📡</i><b>多点连接</b><span>手机与电脑同时在线切换</span></div>
</div>
<h3>规格参数</h3>
<table class="specs">
<tr><td>产品型号</td><td>AirNote Pro 2</td><td>单元尺寸</td><td>13.4mm 复合振膜</td></tr>
<tr><td>蓝牙版本</td><td>Bluetooth 5.4</td><td>音频编码</td><td>SBC / AAC / LDAC</td></tr>
<tr><td>降噪深度</td><td>最高 48dB</td><td>整机重量</td><td>约 248g</td></tr>
<tr><td>续航时间</td><td>降噪开启 12 小时</td><td>充电接口</td><td>USB-C</td></tr>
<tr><td>防护等级</td><td>IPX4 生活防汗</td><td>包装清单</td><td>耳机 × 1、收纳包、线材、说明书</td></tr>
</table>
</div>
</div>
<footer>© 2026 AirNote 官方商城 · 本页面为演示模板，商品信息均为示例内容</footer>
</body>
</html>
原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1867.html
微信扫一扫 
支付宝扫一扫 
