开始翻箱倒柜找资料

上周三晚上临睡前突然想起来，下个月公司内部有个H5网页设计摸底考，成绩跟季度绩效挂钩！我这脑子早把学的那点东西还给老师了，急得我直接从床上弹起来开电脑找复习资料。

我先在几个常用的资源网站上扒拉了一圈，输入“H5考试”“网页设计复习”这种关键词，跳出来一堆PDF和网页链接。下载了七八个压缩包，结果解压一看傻眼了：要么是十年前的过时货，还在讲table布局；要么纯理论堆砌，满屏都是“响应式设计原则”这种空洞概念，看得我直打哈欠。

亲手测试踩坑排雷

第一轮筛选我就删掉一半资料。剩下三个看着靠谱点的，我决定硬着头皮自己试：

• 蓝色封皮那套模拟题：下载完立刻刷了套基础卷。前面选择题还凑合，到实操题让我用纯CSS画个下拉菜单，直接卡壳半小时！翻它配套的答案文档，解析就两句话：“使用伪类实现交互效果”——这跟没说有啥区别？气得我差点把鼠标扔了。
• 某培训机构出的速成手册：这个倒是贼详细，每个标签属性都列成表格。可等我熬夜背完flex布局的六种属性，第二天做题发现根本用不上！净考些media查询适配iPad横屏这种实际场景，手册里就提了两行，纯属坑爹。

真有用的就这三样

折腾到后半夜两点，终于扒拉出能打的干货：

• 带交互案例的电子书：这个真是救命了！不是干讲代码，而是直接给个仿京东商品页的完整项目，鼠标移上去按钮变色、侧边栏折叠效果全都能实时调试。我照着敲了一遍，连面试常考的CSS盒模型塌陷问题都顺带搞明白了。
• 错题集锦社区贴：偶然在某个论坛翻到个热帖，楼主把去年考试易错点全整理出来了。最绝的是第三楼，有人用一张超市小票照片当素材，教你怎么用HTML5语义化标签排版——这种接地气的例子比教科书管用十倍。
• 手机端适配沙盒：这个不是资料，是个模拟器工具。它能实时显示同一网页在十几种手机上的效果。我把自己写的页面丢进去，发现小米折叠屏上图片全挤变形了，赶紧回去加了个max-width:100%，这才算过关。

刷题效果立竿见影

今天中午用筛选出的资料突击三小时，下班前拿同事出的模拟卷测试——79分！比上周瞎看时的52分强太多了。重点是真省时间，那本又厚又重的官方教材，我翻两页就犯困，这仨玩意直接聚焦考试重点。等考完试我得请那个论坛楼主喝奶茶，没他整理的坑点清单，我肯定还在跟float较劲！