网页制作实训报告范文

这次实训我做的网页是一个“校园二手书交易”的静态网页，一共五个页面：首页、制作书籍列表、实训书籍详情、报告发布信息、范文联系方式。网页老师给的制作题目里原本有“个人博客”和“企业官网”两个选项，我选了二手书，实训因为自己平时就在学校论坛上收教材，报告知道这个场景真实需要什么。范文

先说说工具。网页VS Code写代码，制作Chrome调试，实训没用框架，报告纯手写HTML和CSS。范文有人可能觉得2024年了还手写这些有点笨，但我的想法是：连盒子模型都没摸清楚就去套Bootstrap，出了问题根本不知道从哪改。实训第一天我花了两个小时只做了一件事——把首页的导航栏用flex布局调出来。中间遇到一个坑：给nav设了display:flex之后，子元素li的圆点还在。查了一下才知道list-style:none得写在li上，不是ul上。这种细节看教程视频永远记不住，自己踩一次就忘不了。

页面结构上，我用<header>、<main>、<footer>做了语义化分区。首页顶部是logo加导航，中间一个横幅区域放了一句“让旧书找到新主人”，下面用grid排了三列卡片，分别展示“最新上架”“热门求购”“交易须知”。这里grid比flex好用，因为三列宽度需要一致，grid-template-columns: repeat(3, 1fr)一行搞定，不用给每个卡片单独算百分比。

书籍列表页我用了table布局。说实话现在用table做列表的人不多了，但我觉得书籍信息天然适合表格——书名、作者、原价、售价、品相，五列对齐看起来最清楚。CSS上给tr:nth-child(even)加了浅灰背景，鼠标悬停时整行变蓝，这个交互成本很低但体验提升明显。表格里每本书的“查看详情”链接指向对应的详情页，我一共做了三本样例书的数据，分别是《数据结构（C语言版）》《高等数学上册》和《大学英语四级真题》。选这三本是因为它们在我宿舍书架上都能找到，拍封面图方便。

详情页是这次实训里花时间最多的。左侧放书封面，右侧放信息表和“联系卖家”按钮。封面图我用了object-fit: cover，不然不同尺寸的图片会把布局撑乱。信息表里有一栏“卖家留言”，我写的是“笔记较多，介意勿拍”，这句是从真实交易帖里抄来的。按钮的hover效果做了背景色渐变，从#4a90d9过渡到#357abd，过渡时间0.3秒。这个数值是试出来的，0.1秒太快像闪一下，0.5秒又显得拖沓。

发布信息页是个纯表单：书名、作者、原价、售价、品相下拉框、上传图片、留言。这里没做后端，提交按钮点下去只会刷新页面。但我给每个输入框加了required属性，空着提交浏览器会弹提示。另外用pattern限制了售价只能输入数字，虽然正则写得比较粗糙，但至少能拦住“十块钱”这种输入。

整个过程里最烦的是响应式。我一开始没打算做，觉得电脑上看着没问题就行。后来用手机打开本地文件一看，导航栏挤成一团，表格横向溢出。只好补了一段媒体查询：屏幕宽度小于768px时，导航改成纵向排列，表格隐藏“原价”和“品相”两列，卡片从三列变一列。改完之后在手机上看确实顺眼多了，但离“好用”还差得远。

交作业前我让室友点了一遍，他提了两个问题：一是详情页的“联系卖家”按钮点了没反应，因为href写的是#；二是首页横幅那句文案字号太小，手机上看不清。第一个问题我改成了跳转到联系方式页面，第二个把字号从16px调到了20px。这种反馈比我自己盯着屏幕看半小时都管用。

如果重做一次，我会先把所有页面的公共部分（导航、页脚）抽出来用JS动态加载，而不是每个HTML文件复制一遍。这次五个页面改导航栏文字，我改了五遍，第三遍的时候就后悔了。另外图片懒加载也没做，详情页那三张封面图虽然不大，但真放到服务器上，用户流量还是能省则省。

写代码这件事，看十遍不如写一遍，写十遍不如改一遍。这次实训最大的收获不是学会了flex和grid，而是知道了自己哪块最弱——响应式布局和代码复用。下次做项目，这两个地方得提前规划，不能等出了问题再补。

(责任编辑：百科)