是最贴切的商品项语义化标签，需嵌套 （带 alt、width/height 和容错处理）、 标题、 描述（服务端摘要）、 价格；父容器用 CSS Grid 布局，固定缩略图尺寸并设 object-fit: cover，确保无障碍、SEO 与响应式兼备。
用语义化 HTML 结构组织商品项
每个商品必须独立成块，<article></article> 是最贴切的标签——它天然表达“一个独立的内容单元”，比 <div> 更利于 SEO 和屏幕阅读器识别。缩略图、标题、描述、价格这些信息要分层嵌套，避免扁平堆砌。<p>常见错误是把图片和文字全塞进一个 <code><div> 里，结果样式一改就错位，JS 拿不到结构化数据。正确结构应类似：<pre class="brush:php;toolbar:false;"><article class="product-item">
@@##@@
<h3>经典款运动鞋</h3>
<p class="product-desc">透气网面，缓震中底，适合日常通勤与轻度跑步。</p>
<p class="product-price"><strong>¥299</strong></p>
</article></pre>
<ul>
<li>
<code>alt 属性不可省略，否则无障碍访问失败，且图片加载失败时能提供关键信息
width 和 height 可防止布局偏移（layout shift），尤其在瀑布流或响应式网格中很关键<span></span> 包裹整段描述——<p></p> 才是语义正确的段落容器CSS Grid 实现等宽缩略图+文字自适应布局
不用 Flexbox 拉伸图片或靠 max-width: 100% 裁剪，而是让缩略图固定尺寸、文字区域自动撑开。Grid 最适合这种“固定图 + 弹性文”组合。
关键不是写满样式，而是控制好三件事：列轨道、行间距、图片约束。
- 用
display: grid在父容器（如<section class="product-list"></section>）上启用网格，设grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))实现响应式列数 - 每项内用
display: grid; grid-template-rows: 120px 1fr auto固定图高、让描述区域自由延展 - 图片加
object-fit: cover确保不拉伸不变形；同时设object-position: center防止关键内容（如鞋头）被裁掉
避免图片加载失败导致布局塌陷
网络波动或路径错误会让 <img src="shoe.jpg" alt="黑色运动鞋" style="max-width:90%" style="max-width:90%"> 显示为一条横线或空白，文字上浮、间距错乱——这不是 CSS 问题，是 HTML 缺少容错设计。
除了前面说的 width/height，还要补两层防护：
- 给
<img>外层加aspect-ratio: 1/1（现代浏览器支持），或退化为padding-top: 100%的伪比例盒 - 用
<picture></picture>包一层，提供<source></source>备选格式（如 WebP）和<img>降级路径，同时利用onerror内联处理：<img> - 描述文字别依赖图片存在——比如不要写“如图所示的蓝色款”，而要写“蓝色网面运动鞋”，保证纯文本可读
描述文案的长度控制与截断逻辑
后端传来的描述可能长达 500 字，前端直接渲染会撑爆卡片。CSS 的 line-clamp 看似方便，但它只在显示时截断，复制粘贴或屏幕阅读器仍读全部内容，而且不兼容旧版 Safari。
- 优先用服务端或构建时做摘要（如取前 80 字 + “…”），保证 DOM 干净、语义准确
- 若必须前端截断，用 JavaScript 计算字符数并手动拼接，而不是依赖
text-overflow: ellipsis（它对多行无效） - 避免在描述里放链接或按钮——商品列表是浏览态，交互入口统一放在卡片底部或悬浮操作区，否则焦点管理混乱，键盘用户难以跳过
真正难的不是排版，而是让缩略图在 2G 网络下秒出、描述在 NVDA 屏幕阅读器里读得连贯、SEO 抓取时能提取到价格和品类——这些细节一旦漏掉，再好看的列表也只是半成品。
