实训第三天，面制我对着浏览器里那个歪掉一半的作实导航栏发呆。明明代码里写的训报margin是0 auto，预览却死死贴在左边。面制检查了半小时，作实发现是训报父容器忘了设宽度。这种低级错误在实训报告里写出来挺丢人，面制但确实是作实我学web页面制作最扎实的一课——布局永远先看父元素。

我们的训报任务是用HTML+CSS复原一个电商首页。听起来简单，面制真动手全是作实坑。第一版我用了大量绝对定位，训报结果浏览器窗口一拉窄，面制整个页面像被撕碎的作实报纸。后来改成flex布局，训报才体会到弹性盒子的妙处。原来响应式设计不是靠媒体查询堆出来的，而是从结构上就留出伸缩余地。这个认知转变，比敲一万行代码都值钱。

班里有人用Bootstrap框架，两小时就搭完页面。我坚持手写，进度慢得像蜗牛。但当我手动处理完一个下拉菜单的hover状态，看着那个小三角平滑旋转45度时，突然理解了框架底层的逻辑。框架不是捷径，是别人替你踩过坑后的经验总结。自己踩一遍，才能真读懂那份经验。

最烦的是CSS兼容性。同一段代码，Chrome里好好的，Firefox里间距全乱。查资料才知道是box-sizing属性没统一。后来我在样式表第一行就写上通配符重置，问题少了一大半。这种小技巧书上不会特意讲，都是被坑出来的。实训报告里我专门列了一页“踩坑记录”，比课程笔记还厚。

页面做到第四版时，我开始关注细节。字体大小、行高、色值搭配，这些看似主观的东西其实有规律可循。比如正文用16px，标题用24px，间距保持8的倍数，整体就和谐。老师看我的稿子，指出按钮圆角应该和输入框一致，我改完确实顺眼许多。原来设计感不是玄学，是数学。

最后一天联调，我的页面在1366分辨率下完美，可一换到1920的屏幕，背景图就露白边。折腾到最后发现是背景图尺寸设成了固定像素。改成cover属性后，无论窗口多大都能自适应。那一刻我意识到，web制作没有“完成”状态，只有“适配”状态。你永远在为下一个屏幕尺寸做准备。

这份报告写下来，最值钱的不是那些代码技巧，而是我养成的调试习惯。每次改动都先备份原文件，每次测试都开开发者工具看控制台报错，每次布局都先画草图再写代码。这些笨办法，让我的页面从“能看”变成了“能用”。实训结束了，但那种对着空白页面一点点填满的踏实感，大概会留很久。

(责任编辑：热点)