1. 为什么我要拿一个游戏平台首页做重构练习先说说这个项目的由来。我在带新人的时候经常遇到一个尴尬情况：简历上写着“精通 HTML 和 CSS”，丢过来一个静态页面，结构全是 div 套 div，类名清一色box1、box2、left、right，CSS 里飘着一堆margin-left: 37px这种魔法数字。你问他为什么是 37，他说“调出来的”。这就是典型的“能跑就行”阶段，离真正的页面重构还差得远。所以我一直想找一个结构足够复杂、视觉层次足够多、但又不涉及任何后端逻辑的真实页面，作为 HTML 和 CSS 重构的训练靶子。游戏平台首页是个特别理想的选择：它同时具备顶部导航、多层下拉菜单、横向滚动的内容货架、卡片网格、价格标签、折扣角标、响应式断点，还有那种“左大右小”的混合布局。你把这一个页面吃透，市面上八成的信息流型网站布局你都能拿下。这个项目的核心目标很明确：用纯 HTML 和 CSS，把一个游戏平台首页的视觉结构完整复刻出来，不依赖任何框架，不写一行 JavaScript 去控制布局。所有交互（比如悬停展开、卡片浮起）都用 CSS 完成。适合谁看？适合已经会写基础标签和选择器、但一遇到复杂布局就不知道从哪下手的同学；也适合工作一两年、想系统梳理一遍布局思路的开发者。我先把话说在前面：重构不是抄样式。抄样式你打开开发者工具把颜色一吸、尺寸一量就完事了，但那样你学不到东西。真正有价值的是在动手之前，先把这个页面拆成几个独立的布局模块，想清楚每个模块用什么布局方案，为什么用这个方案而不是另一个。下面我就按这个思路，把整个重构过程完整讲一遍。2. 动手前的整体拆解与方案选型2.1 先把页面切成“块”，别一上来就写代码很多人重构失败，是因为打开编辑器就开始写<body>，写到一半发现导航和内容区的宽度对不上，又回头改。正确的做法是先做区块划分。我一般会拿一张页面截图，用矩形框把页面从上到下切成若干条带：顶部全局导航条（Logo、菜单、搜索、用户区）二级导航或分类条（可选，看具体页面）主视觉区（大图 Banner 或特色推荐位）内容货架区（一个接一个的横向卡片列表）底部信息区（链接矩阵、版权、社交入口）切完之后你会发现，除了主视觉区，其余部分几乎都是**“容器 + 横向排列的子项”**这个模式。这就是重构的突破口：把重复模式抽象出来，剩下的就是填内容。提示：切块的时候不要纠结像素级还原，先保证“块与块之间的层级关系”是对的。层级错了，后面怎么调都是歪的。2.2 布局方案怎么选：Flex 还是 Grid这是新手最纠结的问题。我的经验法则很简单：场景推荐方案原因一维排列（一行或一列）Flexbox主轴方向单一，对齐控制直观二维网格（行和列都要控制）Grid行列同时约束，代码更短卡片内部（图标+文字）Flexbox内容自适应，不怕文字长短整体页面骨架Grid 或普通文档流区块垂直堆叠，用文档流最省心横向滚动货架Flexbox + overflow子项不换行，超出滚动具体到这个页面：顶部导航我用 Flexbox，因为它是标准的一维横向排列；内容货架的外层用普通块级元素，内层卡片列表用 Flexbox 加overflow-x: auto；卡片本身用 Flexbox 做纵向排列（图片在上、信息在下）。整页没有必须用 Grid 的地方，但如果你想练手，可以把卡片网格区改成 Grid 试试，对比一下两种写法的差异。2.3 命名规范：别再用 left 和 right 了重构一个复杂页面，类名混乱是最大的维护灾难。我强烈建议用BEM 风格的简化版：块名 + 元素名，用双下划线连接。比如：.nav（导航块）.nav__logo（导航里的 Logo）.nav__menu（导航里的菜单）.card（卡片块）.card__thumb（卡片缩略图）.card__price（卡片价格）这样你看到类名就知道它属于哪个模块，改样式的时候不会误伤别的区域。状态类用is-前缀，比如.is-active、.is-disabled。这套规范不复杂，但能让你在写几百行 CSS 之后依然找得到北。3. 核心模块的 HTML 结构怎么搭3.1 顶部导航：语义化标签别浪费导航区我坚持用<header>包<nav>，菜单用<ul>和<li>。有人觉得用 div 也一样，但语义化标签对可访问性和后续维护都有好处，而且屏幕阅读器能正确识别。结构大致是这样：<header class="site-header"> <nav class="nav"> <a class="nav__logo" href="#">LOGO</a> <ul class="nav__menu"> <li class="nav__item"><a href="#">商店</a></li> <li class="nav__item"><a href="#">社区</a></li> <li class="nav__item"><a href="#">关于</a></li> </ul> <div class="nav__actions"> <input class="nav__search" type="search" placeholder="搜索"> <button class="nav__user">登录</button> </div> </nav> </header>这里有个细节：搜索框用type="search"而不是type="text"，浏览器会自带清除按钮，移动端键盘也会显示“搜索”键。这种小地方体现的就是重构的功底。3.2 内容货架：横向滚动的正确姿势货架区是这类页面的灵魂。结构上分两层：外层是货架容器，内层是卡片轨道。<section class="shelf"> <div class="shelf__head"> <h2 class="shelf__title">热门推荐</h2> <a class="shelf__more" href="#">查看全部</a> </div> <ul class="shelf__track"> <li class="card">...</li> <li class="card">...</li> <li class="card">...</li> </ul> </section>关键在.shelf__track的样式：display: flex让卡片横排，overflow-x: auto允许横向滚动，scroll-snap-type: x mandatory让滚动有吸附感，卡片上加scroll-snap-align: start。这套组合拳下来，用户体验接近原生 App 的轮播，但一行 JS 都没写。注意：横向滚动容器一定要处理滚动条样式，否则桌面端会出现一条很丑的灰色横条。用::-webkit-scrollbar隐藏或美化，或者干脆scrollbar-width: none配合-ms-overflow-style: none做跨浏览器处理。3.3 卡片内部：图片比例是重灾区卡片最容易翻车的地方是图片。游戏封面图比例五花八门，如果直接<img>塞进去，高度会被撑得乱七八糟。我的做法是给图片容器固定宽高比：.card__thumb { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; } .card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }aspect-ratio现在主流浏览器都支持了，一行搞定。object-fit: cover保证图片填满容器且不变形，多余部分裁掉。display: block消除图片底部的默认间隙——这个间隙是行内元素基线对齐造成的，新手经常被它坑，明明没设 margin 却总有一条白边。4. CSS 布局实操：从骨架到细节4.1 全局重置与盒模型动手写样式之前，先做最小化重置。我不推荐引入完整的 reset.css，太重了，自己写几行就够：*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } ul, ol { list-style: none; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; }box-sizing: border-box是重中之重。默认的content-box下，你设了width: 200px再加padding: 10px，实际宽度变成 220px，算宽度算到崩溃。改成 border-box 之后，padding 和 border 都算在 width 里面，布局计算瞬间清爽。4.2 导航条：Flex 对齐的三个关键属性导航条用 Flexbox 实现，核心就三个属性：justify-content、align-items、gap。.nav { display: flex; align-items: center; gap: 24px; height: 64px; padding: 0 24px; } .nav__menu { display: flex; gap: 20px; margin-left: 32px; } .nav__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }margin-left: auto是个宝藏技巧，它会把元素推到最右边，比justify-content: space-between更灵活，因为你可以精确控制哪些元素靠左、哪些靠右。gap比给每个子项加 margin 干净得多，不用处理“最后一个元素多出边距”的问题。4.3 货架轨道：滚动吸附与性能货架轨道的完整样式：.shelf__track { display: flex; gap: 16px; overflow-x: auto; padding: 8px 24px 16px; scroll-snap-type: x mandatory; scrollbar-width: none; } .shelf__track::-webkit-scrollbar { display: none; } .card { flex: 0 0 220px; scroll-snap-align: start; }flex: 0 0 220px的意思是：不放大、不缩小、基准宽度 220px。这样卡片宽度固定，不会被内容撑开或压缩。如果你写成flex: 1，卡片会平分容器宽度，横向滚动就失效了。实操心得：横向滚动容器在移动端要加-webkit-overflow-scrolling: touch提升惯性滚动体验，虽然现在新系统默认就支持，但加上不亏。4.4 悬停交互：纯 CSS 的浮起与阴影卡片悬停效果是提升质感的关键。我用transform加box-shadow组合：.card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }这里有个性能细节：transform和opacity是 GPU 加速属性，动画流畅不卡顿；而如果你去动画top或margin-top，会触发重排，卡片一多就掉帧。所以浮起效果永远用transform: translateY()，别用top。5. 响应式适配：断点不是越多越好5.1 断点策略：移动优先还是桌面优先我习惯桌面优先，因为这类页面在桌面端信息密度最高，先保证大屏体验，再往下收。断点我一般设三个：1200px：大屏，货架显示 5 张卡片768px：平板，货架显示 3 张卡片，导航菜单收起480px：手机，货架显示 2 张卡片，搜索框折叠成图标断点数量控制在 3 个以内，太多会导致维护成本飙升。每加一个断点，你就要在脑子里多维护一套布局逻辑。5.2 用媒体查询调整卡片宽度@media (max-width: 768px) { .card { flex: 0 0 160px; } .nav__menu { display: none; } } @media (max-width: 480px) { .card { flex: 0 0 140px; } .nav__search { display: none; } }注意这里改的是flex-basis，不是width。因为卡片在 Flex 容器里，flex-basis才是控制基准宽度的正确属性。改width在有些情况下会被 flex 算法覆盖，导致你调半天没反应。5.3 图片与字体的响应式处理图片用max-width: 100%保证不溢出，字体用clamp()做流式缩放：.shelf__title { font-size: clamp(16px, 2vw, 22px); }clamp(最小值, 首选值, 最大值)让字号在视口变化时平滑过渡，比写一堆媒体查询优雅得多。这个函数现在兼容性很好了，可以放心用。6. 常见问题与排查技巧实录6.1 高频问题速查表现象可能原因解决方向卡片高度参差不齐图片未固定比例给图片容器加 aspect-ratio横向滚动出现整页滚动容器宽度溢出检查是否有子项 width 超过容器悬停动画卡顿动画了非合成属性改用 transform 和 opacity导航右侧元素换行容器宽度不够用 flex-wrap 或缩小 gap图片底部有白边行内元素基线间隙图片加 display: block移动端点击有蓝色高亮默认 tap 高亮加 -webkit-tap-highlight-color: transparent6.2 三个我踩过的坑第一个坑：overflow-x: auto导致纵向也被裁。有次我给货架容器设了overflow-x: auto，结果卡片的悬停阴影被纵向裁掉了。原因是overflow-x设了非 visible 值后，overflow-y会自动变成 auto。解决办法是给容器留足够的上下 padding，让阴影有空间显示。第二个坑：Flex 子项被内容撑破。卡片里如果有一行很长的游戏名，会把卡片撑宽。这时候要给文字加overflow: hidden; text-overflow: ellipsis; white-space: nowrap;做截断，或者给卡片设min-width: 0。后者是 Flex 布局的经典陷阱：Flex 子项默认min-width: auto，不会小于内容宽度，必须手动设 0 才能正常收缩。第三个坑：滚动吸附在 Safari 上不生效。scroll-snap-type在旧版 Safari 需要加-webkit-前缀。虽然现在新版本都支持了，但如果你要兼容老设备，记得补上。6.3 调试布局的实用手法我调试布局有个习惯：给所有元素临时加outline: 1px solid red，一眼就能看出每个盒子的边界。比在开发者工具里一个个点选快得多。调完记得删掉，或者用一个.debug类控制。.debug * { outline: 1px solid rgba(255, 0, 0, 0.3); }另外，Chrome 开发者工具的 Flexbox 和 Grid 检查器非常好用，能可视化显示主轴、交叉轴、对齐方式，强烈建议多用。7. 重构完成后的复盘与进阶方向7.1 代码组织：CSS 也要分文件页面一复杂，CSS 文件轻松上千行。我建议按模块拆分：reset.css、layout.css、components.css、responsive.css。小项目用@import引入，大项目上构建工具做合并。分文件的好处是改导航样式时不用在两千行里翻找。7.2 可维护性：变量与设计令牌把颜色、间距、圆角抽成 CSS 变量：:root { --color-bg: #1b2838; --color-surface: #2a475e; --color-text: #c7d5e0; --color-accent: #66c0f4; --radius-sm: 4px; --space-md: 16px; }这样换主题、调色板只需要改一处。这也是从“写页面”进阶到“做系统”的关键一步。7.3 还能往哪走这个页面重构完之后，你可以尝试几个进阶练习：把卡片列表改成用 Grid 实现，对比两种方案的代码量和可读性；给货架加上左右滚动按钮（这时候需要一点点 JS 了）；用prefers-color-scheme做深色浅色主题切换；或者把整个页面组件化，用原生 Web Components 封装成<game-card>标签。我个人在实际操作中的体会是，重构这类页面的价值不在于最后那个页面有多像，而在于你在拆解过程中被迫想清楚了每一个布局决策的理由。下次再遇到一个陌生页面，你脑子里会自动跳出“这块用 Flex、那块用 Grid、这里要处理溢出”的判断，这种直觉才是真正值钱的东西。最后分享一个小技巧：重构时把浏览器窗口从宽到窄慢慢拖动，观察布局在哪个宽度开始崩，那个点就是你的断点该设的位置，比拍脑袋定 768px 靠谱得多。
1. 为什么我要拿一个游戏平台首页做重构练习先说说这个项目的由来。我在带新人的时候经常遇到一个尴尬情况：简历上写着“精通 HTML 和 CSS”，丢过来一个静态页面，结构全是 div 套 div，类名清一色box1、box2、left、right，CSS 里飘着一堆margin-left: 37px这种魔法数字。你问他为什么是 37，他说“调出来的”。这就是典型的“能跑就行”阶段，离真正的页面重构还差得远。所以我一直想找一个结构足够复杂、视觉层次足够多、但又不涉及任何后端逻辑的真实页面，作为 HTML 和 CSS 重构的训练靶子。游戏平台首页是个特别理想的选择：它同时具备顶部导航、多层下拉菜单、横向滚动的内容货架、卡片网格、价格标签、折扣角标、响应式断点，还有那种“左大右小”的混合布局。你把这一个页面吃透，市面上八成的信息流型网站布局你都能拿下。这个项目的核心目标很明确：用纯 HTML 和 CSS，把一个游戏平台首页的视觉结构完整复刻出来，不依赖任何框架，不写一行 JavaScript 去控制布局。所有交互（比如悬停展开、卡片浮起）都用 CSS 完成。适合谁看？适合已经会写基础标签和选择器、但一遇到复杂布局就不知道从哪下手的同学；也适合工作一两年、想系统梳理一遍布局思路的开发者。我先把话说在前面：重构不是抄样式。抄样式你打开开发者工具把颜色一吸、尺寸一量就完事了，但那样你学不到东西。真正有价值的是在动手之前，先把这个页面拆成几个独立的布局模块，想清楚每个模块用什么布局方案，为什么用这个方案而不是另一个。下面我就按这个思路，把整个重构过程完整讲一遍。2. 动手前的整体拆解与方案选型2.1 先把页面切成“块”，别一上来就写代码很多人重构失败，是因为打开编辑器就开始写<body>，写到一半发现导航和内容区的宽度对不上，又回头改。正确的做法是先做区块划分。我一般会拿一张页面截图，用矩形框把页面从上到下切成若干条带：顶部全局导航条（Logo、菜单、搜索、用户区）二级导航或分类条（可选，看具体页面）主视觉区（大图 Banner 或特色推荐位）内容货架区（一个接一个的横向卡片列表）底部信息区（链接矩阵、版权、社交入口）切完之后你会发现，除了主视觉区，其余部分几乎都是**“容器 + 横向排列的子项”**这个模式。这就是重构的突破口：把重复模式抽象出来，剩下的就是填内容。提示：切块的时候不要纠结像素级还原，先保证“块与块之间的层级关系”是对的。层级错了，后面怎么调都是歪的。2.2 布局方案怎么选：Flex 还是 Grid这是新手最纠结的问题。我的经验法则很简单：场景推荐方案原因一维排列（一行或一列）Flexbox主轴方向单一，对齐控制直观二维网格（行和列都要控制）Grid行列同时约束，代码更短卡片内部（图标+文字）Flexbox内容自适应，不怕文字长短整体页面骨架Grid 或普通文档流区块垂直堆叠，用文档流最省心横向滚动货架Flexbox + overflow子项不换行，超出滚动具体到这个页面：顶部导航我用 Flexbox，因为它是标准的一维横向排列；内容货架的外层用普通块级元素，内层卡片列表用 Flexbox 加overflow-x: auto；卡片本身用 Flexbox 做纵向排列（图片在上、信息在下）。整页没有必须用 Grid 的地方，但如果你想练手，可以把卡片网格区改成 Grid 试试，对比一下两种写法的差异。2.3 命名规范：别再用 left 和 right 了重构一个复杂页面，类名混乱是最大的维护灾难。我强烈建议用BEM 风格的简化版：块名 + 元素名，用双下划线连接。比如：.nav（导航块）.nav__logo（导航里的 Logo）.nav__menu（导航里的菜单）.card（卡片块）.card__thumb（卡片缩略图）.card__price（卡片价格）这样你看到类名就知道它属于哪个模块，改样式的时候不会误伤别的区域。状态类用is-前缀，比如.is-active、.is-disabled。这套规范不复杂，但能让你在写几百行 CSS 之后依然找得到北。3. 核心模块的 HTML 结构怎么搭3.1 顶部导航：语义化标签别浪费导航区我坚持用<header>包<nav>，菜单用<ul>和<li>。有人觉得用 div 也一样，但语义化标签对可访问性和后续维护都有好处，而且屏幕阅读器能正确识别。结构大致是这样：<header class="site-header"> <nav class="nav"> <a class="nav__logo" href="#">LOGO</a> <ul class="nav__menu"> <li class="nav__item"><a href="#">商店</a></li> <li class="nav__item"><a href="#">社区</a></li> <li class="nav__item"><a href="#">关于</a></li> </ul> <div class="nav__actions"> <input class="nav__search" type="search" placeholder="搜索"> <button class="nav__user">登录</button> </div> </nav> </header>这里有个细节：搜索框用type="search"而不是type="text"，浏览器会自带清除按钮，移动端键盘也会显示“搜索”键。这种小地方体现的就是重构的功底。3.2 内容货架：横向滚动的正确姿势货架区是这类页面的灵魂。结构上分两层：外层是货架容器，内层是卡片轨道。<section class="shelf"> <div class="shelf__head"> <h2 class="shelf__title">热门推荐</h2> <a class="shelf__more" href="#">查看全部</a> </div> <ul class="shelf__track"> <li class="card">...</li> <li class="card">...</li> <li class="card">...</li> </ul> </section>关键在.shelf__track的样式：display: flex让卡片横排，overflow-x: auto允许横向滚动，scroll-snap-type: x mandatory让滚动有吸附感，卡片上加scroll-snap-align: start。这套组合拳下来，用户体验接近原生 App 的轮播，但一行 JS 都没写。注意：横向滚动容器一定要处理滚动条样式，否则桌面端会出现一条很丑的灰色横条。用::-webkit-scrollbar隐藏或美化，或者干脆scrollbar-width: none配合-ms-overflow-style: none做跨浏览器处理。3.3 卡片内部：图片比例是重灾区卡片最容易翻车的地方是图片。游戏封面图比例五花八门，如果直接<img>塞进去，高度会被撑得乱七八糟。我的做法是给图片容器固定宽高比：.card__thumb { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; } .card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }aspect-ratio现在主流浏览器都支持了，一行搞定。object-fit: cover保证图片填满容器且不变形，多余部分裁掉。display: block消除图片底部的默认间隙——这个间隙是行内元素基线对齐造成的，新手经常被它坑，明明没设 margin 却总有一条白边。4. CSS 布局实操：从骨架到细节4.1 全局重置与盒模型动手写样式之前，先做最小化重置。我不推荐引入完整的 reset.css，太重了，自己写几行就够：*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } ul, ol { list-style: none; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; }box-sizing: border-box是重中之重。默认的content-box下，你设了width: 200px再加padding: 10px，实际宽度变成 220px，算宽度算到崩溃。改成 border-box 之后，padding 和 border 都算在 width 里面，布局计算瞬间清爽。4.2 导航条：Flex 对齐的三个关键属性导航条用 Flexbox 实现，核心就三个属性：justify-content、align-items、gap。.nav { display: flex; align-items: center; gap: 24px; height: 64px; padding: 0 24px; } .nav__menu { display: flex; gap: 20px; margin-left: 32px; } .nav__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }margin-left: auto是个宝藏技巧，它会把元素推到最右边，比justify-content: space-between更灵活，因为你可以精确控制哪些元素靠左、哪些靠右。gap比给每个子项加 margin 干净得多，不用处理“最后一个元素多出边距”的问题。4.3 货架轨道：滚动吸附与性能货架轨道的完整样式：.shelf__track { display: flex; gap: 16px; overflow-x: auto; padding: 8px 24px 16px; scroll-snap-type: x mandatory; scrollbar-width: none; } .shelf__track::-webkit-scrollbar { display: none; } .card { flex: 0 0 220px; scroll-snap-align: start; }flex: 0 0 220px的意思是：不放大、不缩小、基准宽度 220px。这样卡片宽度固定，不会被内容撑开或压缩。如果你写成flex: 1，卡片会平分容器宽度，横向滚动就失效了。实操心得：横向滚动容器在移动端要加-webkit-overflow-scrolling: touch提升惯性滚动体验，虽然现在新系统默认就支持，但加上不亏。4.4 悬停交互：纯 CSS 的浮起与阴影卡片悬停效果是提升质感的关键。我用transform加box-shadow组合：.card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }这里有个性能细节：transform和opacity是 GPU 加速属性，动画流畅不卡顿；而如果你去动画top或margin-top，会触发重排，卡片一多就掉帧。所以浮起效果永远用transform: translateY()，别用top。5. 响应式适配：断点不是越多越好5.1 断点策略：移动优先还是桌面优先我习惯桌面优先，因为这类页面在桌面端信息密度最高，先保证大屏体验，再往下收。断点我一般设三个：1200px：大屏，货架显示 5 张卡片768px：平板，货架显示 3 张卡片，导航菜单收起480px：手机，货架显示 2 张卡片，搜索框折叠成图标断点数量控制在 3 个以内，太多会导致维护成本飙升。每加一个断点，你就要在脑子里多维护一套布局逻辑。5.2 用媒体查询调整卡片宽度@media (max-width: 768px) { .card { flex: 0 0 160px; } .nav__menu { display: none; } } @media (max-width: 480px) { .card { flex: 0 0 140px; } .nav__search { display: none; } }注意这里改的是flex-basis，不是width。因为卡片在 Flex 容器里，flex-basis才是控制基准宽度的正确属性。改width在有些情况下会被 flex 算法覆盖，导致你调半天没反应。5.3 图片与字体的响应式处理图片用max-width: 100%保证不溢出，字体用clamp()做流式缩放：.shelf__title { font-size: clamp(16px, 2vw, 22px); }clamp(最小值, 首选值, 最大值)让字号在视口变化时平滑过渡，比写一堆媒体查询优雅得多。这个函数现在兼容性很好了，可以放心用。6. 常见问题与排查技巧实录6.1 高频问题速查表现象可能原因解决方向卡片高度参差不齐图片未固定比例给图片容器加 aspect-ratio横向滚动出现整页滚动容器宽度溢出检查是否有子项 width 超过容器悬停动画卡顿动画了非合成属性改用 transform 和 opacity导航右侧元素换行容器宽度不够用 flex-wrap 或缩小 gap图片底部有白边行内元素基线间隙图片加 display: block移动端点击有蓝色高亮默认 tap 高亮加 -webkit-tap-highlight-color: transparent6.2 三个我踩过的坑第一个坑：overflow-x: auto导致纵向也被裁。有次我给货架容器设了overflow-x: auto，结果卡片的悬停阴影被纵向裁掉了。原因是overflow-x设了非 visible 值后，overflow-y会自动变成 auto。解决办法是给容器留足够的上下 padding，让阴影有空间显示。第二个坑：Flex 子项被内容撑破。卡片里如果有一行很长的游戏名，会把卡片撑宽。这时候要给文字加overflow: hidden; text-overflow: ellipsis; white-space: nowrap;做截断，或者给卡片设min-width: 0。后者是 Flex 布局的经典陷阱：Flex 子项默认min-width: auto，不会小于内容宽度，必须手动设 0 才能正常收缩。第三个坑：滚动吸附在 Safari 上不生效。scroll-snap-type在旧版 Safari 需要加-webkit-前缀。虽然现在新版本都支持了，但如果你要兼容老设备，记得补上。6.3 调试布局的实用手法我调试布局有个习惯：给所有元素临时加outline: 1px solid red，一眼就能看出每个盒子的边界。比在开发者工具里一个个点选快得多。调完记得删掉，或者用一个.debug类控制。.debug * { outline: 1px solid rgba(255, 0, 0, 0.3); }另外，Chrome 开发者工具的 Flexbox 和 Grid 检查器非常好用，能可视化显示主轴、交叉轴、对齐方式，强烈建议多用。7. 重构完成后的复盘与进阶方向7.1 代码组织：CSS 也要分文件页面一复杂，CSS 文件轻松上千行。我建议按模块拆分：reset.css、layout.css、components.css、responsive.css。小项目用@import引入，大项目上构建工具做合并。分文件的好处是改导航样式时不用在两千行里翻找。7.2 可维护性：变量与设计令牌把颜色、间距、圆角抽成 CSS 变量：:root { --color-bg: #1b2838; --color-surface: #2a475e; --color-text: #c7d5e0; --color-accent: #66c0f4; --radius-sm: 4px; --space-md: 16px; }这样换主题、调色板只需要改一处。这也是从“写页面”进阶到“做系统”的关键一步。7.3 还能往哪走这个页面重构完之后，你可以尝试几个进阶练习：把卡片列表改成用 Grid 实现，对比两种方案的代码量和可读性；给货架加上左右滚动按钮（这时候需要一点点 JS 了）；用prefers-color-scheme做深色浅色主题切换；或者把整个页面组件化，用原生 Web Components 封装成<game-card>标签。我个人在实际操作中的体会是，重构这类页面的价值不在于最后那个页面有多像，而在于你在拆解过程中被迫想清楚了每一个布局决策的理由。下次再遇到一个陌生页面，你脑子里会自动跳出“这块用 Flex、那块用 Grid、这里要处理溢出”的判断，这种直觉才是真正值钱的东西。最后分享一个小技巧：重构时把浏览器窗口从宽到窄慢慢拖动，观察布局在哪个宽度开始崩，那个点就是你的断点该设的位置，比拍脑袋定 768px 靠谱得多。