实训第一周，网站我写的实训登录页面在Chrome上跑得好好的，到Firefox直接错位。报告查了半天，总结发现是网站flex布局里少写了一个浏览器前缀。这种事课堂上不会讲，实训但真实项目里躲不掉。报告

这次实训做的总结是企业官网前端，四个页面：首页、网站产品展示、实训新闻列表、报告联系我们。总结老师给了设计稿，网站要求用HTML+CSS+JavaScript实现，实训不许用Bootstrap之类的报告框架。刚开始觉得没必要，手写CSS多慢。写到第三个页面就明白了——不靠框架，每个像素都得自己算，反而把盒模型、浮动、定位这些基础打牢了。

首页的轮播图卡了我两天。最初用纯CSS的animation做，图片切换时总闪一下白屏。后来改成JavaScript控制opacity过渡，问题消失。代码不长，三十来行，但调试过程中我翻了MDN上关于requestAnimationFrame的文档，才算真正理解浏览器渲染帧的概念。这种“卡住—查资料—解决”的循环，比听课印象深十倍。

响应式布局是另一个坎。设计稿只有PC端，老师要求加移动端适配。我一开始用媒体查询硬调，320px、768px、1024px各写一套样式，代码臃肿得看不下去。组里一个同学提醒可以用rem+vw做弹性布局，试了之后确实清爽很多。不过vw在横屏手机上会出问题，又补了一层媒体查询兜底。没有完美方案，只有取舍。

团队协作也出了状况。四个人分工，我负责首页和公共样式。公共样式改一次，其他三个页面全受影响。有次我把导航栏高度从60px改成64px，新闻列表页的侧边栏直接掉下去了。后来学乖了，公共样式单独放一个文件，改之前先在群里说一声。Git提交也规范了，每次commit写清楚动了哪个模块。这些规矩不是老师教的，是踩坑踩出来的。

代码规范方面，我最大的收获是学会了用BEM命名。以前写class就是“left”“top”“red”这种，过两天自己都看不懂。BEM虽然啰嗦，但.btn--primary这种命名方式，三个月后回来看依然清晰。另外，CSS变量比预处理器方便，不用编译，改主题色只需要动一个值。当然IE不支持，但2024年了，谁还管IE。

实训最后一天做项目答辩。老师问了一个问题：如果用户禁用JavaScript，你们的页面还能用吗？全场安静。我们确实没考虑过。轮播图不动了，下拉菜单打不开，表单验证也失效。后来查了查，用<noscript>标签加提示，关键交互用CSS做降级，这些补救措施不复杂，但之前完全没这个意识。技术之外，还得想用户可能遇到的各种极端情况。

三周实训，写了两千多行代码，改过的bug比写过的功能还多。最大的感受是：前端入门容易，写好难。一个像素的偏差、一个浏览器的兼容、一次网络请求的失败，都可能让页面崩掉。但正是这些细碎的问题，逼着你去查文档、读源码、问别人。比起背知识点，这种“非解决不可”的动力更管用。

现在回头看第一周那个错位的登录页，改动其实就一行：display: flex前面加了-webkit-。但找到这一行的过程，才是实训真正教给我的东西。