简介面向高校Web网页设计与制作课程期末/期中考试的一份完整作品包适合刚接触网页设计的初学者参考与复用。作品以“诗词歌赋人生百味”为主题整合了导航栏、鼠标悬停、弹窗提示、登录验证、收藏下载、搜索交互等功能三个HTML页面主页面、联系我们、我的登录通过导航栏串联配合JavaScript脚本实现动态交互效果。压缩包共21个文件包含3个HTML、1个JS、12张PNG、1张JPG及4份TXT完整代码文档整套素材与源码齐全包体仅214KB打开即可预览运行。该项目在期末制作环节表现优异作者课程成绩达94.5分读者既能直接作为作业模板套用也可对照TXT源码逐段理解网页交互实现思路目前已有10790人浏览学习适合快速搭建自己的期末作品。1. 为什么满分期末网页作品拼的是交互完整度web网页设计与制作期末作品的评分逻辑里最容易拉开分数差距的不是画面多华丽而是交互闭环是否完整。这份“诗词歌赋 人生百味”项目就是一个典型案例纯 HTML、CSS、原生 JavaScript 完成导航栏、搜索弹窗、登录验证、收藏下载复制、多页面跳转和扫码联系课程考核点覆盖大部分且每个功能都做得“能被当场演示”。作者在本科《web网页设计与制作》课程中总成绩 94.5本项目在期末 65% 占比中接近满分。对备考或初学 web 网页设计者来说这是一套可以直接复用的完整答案。对常年在框架里依赖脚手架的开发者也值得拆一遍——看一个静态站点怎么把事件监听、弹窗顺序和页面间路由拼成闭环。下面按导航结构、登录流程、页面跳转、素材组织四部分展开每一步都交代参数含义和常见坑位。2. 导航栏骨架与搜索框事件绑定导航栏是评委视线停留最长的地方也是页面里“第一屏”信息密度最高的模块。原项目把它做成左中右三段式左侧是 logo 与站名中间是五个菜单右侧是搜索输入框和按钮。下面的结构几乎可以 1:1 复刻到其他主题的期末作品里改文本内容就能换皮。2.1 三栏式头部logo、菜单、搜索框的 HTML 结构header div classnav-left img src诗词歌赋.png alt诗词歌赋 logo classnav-logo span classsite-name诗词歌赋 人生百味/span /div nav classnav-center a href诗词歌赋 人生百味.html classmenu-item active首页推荐/a a href# classmenu-item idworksLink作品大全/a a href# classmenu-item idauthorLink作者合集/a a href联系我们.html classmenu-item联系我们/a a href我的登陆.html classmenu-item我的登录/a /nav div classnav-right input typetext classsearch-input placeholder诗词或作者 maxlength30 button classsearch-btn idsearchBtn搜索/button /div /header这里有三个细节值得注意。第一个是 placeholder 设为“诗词或作者”与题目要求完全一致它不是数据库索引而是给用户一个输入预期。第二个是 maxlength30限制输入字符上限避免演示时一长串文本把弹窗排版撑乱。第三个是“作品大全”和“作者合集”这两个菜单先写成 #再通过 JS 绑定点击行为这是期末作品里很稳的兜底策略——哪怕外部链接不可用也不会让现场 404 丢分。2.2 悬停动效与菜单高亮的 CSS 写法header { display: flex; align-items: center; justify-content: space-between; height: 68px; padding: 0 24px; background: linear-gradient(135deg, #3e2c6e, #7b5ea7); position: sticky; top: 0; z-index: 100; } .nav-center { display: flex; gap: 8px; } .menu-item { color: #f2edf8; font-size: 15px; text-decoration: none; padding: 8px 14px; border-radius: 4px; transition: background 0.25s ease, transform 0.25s ease; } .menu-item:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } .menu-item.active { background: rgba(255, 255, 255, 0.25); font-weight: 600; }transition 同时监听 background 和 transform鼠标悬停时背景在 0.25 秒内从透明变为半透明菜单项同时向上浮起 2px配合 box-shadow 形成轻微的“浮起感”。position: sticky 在这里替代 fixed 很合适——它让导航栏滚动时固定在顶部又不脱离文档流省掉了给 body 补 padding-top 的额外操作。“作品大全”和“作者合集”这两个菜单如果没有真实落地页我一般会先不让它跳走而是绑一个明确提示document.getElementById(worksLink).addEventListener(click, function (e) { e.preventDefault(); alert(作品大全页面建设中敬请期待); });e.preventDefault() 阻断锚点默认跳转再用 alert 给评审一个明确回应。这个模式在期末答辩里几乎必被问到“为什么有的菜单能跳有的不能”。2.3 搜索按钮的点击回调与输入兜底document.getElementById(searchBtn).addEventListener(click, function () { var input document.querySelector(.search-input); var keyword input.value.trim(); if (keyword ) { alert(请输入要查找的诗词或作者); return; } alert(正在搜索 keyword); });逻辑说明trim() 去掉首尾空格再做空值判断。如果输入内容包含