网页设计实训报告总结

网页设计实训结束那天，网页我盯着自己写的设计实训代码，突然发现一个尴尬的报告事实：我用了整整两周时间，做出的总结页面居然不如老师随手用模板改出来的好看。但这恰恰是网页这次实训最值钱的地方。

实训第一天，设计实训老师扔给我们一个任务：三天内做一个个人主页，报告不许用框架，总结不许用模板。网页我心想这有什么难的设计实训，不就是报告几个div加几个样式吗。结果第一天晚上我就栽了——我试图做一个导航栏悬停变色效果，总结折腾到凌晨一点，网页最后发现是设计实训CSS选择器优先级的问题。那种感觉就像解一道数学题，报告明明每一步都对，但答案就是不对。后来我才明白，浏览器不关心你的代码看起来对不对，它只按规则执行。

到第三天，页面能看了，但总觉得哪里不对劲。我把作品发给朋友看，他说了句：“你这配色像医院网站。”我当场就想反驳，但仔细一看，确实，蓝白配色加上规规矩矩的布局，活脱脱一个挂号平台。这件事让我意识到，技术只是工具，审美才是门槛。我花了两天把色彩方案重新调了一遍，从Material Design配色方案里偷师，用了暖灰色配珊瑚橙，整个页面立刻活了过来。

实训第五天遇到了真正的拦路虎——响应式布局。桌面端好好的三栏布局，一缩到手机宽度就乱成渣。我试了flexbox，试了grid，甚至试了媒体查询的暴力堆叠。最后是老师一句话点醒我：“你先别想着适配所有屏幕，想想手机上用户最需要看到什么。”于是我重新设计了内容层级，把次要信息折叠起来，核心内容优先展示。这比任何技术方案都管用，因为响应式设计的本质不是让页面变小，而是让信息重新排优先级。

项目收尾阶段，我被一个bug折磨了整整一个下午。菜单栏在Chrome里正常，换到Safari就偏移了5个像素。我反复检查代码，甚至怀疑是自己写错了什么。后来发现是不同浏览器对box-sizing的默认值处理不一样。加了一行box-sizing: border-box;就解决了。这种问题书上写过，但真正遇到才会刻在脑子里。

实训结束前，我做了个决定：把所有页面重新写一遍。不是重做，而是重构——把之前那些打补丁式的CSS删掉，用更清晰的结构重来。这个过程比第一次写还痛苦，但收获更大。我第一次理解了“代码是写给人看的，顺带让机器执行”这句话。类名命名从div1、div2改成.header-nav、.product-card之后，整个项目的可维护性直线上升。

这次实训让我看清了自己的水平——离“会做网页”还有距离，但至少摸到了门槛。我犯过的错误比学到的技巧多，但正是这些错误让我记住了布局的坑、兼容性的坑、语义化的坑。现在再看那些大厂的页面，我能看出点门道了，比如他们的栅格系统是怎么搭的，间距为什么是这个数值。这种“看懂”的感觉，比做出一个页面更有成就感。网页设计这条路还长，但至少我知道下一步该往哪走了。