网页制作实训报告总结

实训第一周，网页我写的制作总结HTML代码在浏览器里显示成一堆乱码。检查了半小时才发现，实训把``写成了``。报告少一个横杠，网页浏览器就不认。制作总结这件事让我记住：网页制作里没有“差不多”，实训只有“对”和“错”。报告

这次实训从零开始搭一个企业展示型网站，网页一共五个页面：首页、制作总结产品列表、实训产品详情、报告关于我们、网页联系我们。制作总结我负责全部前端代码，实训从结构到样式再到交互。刚开始觉得不就是写几个标签嘛，真动手才发现问题一个接一个。

布局用的是Flexbox和Grid混搭。导航栏用Flex，水平排列加间距，写起来顺手。产品列表页就麻烦了，三列网格，每个卡片高度不固定，有的标题两行有的三行，用Grid的`align-items: stretch`统一拉伸才对齐。之前试过浮动，清除浮动写到手酸，效果还不好。Grid两行代码解决。说实话，CSS布局这块，选对工具比死磕重要。

响应式设计是另一个坎。媒体查询断点设了三个：768px、1024px、1280px。手机端导航栏要收成汉堡菜单，我一开始用纯CSS的checkbox方案，点击后菜单弹出来，但点链接不自动收起。体验很别扭。后来加了十几行JavaScript，监听链接点击事件，点完就移除checkbox的选中状态。小细节，但用户感受完全不一样。做网页不能只顾“能看”，还得管“好用”。

图片处理也踩了坑。产品图没压缩直接放上去，首页加载要等四五秒。用Chrome的Network面板一看，单张图2.3MB。后来用工具压到200KB以内，整体加载时间降到1.2秒。还加了`loading="lazy"`属性，非首屏图片延迟加载。这些优化手段课堂上讲过，但只有自己测出问题再解决，印象才深。

代码规范方面，我养成了一个习惯：每个区块写注释。``、``。不写注释的话，过两天回头看自己写的div嵌套，像走迷宫。命名用BEM风格，`.card__title--highlight`这种，虽然写起来长，但改样式时定位准确，不会误伤其他元素。

调试过程中发现一个有意思的现象：同一个页面在Chrome里正常，在Firefox里某个按钮偏了3像素。查了半天是默认的`button`内边距差异。最后统一加了`padding: 0`重置。浏览器兼容性不是理论，是真实存在的坑。每次写完一个页面，至少在两个浏览器里过一遍，这个时间不能省。

实训最后一天做验收演示。老师打开我的首页，扫了一眼说：“间距舒服，字体层级清楚。”然后点开控制台，看有没有报错。干净。那一刻觉得前面熬的夜没白费。网页制作这件事，外行看热闹，内行看控制台。代码有没有冗余、资源有没有404、语义化标签用没用对，打开开发者工具一目了然。

回头看这一个月，最大的收获不是学会了某个CSS属性，而是建立了一套工作流程：先画结构再写样式，写完就测，测完就优化。遇到问题先查文档，再搜社区，最后才问人。这套流程比任何单个知识点都值钱。下次再做项目，至少不会在字符集这种低级问题上卡半小时了。

本文地址：http://www.79wt.cn/news/034d1099955.html