css项目实战_设计一个整洁的产品对比页面

P粉602998670 2026-01-22 00:00:00 次阅读

用语义化HTML（section/article/dl）配合CSS Grid+Flex可构建清晰、响应式、可访问的产品对比页；避免table，用grid-template-areas命名区域实现灵活列管理，data-value+属性
选择器高亮差异，dt视觉隐藏但保留可访问性。

直接用 CSS Grid + Flex 布局就能做出清晰、响应式、可维护的产品对比页，不需要框架，也不用 JavaScript 控制显隐——关键在语义化 HTML 结构和层叠逻辑的设计。

`table` 还是 `div`？先选对容器结构

别用

 标签做产品对比——它语义错误（这不是数据表格），且移动端难以横向滚动或折叠。用语义化  包裹，每个产品用 ，特性项用 （ 描述项名， 放值）最稳妥。
这样做的好处：

屏幕阅读器能自然读出“CPU：Intel i7”这类成对信息
后续加「仅显示差异项」逻辑时，JS 只需操作 dl 的 class，不碰结构
打印样式表里可直接 dl { display: grid } 保证纵向对齐

用 grid-template-areas 对齐多列，避免手动计算 fr

当产品数动态（比如 2～4 款），硬写 grid-template-columns: 1fr 1fr 1fr 容易错位。改用命名区域更直观：
section.comparison {
  display: grid;
  grid-template-areas:
    "header header header"
    "feature p1 p2"
    "feature p1 p2"
    "feature p1 p2";
}
然后给每个产品设置 grid-area: p1，特性行设 grid-area: feature。新增第三款产品？只需补一列到 grid-template-areas 并加对应 grid-area 声明，不用重算比例。
注意点：


grid-template-areas 每行引号内空格数必须一致，否则整条声明失效
所有 grid-area 名称必须全小写、无符号，否则不匹配
IE 不支持该语法，如需兼容，降级用 grid-column: 2 / 3 手动定位

「高亮差异」不是靠 JS 切 class，而是用属性选择器 + :not()

用户常想「只标出不同配置的单元格」，但每次 JS 遍历比对太重。换种思路：让 HTML 告诉 CSS 哪些项有差异。
给每个 
 加 data-value 属性存原始值：
16GB DDR5
8GB DDR4
再用属性选择器筛出非统一值：
dd[data-value="16GB"]:not(:first-of-type) {
  background: #fff9c4;
}
dd[data-value="8GB"]:not(:first-of-type) {
  background: #ffcdd2;
}
这样既免去 JS 计算，又保留完全静态渲染能力。如果后端能输出标准化值（如统一小写、去除单位），CSS 层就能全自动标记。

移动端折叠「特性描述」列，但保留可访问性
小屏上「CPU」「内存」这些文字列太占宽度，直接隐藏会破坏语义。正确做法是视觉隐藏但保留读取：
dt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
dd::before {
  content: attr(data-label) ": ";
  font-weight: 600;
}
同时把 data-label 从 
 提到  上，确保即使 dt 被裁剪，辅助技术仍能读到上下文。
这个细节容易被忽略：很多「响应式对比页」在手机上只剩一堆孤立数值，毫无可访问性，也违背 WCAG 1.3.1 原则。