MySQL高效查询实战：从增删改查到索引与执行计划优化
2026/9/26 17:36:56
简介：一份面向初级与初中级前端开发者的HTML+CSS实践项目，以仿QQ音乐界面为载体，通过还原真实产品的页面布局与视觉风格，帮助理解语义化标签、组件复用、Flexbox与Grid布局、媒体查询以及盒子模型等前端核心知识点，也适合用于课程设计、实训作业和前端入门阶段的综合练习。压缩包共20个文件，包含1个主入口HTML文件、2个CSS样式文件（分别承担基础样式重置与页面整体布局）、17张JPG/PNG格式的封面背景与图标素材；CSS部分运用了类选择器、伪类、媒体查询与弹性布局等手段，整体仅1.45MB，结构简洁、加载轻快。当前已有4170人学习浏览，页面下载后可直接打开渲染查看，也能配合样式代码逐段分析布局思路；由于设计时强调组件复用性，页面中各模块的结构和样式相对独立，方便学习者提取并移植到自己的项目中，是提升前端还原能力与代码组织意识的实用素材。
1. 仿QQ音乐静态网页：为什么说它是练HTML+CSS最合适的骨架
学完 HTML+CSS 基础语法之后，最尴尬的中间地带是：个人主页项目太简单，直接仿完整网站又不知道怎么拆。仿 QQ 音乐这类 HTML 静态网页正好卡在中间——页面密度够、布局类型全，整个首页只用 html+css 就能搭出来，不碰 JS 也能做到七八分像。这份资源就是一套可以直接拿来拆的仿 QQ 音乐静态页面骨架，头部导航、轮播位、推荐歌单、热歌榜、底部播放条一个不缺，适合刚学完基础想做第一个综合项目的人，也适合做作品集练手。改 HTML 结构、调 CSS 变量，浏览器刷新就能看到变化，后续想加交互也不受约束。
2. 拆掉首页骨架：导航、内容区、底部播放条怎么划分
拿到资源的第一件事，别急着改样式，先把整个页面当成积木来拆。仿 QQ 音乐首页看起来很满，实际上就是三块：最上面的导航条、中间的内容区、永远固定在底部的播放条。把这三块在 HTML 里对应清楚，后面写 CSS 时就不会出现「这个元素该放哪」的纠结。
2.1 头部导航：logo、搜索框、用户入口的HTML结构与语义标签
先看资源的头部结构，标准写法大概是这样的：
<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>仿QQ音乐 - 首页</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header class="topbar"> <div class="topbar__logo"> <a href="index.html">QQ音乐</a> </div> <form class="topbar__search" role="search"> <input type="text" placeholder="搜索歌曲、歌手、专辑"> <button type="submit">搜索</button> </form> <nav class="topbar__nav"> <a href="#" class="active">推荐</a> <a href="#">排行</a> <a href="#">歌单</a> </nav> <div class="topbar__user"> <span class="avatar">未登录</span> </div> </header> </body> </html>这里几个细节值得说。<meta charset="utf-8">必须放在<head>最前面，否则页面中文会乱码；viewport这个 meta 控制了移动端缩放，没有它，手机浏览器打开页面时会像看一张大图一样需要手动放大缩小。header、nav、form这些语义标签的作用不只是给浏览器看，后续维护时你按标签就能定位功能区块，比满屏<div>效率高得多。
搜索框用<form>包起来而不是单独放一个<input>，有个实际好处：回车自动提交、按钮点击不会触发奇怪的行为。type="submit"是默认类型，但显式写出来能避免将来有人把按钮改成type="button"导致回车失效。class 命名走的是简化版 BEM，.topbar__search一眼能看出它是 topbar 里的搜索区块，写 CSS 时选择器权重也稳定，不会出现div div p这种改了上衣牵扯裤子的选择器。
2.2 主体内容区：轮播banner、歌单网格、榜单列表的模块划分
中间内容区是三块独立的结构：轮播 banner 占满内容区宽度，下面是推荐歌单的网格，再往下是热歌榜的单列列表。看资源里的 HTML，大结构是这么组织的：
<main class="content"> <!-- 轮播位 --> <section class="content__banner"> <div class="banner-slider"> <div class="banner-slider__item">banner 1</div> <div class="banner-slider__item">banner 2</div> <div class="banner-slider__item">banner 3</div> </div> </section> <!-- 推荐歌单 --> <section class="content__playlist"> <h2 class="section-title">推荐歌单</h2> <div class="playlist-grid"> <a class="playlist-card" href="#"> <div class="playlist-card__cover"></div> <p class="playlist-card__name">歌单名称</p> </a> <!-- 重复 8~12 个相同结构 --> </div> </section> <!-- 热歌榜 --> <section class="content__rank"> <h2 class="section-title">热歌榜</h2> <ol class="rank-list"> <li><span class="rank-list__num">1</span>歌名</li> <li><span class="rank-list__num">2</span>歌名</li> </ol> </section> </main>注意main标签：整个页面里只有一个，告诉浏览器这里是主要内容区域。三个区块全用section包裹，每个 section 里都带一个h2标题，这是一个常见的认知点——section通常要求有标题，屏幕阅读器就是靠标题结构来给视障用户朗读页面大纲的。
推荐歌单这块用的是div网格，每张卡片是一个<a>链接，注意不是<button>，因为歌单点进去是跳转行为，跳转用链接、点击触发用按钮，这个语义区分在静态页面里看不出差别，但将来接 JS 时就有意义——按钮默认有回车和空格触发事件，链接不是。排行榜用<ol>有序列表是刻意为之，榜单名次本身就是顺序信息，用无序列表ul在语义上是错的。
2.3 底部播放条：fixed定位的“伪交互”区
底部播放条是这个资源里最像「真实产品」的地方，也是新手最容易写上瘾的一块。它的结构看起来是这样：
<footer class="player-bar"> <div class="player-bar__song"> <img class="player-bar__cover" src="img/cover.jpg" alt="专辑封面"> <div> <p class="player-bar__name">歌名</p> <p class="player-bar__artist">歌手</p> </div> </div> <div class="player-bar__controls"> <button class="btn-prev">上一首</button> <button class="btn-play">播放/暂停</button> <button class="btn-next">下一首</button> </div> <div class="player-bar__right"> <span>音量</span> <button>播放列表</button> </div> </footer>用<footer>标签放播放条，严格说语义不太精确，但很多仿站都这么干，因为 footer 默认没有样式，用起来跟 div 一样，而且名字直观。如果你在意语义，换成<div class="player-bar">完全没问题——语义标签是辅助，不要被它绑架。
播放条有三块：左边歌曲信息、中间控制按钮、右边音量与列表。这个三段式布局决定了它后面要用 flex 或 grid 做水平排列，而且三块的宽度比例不对等——左边和右边给固定宽度，中间用 flex 的flex: 1让它自适应占满剩余空间。这是做播放条最稳妥的方案，比float那一代的老写法好维护得多。
把这三大块在脑子里立起来以后，整个页面的骨架就清楚了：header顶部固定、main内容区正常滚动、player-bar底部固定。下面进入 CSS 阶段。
3. 用CSS把页面做“真”：布局、配色、字体图标一次说清
HTML 只有骨架，把仿 QQ 音乐页面从「灰模」变成「像样成品」的，全在 CSS 里。这一章不是讲语法，是讲选择：哪些地方用 Grid、哪些用 Flex、主色怎么定、字体图标怎么引，每个选择背后都有具体的理由，你改别人的页面时也能用上同一套判断逻辑。
3.1 Flex和Grid的选型：这份资源里哪些地方用了哪个，为什么
拿到一份页面布局需求，先别急着全用 flex 或全用 grid，按结构特征来选。导航条、播放条这种「一行里放几个东西、水平排列」的，用 flex；歌单网格这种「多行多列、每列宽度一致」的，用 grid。这是资源里最核心的布局思路。
/* 导航条：水平排列 + 垂直居中对齐 */ .topbar { display: flex; align-items: center; gap: 16px; height: 60px; padding: 0 24px; background: #fff; position: fixed; top: 0; left: 0; right: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .topbar__search { flex: 1; /* 搜索框吃掉剩余宽度 */ max-width: 360px; /* 但别无限拉宽 */ } /* 歌单网格：固定列数，卡片等宽等高 */ .playlist-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }align-items: center是 flex 容器最常见的属性，用来让子项在交叉轴居中——导航条里的 logo、搜索框、用户头像本来高度不一，这一行全解决了。gap是 flex 布局里的「间距神器」，以前用 margin 挨个加间距，总会出现最后一个元素多出一块 margin 的问题，gap直接绕开这个历史包袱。
歌单网格用repeat(4, 1fr)，意思是生成 4 列等宽，每列宽度刚好占满容器。1fr是 grid 的单位，代表「剩余空间的一份」，四等分比width: 25%的好处是不用考虑 border 和 padding 是否把 25% 撑破，grid 会把空间分配算得干干净净。
播放条同理，中间控制按钮用display: flex排一排，左边歌曲区和右边音量区设置固定宽度，中间flex: 1，我一般还会加一句justify-content: center让按钮组整体居中。
3.2 色彩与CSS变量：从QQ音乐界面提取主色和灰色阶
QQ 音乐视觉上的核心识别色是绿色系。复刻时不需要像素级还原官方色值，取一个主色、两三个灰色、一个白色背景，就能把氛围做出来。这份资源里我建议按下面的色板去对：
| 用途 | 参考色值 | 说明 |
|---|---|---|
| 主色（品牌绿） | #31c27c | 按钮、选中态、链接高亮 |
| 主色加深（hover 用） | #27a86c | 鼠标悬停时用，偏沉稳 |
| 页面背景 | #f5f5f7 | 浅灰，避免纯白刺眼 |
| 卡片背景 | #ffffff | 内容承载面 |
| 一级文字 | #1a1a1a | 歌单名、标题 |
| 二级文字 | #666666 | 歌手名、辅助说明 |
| 分割线 | #e8e8e8 | 列表分隔、边框 |
不要把这些色值散写在每个选择器里，用 CSS 变量收口，这是这份资源最值得抄走的写法：
:root { --primary: #31c27c; --primary-dark: #27a86c; --bg-page: #f5f5f7; --bg-card: #ffffff; --text-main: #1a1a1a; --text-sub: #666666; --border-color: #e8e8e8; } .btn-play { background: var(--primary); color: #fff; } .btn-play:hover { background: var(--primary-dark); }:root里的变量全页面生效。后期想换成红色系主题，只改:root里这几个值，不用满文件替换颜色，这就是用变量的真实收益——不是炫技，是省改版的时间。
选色上有一个实战经验：模拟真实网页时，灰色阶至少给两级，一级文字和二级文字不能同一个色。很多新手练手项目看起来「假」，不是布局问题，而是所有文字都用一个黑色，视觉上没有层次。#1a1a1a和#666666一深一浅，层级感立刻出来。
3.3 加载字体图标：不依赖图片也能撑起视觉的封面占位
页面里那些播放按钮、上一首、下一首的图标，资源里用的是字体图标而不是图片文件。原因很实际：字体图标是矢量，放大缩小不糊；只有一个字体文件，不用一张张引图片；最重要是离线打开页面时不会一连串图片加载失败导致布局塌掉。
最常见的是用 iconfont 生成的字体文件，在 HTML 的<head>里引用：
<link rel="stylesheet" href="iconfont/iconfont.css">然后在需要图标的地方写<span class="iconfont icon-bofang"></span>。iconfont.css里通过@font-face声明字体来源，.icon-bofang:before这类伪元素规则会把字体编码映射到 Unicode 上，最终渲染出图标。
如果你不想引入第三方文件，还有更轻的方案：直接用 Unicode 字符模拟。播放按钮用▶、上一首用⏮、下一首用⏭，这些字符任何系统字体都能显示，缺点是不同平台渲染风格有差异，但作为静态练手足够。
歌单封面这个位置也容易踩坑——没有真实图片时，放一张破图比不放还难看。资源里的处理方式是：封面用纯 CSS 渐变加歌单名称首字占位：
.playlist-card__cover { width: 100%; aspect-ratio: 1; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 600; color: rgba(255, 255, 255, 0.9); background: linear-gradient(135deg, #31c27c, #0e7a4a); }aspect-ratio: 1强制正方形，解决了以前要写height: 0; padding-bottom: 100%那一套 hack，现在浏览器支持很好。渐变角度135deg让颜色从左上到右下过渡，视觉上比纯色更有「封面感」。
3.4 间距、圆角与阴影：让静态页不“散”的三个细节参数
布局和配色立住之后，页面是否专业，差距往往在细节参数上。我先说间距：全页面统一用 8 的倍数去定义间距。内边距padding: 16px、卡片间距gap: 20px、区块间距margin-top: 32px，这个习惯能避免「左边距 10px 右边距 18px」这种随手写出的零散数值。一旦间距系统乱了，页面看起来就会像元素随机散落。
其次是圆角，用一个滑杆记忆：小的头像和按钮给8px，卡片给12px，banner 大图给16px。圆角统一了，元素之间互相呼应；每处都随机写，页面就显廉价。
阴影方面，静态页面里卡片浮起的效果，一层阴影就够：
.playlist-card { border-radius: 12px; background: var(--bg-card); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transition: transform 0.2s ease, box-shadow 0.2s ease; }阴影用rgba(0,0,0,0.06)而不是shadow默认的纯黑，是因为真实环境里阴影是「淡淡的灰色投影」，透明度给低一点才自然。这个细节，加上前面的间距与圆角，基本决定了一个静态页面「像不像专业的产物」。
4. 让静态页“活”起来：hover反馈、轮播与返回顶部的最小实现
纯 HTML+CSS 页面最容易被挑毛病的就是「死板」。这一章说清楚三件事：hover 反馈做在哪、纯 CSS 轮播怎么写、返回顶部该不该引 JS。所有实现都控制在最小范围内，不做过度工程。
4.1 hover反馈：做得少比做得花更重要
新手做 hover 最容易犯的错是每个元素都加效果，鼠标一进页面四处乱跳。资源里的做法是只挑三类位置做反馈：可点击的按钮、歌单卡片、榜单行。
/* 歌单卡片：浮起 + 轻微上移 */ .playlist-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } /* 播放按钮：换背景色 */ .btn-play:hover { background: var(--primary-dark); } /* 榜单行：整行点亮 */ .rank-list li:hover { background: #f0f0f1; border-radius: 8px; }transform: translateY(-4px)结合阴影变化，模拟的是「卡片从纸面浮起」的效果。注意 hover 反馈要有过渡动画的配合，第 3 章里那条transition: transform 0.2s ease, box-shadow 0.2s ease就是干这个的，没有 transition，鼠标移上去是瞬间跳变，体验生硬。
translateY(-4px)的 4px 是个微调值，让卡片看起来「轻轻抬起」而不是「飞起来」。榜单行 hover 用背景色而不是transform，因为列表行多，做位移会让整片区域抖动。这是交互里的取舍——同样一种反馈，放在不同元素上要选不同的实现方式。
4.2 纯CSS轮播：checkbox hack方案
轮播是这个资源里比较有看点的部分。纯 CSS 实现轮播，主流的做法有两种：scroll-snap适合移动端横滑，但 PC 端要显示轮播切换按钮得额外写 JS；checkbox hack适合 PC 点按钮切换，不需要 JS。资源里用的是 checkbox hack。
原理不复杂：把每一轮的切换按钮做成<label>，关联一个隐藏的 radio 或 checkbox，利用:checked兄弟选择器控制轮播容器位移。
<div class="banner-slider"> <input type="radio" name="banner" id="banner-1" checked> <input type="radio" name="banner" id="banner-2"> <input type="radio" name="banner" id="banner-3"> <div class="banner-slider__track"> <div class="banner-slider__item">banner 1</div> <div class="banner-slider__item">banner 2</div> <div class="banner-slider__item">banner 3</div> </div> <div class="banner-slider__dots"> <label for="banner-1">1</label> <label for="banner-2">2</label> <label for="banner-3">3</label> </div> </div>.banner-slider__track { display: flex; width: 300%; transition: transform 0.4s ease; } /* 选中第二张时，轨道向左移动一屏宽度 */ #banner-2:checked ~ .banner-slider__track { transform: translateX(-33.3333%); } #banner-3:checked ~ .banner-slider__track { transform: translateX(-66.6666%); }这段 CSS 的关键是width: 300%和translateX的配合。轨道里有三张图，轨道宽度设为容器宽度的三倍，每张图width: 33.3333%正好占满一屏；选中第二个 radio 时，整个轨道向左平移一屏宽度，第三张同理。
.banner-slider__track必须和 radio 是兄弟关系，且 radio 要在轨道前面，:checked ~沿着 DOM 向后找才能命中。如果结构不对，样式不生效。这是 checkbox hack 最重要的一个适用条件。
scroll-snap的方案我也说一句：它用scroll-snap-type: x mandatory加overflow-x: auto，让用户在触摸板或手机上横向滑动手感接近原生应用，但它没有自动播放能力，也没有圆点按钮，纯静态环境里反而不如 checkbox hack 直观。
4.3 返回顶部：这处JS增强不越界
正式进入 JS 之前先给个判断：HTML+CSS 为主的项目里，加 JS 不是犯规，但要控制边界——能用 CSS 解决的不引 JS，JS 只做增强。返回顶部就是一个典型例子，很多初学者一上来想写循环滚动，血泪经验告诉你没必要。
// 返回顶部按钮：监听滚动位置，切换显示状态 const backTop = document.getElementById('backTop'); window.addEventListener('scroll', () => { if (window.scrollY > 400) { backTop.classList.add('visible'); } else { backTop.classList.remove('visible'); } }); backTop.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); });window.scrollY是当前滚动距离，超过 400px 时显示按钮，否则隐藏。这个阈值不是随便写的——banner 高度大约 300px，页面滚动超过一屏再出现按钮，既不会遮挡初始内容，也不会让用户觉得「这按钮怎么一直抢视线」。
window.scrollTo的behavior: 'smooth'是原生平滑滚动，老式做法是用requestAnimationFrame配合scrollTop循环递减去做缓动，代码十几行且容易在快速连点时抖动。现在浏览器原生支持平滑滚动，一行解决。.visible这个 class 配合 CSS 的opacity和pointer-events控制渐隐渐显。这里加 JS 的合理性在于：scroll事件监听没法用纯 CSS 完成，属于值得引入 JS 的场景。
5. 避坑清单：仿写真实网站时最容易翻车的五个地方
仿 QQ 音乐这类页面，翻车点非常集中。下面这五个问题，十次仿站有八次会碰到，每条都按「现象 → 原因 → 解决」来说，排查速度和准确度远比背别人的代码要高。
5.1 图片全挂，页面看起来像残废
现象：本地打开 HTML，封面图、banner 图全部显示成破图图标，布局被撑得乱七八糟。
原因分两类：一是 HTML 里引用了网络图片，但离线打开时没有网络；二是相对路径写错，比如页面在html/目录、图片在img/目录，却写了src="图片.jpg"。还有一种是文件名大小写问题，Cover.jpg写成cover.jpg，在 Windows 上侥幸能显示，部署到 Linux 服务器立刻挂。
解决：资源里所有图片路径统一用相对路径，以 HTML 文件为基准。页面在html/index.html，图片在html/img/cover.jpg，就要写src="img/cover.jpg"。实在没有图片资源的，用第 3 章的 CSS 渐变占位方案顶上。排查时打开浏览器开发者工具切到 Network 面板，看到img类型请求标红就是路径问题，直接看请求的完整地址对不对。
5.2 底部播放条把内容挡住，页面越滚越多
现象：播放条固定到底部了，但页面最后的内容滚动到最底时，被播放条盖住一块，怎么滚都看不到完整的榜单列表。
原因：播放条用position: fixed后脱离了文档流，它不占高度，但内容区依然是原来的高度，最后一块内容就会藏在播放条下面。
解决：给body加一个和下边距等值的padding-bottom。播放条高度通常是64px，就写body { padding-bottom: 64px; }。这个值必须是播放条的完整高度，如果播放条内部有 padding、有边框，要按实际计算。改完播放条高度后忘记改 body 的 padding-bottom，是这份资源里最容易出现的连带性翻车。
5.3 字体图标变成方块，页面出现一排小方框
现象：按 iconfont 的文档引入，代码也没贴错，但页面上该显示图标的位置全是空心方块或者「?」号。
原因：@font-face的字体路径写错，iconfont.css在css/目录，字体文件在fonts/目录，CSS 里写url('fonts/iconfont.woff2')和url('../fonts/iconfont.woff2')差别就在有没有../。另外 iconfont 的 Unicode 编码必须和 CSS 里content: "\e600"一致，从官网下载时如果勾选多个项目，编码可能冲突。
解决：先看 Network 面板里iconfont.woff2请求是不是 404——404 就是路径问题，补../或调整目录层级。请求成功了还显示方块，就排查 CSS 里.iconfont:before的content值和字体文件内部的编码是否匹配。手边没有网络工具的，换个思路用第 3 章提到的 Unicode 字符方案，省去字体文件直接显示符号。
5.4 CDN资源在本地加载失败，样式引了一堆但不生效
现象：HTML 里<link>引了一大堆 CDN 上的 CSS，页面却只有最基本的文字排版，字体、颜色、布局全没用上。
原因：浏览器对本地file://协议打开页面有安全限制，部分 CDN 资源请求会被拦截或无法携带Referer就拒绝响应。另外本地文件加载远程 CSS 属于跨域请求，不是每个资源站都允许file://的 Origin。
解决：把资源依赖本地化，引到本机文件；或者直接起一个本地静态服务器。我一般用 Python 的python -m http.server 8000，在项目根目录运行，然后浏览器开http://localhost:8000访问页面，这从根本上绕开了file://协议的限制，本地真的需要联调远程资源时也符合浏览器的跨域规则。
5.5 窗口一缩小，页面布局立刻散架
现象：浏览器全屏时一切正常，缩小窗口或者打开移动端模拟器，导航条挤成一团、歌单卡片重叠、播放条按钮挤破。
原因：布局里的宽度都是写死的，容器没有最小宽度约束，flex 和 grid 在窗口变窄时无法处理「空间不够但元素不能压缩」的矛盾。
解决：给整个页面一个min-width，比如min-width: 1200px，窗口比这个窄时出现横向滚动条，至少保证页面不散架，这是 PC 端仿站的常规兜底。更进一步，要用媒体查询适配移动端就在@media (max-width: 768px)里面把grid-template-columns: repeat(4, 1fr)改成repeat(2, 1fr)，导航栏里的搜索框flex: 1改成固定宽度。做这两个方案的前提都是先给容器设min-width，这个兜底能省下大量调试时间。
6. 验证与进阶：让这份静态页面真正“过关”的两个动作
6.1 开发者工具里的三层体检清单
页面改完别急着关浏览器，我在交付每份静态页之前都会强制走一遍开发者工具的体检流程，三层：结构、请求、响应式。
第一层看 Elements 面板，检查每个标签标签是否闭合、class 命名是否一致，顺手把无用的嵌套删掉。第二层看 Network 面板，刷新页面，任何标红的请求都要处理——图片 404、字体 404、CSS 加载失败，这些都是上线后里的雷。第三层点开发者工具左上角的设备模拟图标，切到 iPhone 或 iPad 尺寸，看页面是否有横向溢出、按钮是否可点。
6.2 三个值得动手扩展的方向
第一个方向是给播放条加转动的唱片动画：用 CSS@keyframes让封面图片rotate旋转，hover 暂停，这一下就能让静态页面有了「活物」感，代码量控制在 20 行以内。
第二个方向是给歌单卡片 hover 时浮出播放按钮浮层：卡片内绝对定位一个半透明遮罩，hover 时从opacity: 0过渡到1，配合第 4 章的卡片浮起效果，视觉完成度直接上一个台阶。
第三个方向是收藏按钮的点按反馈：用 CSS 的:active伪类配合transform: scale(0.9)，做出按钮被按下去的回弹手感，这比加一段 JS 处理更符合资源不引依赖的定位。这三个方向做完，这份仿 QQ 音乐页面就不再是练手稿，可以放进作品集里展示布局能力和细节处理意识。
我自己做这类资源时，最大的教训是太相信「代码写完就对」，结果每次都要在联调阶段拆一遍遥控。从那以后我每次交付静态页，都强制把 Network 面板的 404 检查和移动端模拟器过一遍，这个习惯一直留到现在。希望帮到你。
本文还有配套的精品资源，点击获取