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>极简商品展示</title> <style> * {  margin: 0; padding: 0; box-sizing: border-box; } body {  font-family: system-ui, -apple-system, sans-serif; background: #f5f5f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } .product-card {  background: #fff; border-radius: 12px; overflow: hidden; max-width: 360px; width: 100%; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: transform 0.2s; } .product-card:hover {  transform: translateY(-4px); } .product-image {  width: 100%; height: 260px; background: #e8e8e8; display: flex; align-items: center; justify-content: center; color: #999; font-size: 14px; } .product-info {  padding: 20px; } .product-name {  font-size: 20px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; } .product-desc {  font-size: 14px; color: #666; line-height: 1.5; margin-bottom: 16px; } .product-price {  font-size: 24px; font-weight: 700; color: #e63946; margin-bottom: 16px; } .product-price small {  font-size: 14px; font-weight: 400; color: #999; text-decoration: line-through; margin-left: 8px; } .btn-buy {  display: block; width: 100%; padding: 14px; background: #1a1a1a; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 500; cursor: pointer; transition: background 0.2s; } .btn-buy:hover {  background: #333; } </style> </head> <body> <div class="product-card"> <div class="product-image">商品图片区域</div> <div class="product-info"> <h2 class="product-name">无线蓝牙耳机</h2> <p class="product-desc">主动降噪，续航 36 小时，商品支持快充。展示IPX5 防水，页面运动通勤都合适。</p> <div class="product-price"> ¥299 <small>¥499</small> </div> <button class="btn-buy">立即购买</button> </div> </div> </body> </html>

结构上没什么玄机。.product-card 是外层容器，负责圆角和阴影。.product-image 给个固定高度，背景灰底，实际项目里你换成 <img> 标签就行。信息区里，商品名、描述、价格、按钮，从上到下排下来。价格那里用了 <small> 标签做原价划线，视觉上形成对比。

有人会问：图片不写 alt 吗？当然要写。上面为了代码短，我省了。真实场景里，<img src="xxx.jpg" alt="无线蓝牙耳机正面图"> 是底线。搜索引擎和屏幕阅读器都靠它。

再聊几个容易踩的坑。第一，box-sizing: border-box 最好全局设上，不然你给卡片加个内边距，宽度就溢出了。第二，按钮的 cursor: pointer 别忘了，桌面端用户习惯看到手型光标。第三，移动端适配。上面用了 max-width: 360px 加 width: 100%，小屏手机上卡片会撑满，大屏上不会无限宽。这比写一堆媒体查询省事。

如果你想让商品图真正显示出来，把 .product-image 那个 div 换成：

<img src="https://picsum.photos/400/300" alt="商品图" style="width:100%; height:260px; object-fit:cover;">

object-fit: cover 这行是关键。没有它，图片会被拉伸变形。用了它，图片按比例裁剪填满区域，跟很多电商 App 的效果一致。

价格部分还能再细一点。比如加个“限时优惠”的标签，用绝对定位贴在图片左上角。代码不复杂，但转化率往往就靠这种小细节。我观察过几个独立站，同样的商品，加了角标和倒计时，点击率能差出百分之二三十。

最后说下按钮。btn-buy 那个黑色块，你换成品牌色也行。但别用太浅的颜色配白字，对比度不够，看着费劲。另外按钮加个 active 状态，按下去有反馈，手感会好很多。比如 .btn-buy:active { transform: scale(0.98); }，一行代码的事。

整段代码不到 60 行，没有外部依赖，没有构建工具。改改文字和颜色，就能直接扔到服务器上跑。商品展示页的本质就是信息清晰、操作顺手，花哨的动效是后面的事。先把骨架搭对，比什么都强。