web网站实训报告

实训第一天，站实我对着空白的训报HTML文件发愣。老师敲了几行代码，站实浏览器里立刻跳出一个红色标题——就这么简单？训报可当我动手复制，页面却一片空白。站实检查半天，训报原来漏了闭合标签。站实那一刻我意识到，训报网页不是站实写出来的，是训报“搭”出来的，每一个标签都像积木，站实少一块就塌。训报

真正的站实转折发生在第三天。我们分组做一个校园二手交易平台，训报我负责前端页面。站实起初我照着模板改文字，把商品图片一张张贴上去，页面丑得自己都不忍直视。旁边的同学用CSS浮动布局，三下五除二排出了整齐的卡片网格。我问他怎么想到的，他甩过来一句：“你去看B站那个仿淘宝首页教程，跟着做一遍就会了。”当晚我刷到凌晨两点，边看边敲，终于弄懂了flex和grid的区别。原来布局不是玄学，是有逻辑的——父元素管排列方向，子元素管自身大小，就像排队时前面的人决定队伍形状，你自己决定站姿。

第四天我们小组吵了一架。后端同学说接口数据格式是JSON数组，我按对象写了循环，结果商品价格全显示undefined。改代码时我忍不住抱怨：“你们不能提前说清楚吗？”对方也急：“你自己不会看文档？”冷静下来后，我把接口返回的数据打印在控制台，一条条对照字段名，才发现是大小写不一致。这种低级错误气得我直拍桌子，但拍完还是得老老实实改。后来我学乖了，每次写前端前先拿假数据测试，再把真实接口接进来。这习惯一直留到现在。

最崩溃的是第五天下午，页面在Chrome里好好的，换到Safari就乱成一团。图片错位，按钮变形，连字体都变粗了。我查了半小时，发现是没写浏览器前缀——-webkit-这个魔鬼前缀，活生生让我的样式表多出二十行重复代码。组员提议干脆只兼容Chrome，但老师检查时偏偏用Safari打开，那场面，像极了考试时复习的都没考，考的都没复习。

但说实话，真正让我开窍的是做响应式布局那次。我用媒体查询把页面分成三档：手机、平板、电脑。写代码时总觉得多余，直到把浏览器窗口慢慢拖窄，看着卡片从四列变成两列再变成单列，那种“活过来”的感觉特别奇妙。原来网页不是死板的画布，它会随着观看者的设备呼吸。这个发现让我突然理解了为什么实训要叫“实训”——光看书永远体会不到这种动态的成就感。

实训最后一天，我们组的网站终于上线。虽然还有bug，虽然加载速度慢得像蜗牛，但当我用手机扫码打开，看到自己写的页面在屏幕上流畅滚动时，指尖都在发麻。旁边同学拍了我一下：“别看了，赶紧修那个购物车按钮，点半天没反应。”我笑着打开控制台，发现是事件绑定的作用域出了问题——又是低级错误，但这次我没抱怨，反而觉得亲切。

回头看这五天，最深的体会是：网页开发像做菜，标签是食材，CSS是调味，JavaScript是火候。光背菜谱没用，得亲手炒糊几次才知道什么时候该放盐。那些报错信息就是你的舌头，辣了咸了都会告诉你。下次再写页面，我大概不会再对着空文件发愣了——先搭骨架，再填肉，最后慢慢调味道。这个过程，比任何教程都来得真实。