简介这是一套以“大鱼海棠”为主题的网页期末作业完整源码包面向需要提交 HTML5 响应式网站作业的高校学生也适合初学者临摹页面布局与交互。项目采用 divcssjs 的常规前端结构共 215 个文件、约 23.62MB包含 10 个 html 页面、9 个 css 样式表、12 个 js 脚本以及 160 张 png/jpg 图片素材另有 less 预编译文件、字体图标与少量动画库配置分别承担主题视觉、响应式布局和页面动效。作者按 Dreamweaver 的建站习惯对文件夹和代码书写做了整理目录按页面和资源分类便于对照学习、局部替换或作为课程设计底稿。压缩包内附项目配置与字体等辅助文件打开即可直接预览整套页面效果适合期末检查前快速梳理页面跳转与样式分工。目前已有 8070 人学习适合希望快速获得结构规范、视觉完整的期末网站范例并进一步巩固前端基础的学生使用。1. 网页期末作业选“大鱼海棠”主题HTMLCSSJS 怎么分工最合理网页期末作业最怕的不是功能少而是在答辩时被问“这个效果是怎么实现的”答不上来。用“大鱼海棠”做主题单页站恰好把前端三件套各用一遍HTML负责内容语义CSS负责国风质感JS负责交互反馈。不引框架、不碰构建工具一个浏览器加一个编辑器就能跑能应付“必须使用原生HTML/CSS/JS”的课程要求也容易被追问时现场演示。下面的方案按常见检查流程排先搭结构再调样式最后补交互每一步都给出能直接复制运行的代码、参数说明和失败排查点。整套做下来代码量控制在几百行内讲得完也守得住。2. 页面骨架与整体布局把“大鱼海棠”拆成可实现的网页模块做网页之前先回答一个问题不依赖任何框架单纯用 HTMLCSSJS 能稳定呈现这个主题的哪些视觉元素答案通常落在四个模块上大字标题首屏、电影故事介绍、人物卡片、场景轮播。这四个模块对应了期末作业常见评分点里的“结构完整、样式丰富、交互合理”。2.1 先定页面层级再写 HTML 代码“大鱼海棠”的视觉印象集中在暗色夜空、红色主调、金色点缀、大海与土楼。把印象转成页面层级时我会用如下顺序排列hero 首屏大标题、副标题、漂浮大鱼动画story 章节电影设定文案配背景图characters 章节椿、湫、鲲三张人物卡片带悬浮效果gallery 章节场景轮播三张图自动播放footer 页脚署名和课程信息顺序确定后HTML 只需要撑出骨架样式和交互全部通过 class 挂钩。这样后期改样式不用动结构改结构也不会弄坏 JS 选择器。2.2 先写语义化 HTML 骨架再考虑样式下面这份 HTML 是整站的内容骨架省略了图片资源和具体文案只保留结构关系header classsite-header idsiteNav div classheader-inner a href#hero classlogo大鱼海棠/a nav classnav-menu a href#story电影介绍/a a href#characters人物/a a href#gallery场景/a /nav /div /header main section idhero classhero h1 classhero-title大鱼海棠/h1 p classhero-subtitle所有活着的人类都是海里一条巨大的鱼/p div classhero-fish aria-hiddentrue/div /section section idstory classstory h2故事与世界观/h2 p这里填写电影剧情设定的两到三句话期末作业中这段文字也是考察点建议自己组织语言后再放上去。/p /section section idcharacters classcharacters h2主要人物/h2 div classcard-list idcardList article classcard>:root { --bg-deep: #0e0b14; /* 页面底色夜空般的深紫黑 */ --bg-section: #151021; /* 区块底色比底色略亮拉开层次 */ --red-main: #8d2a24; /* 主红标题强调、边框、按钮 */ --gold-accent: #d9a86c; /* 金色分割线、hover 高亮 */ --text-main: #f0e6d6; /* 正文米白避免纯白刺眼 */ --text-dim: #9a8f86; /* 弱化文字注释、辅助信息 */ }为什么不直接在所有规则里写色值因为期末作业再简单也要考虑可维护性。答辩时如果被问“想整体调亮或调暗怎么办”直接改--bg-deep和--bg-section两个变量即可其他规则自动生效。表格里每个变量的职责在注释中已经写明这本身就是代码规范的一部分。布局上建议给main里的 section 统一最大宽度和水平内边距main section { max-width: 1080px; margin: 0 auto; padding: 60px 24px; }加上这段之后所有章节在不同宽度屏幕下都能保持居中且左右留白后续写样式时不需要每节重复设置宽度。对期末作业这种规模的项目够用了。3. 仿国风质感的 CSS 细节字体渐变、伪类选择器、鼠标移入和关键帧动画“大鱼海棠”题材的网页最容易出彩的地方在标题文字和卡片交互。这一章只做一件事把视觉质感堆在 CSS 层不需要 JS 参与。CSS 能做好的交互就不要交给 JS这是减少 bug 的第一原则。3.1 标题文字做字体渐变background-clip 的用法大字标题如果只是白色粗体撑不起“大鱼海棠”五个字的气场。常见做法是给文字加一个从米金到暗红的渐变代码很简洁.hero-title { font-size: clamp(2.6rem, 8vw, 5rem); font-weight: 700; letter-spacing: 0.15em; background: linear-gradient(180deg, #f5d0a9 0%, #e8b07d 45%, #a33a2e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }这段样式的核心是background-clip: text。它让渐变背景按照文字形状被裁剪再把文字颜色设为transparent视觉上就出现渐变字效果。注意必须同时保留-webkit-background-clip前缀部分基于 Chromium 的浏览器虽然也支持标准属性但实际渲染中仍然存在需要前缀的场景。失败排查点如果标题变成完全透明或整块色块先确认两件事——color: transparent是否被后面的规则覆盖background-clip: text是否被写进了错误的简写顺序里。把渐变色单独抽出来放到 background 属性上能明显降低排查难度。3.2 伪类选择器与鼠标移入事件卡片悬浮效果很多搜索流量指向“css 鼠标移入事件”和“css伪类选择器怎么用”这里做一个明确区分鼠标移入的默认样式反馈用 CSS 的:hover伪类选择器就够了只有需要在移入时改变 DOM 结构或联动其他元素才考虑 JS 事件。给人物卡片加悬浮反馈思路是两层组合默认状态下设置过渡hover状态下修改transform和边框颜色.card { background: var(--bg-section); border: 1px solid rgba(217, 168, 108, 0.25); border-radius: 12px; padding: 24px; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-6px) scale(1.02); border-color: var(--gold-accent); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); }transition 写在:hover里是常见错误。写在默认状态里移入和移出两种方向都有过渡动画写在:hover里移出时会瞬间弹回观感突兀。transform这里只做位移和缩放两个维度位移让卡片有“浮起”感缩放不要超过 1.05否则边框会显得粗糙。伪类选择器还可以用在排列上。三张人物卡片如果要在不同数量时保持间距均匀:not(:last-child)比手写 margin 更省心.card-list { display: flex; gap: 24px; } .card-list .card:not(:last-child) { margin-bottom: 0; } media (max-width: 720px) { .card-list { flex-direction: column; } }这里:not(:last-child)用于 PC 端横向排列时避免给最后一张卡加多余间距移动端切纵向排列后间距由 flex 的gap统一负责。用一个伪类就省掉三个 margin 冗余声明。3.3 关键帧动画让“鲲”游起来transform 优先原则首屏需要一个能让人一眼记住的动效。“大鱼”游过夜空是主题页的标配实现方式不需要图片素材一个渐变圆角块加关键帧动画即可.hero-fish { width: 120px; height: 60px; background: radial-gradient(ellipse at 30% 40%, #d9a86c, #8d2a24); border-radius: 60% 60% 40% 40%; animation: swim 12s ease-in-out infinite alternate; } keyframes swim { from { transform: translateX(-10vw) translateY(0) scale(0.9); opacity: 0.6; } to { transform: translateX(90vw) translateY(-20px) scale(1.1); opacity: 1; } }动画参数说明12s是单个动画周期时长“大鱼”游速要慢8 到 14 秒之间比较符合主题的高空质感。infinite alternate让动画来回游而不是重置到起点后跳变。ease-in-out让首尾速度放缓中间匀速模拟滑行感。性能上的关键点请记住动画只写transform和opacity不要写left、top、margin。transform可以走独立合成层浏览器不需要反复计算布局这在低配笔记本上跑轮播和游鱼动画时差距非常明显。期末答辩时能说出这一条已经比大多数直接把动画写在left上的同学领先一个维度。下表是 transition 与 animation 的适用场景对比类型触发条件循环能力典型场景transition属性变化时被动触发不能循环卡片 hover、按钮反馈、导航背景变化animation页面加载后主动执行可循环、可交替大鱼游动、轮播淡入、背景缓慢漂浮4. 让页面动起来JS 轮播组件、返回顶部算法与字符串过滤CSS 做完质感JS 负责三个交互滚动监听导航背景、场景轮播、按关键词过滤人物卡片。这三个点分别命中“导航跟随”“轮播图”“搜索过滤”是期末作业里最常被追问的交互也是 JS 这门课的成绩分水岭。4.1 滚动监听导航栏scrollY 与 classList 的配合导航栏默认透明页面下滑超过 60px 后变成带底色这是单页站最常见的细节处理const siteNav document.getElementById(siteNav); window.addEventListener(scroll, () { siteNav.classList.toggle(nav-scrolled, window.scrollY 60); }, { passive: true });classList.toggle的第二个参数是布尔值为 true 时加 class为 false 时移除。用这个写法比先if判断再用add/remove更简洁而且滚动事件里不会写多余逻辑。passive: true告诉浏览器这个监听器不会调用preventDefault滚动性能不会因为多余的拦截检查而下降。配套 CSS 只需要给.nav-scrolled增加背景色和阴影.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; transition: background 0.3s ease; } .site-header.nav-scrolled { background: rgba(14, 11, 20, 0.92); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }注意header设了position: fixed页面内容会被盖住所以给main的第一个区块加一个顶部内边距比如.hero { padding-top: 120px; }否则首屏标题会被导航遮挡。4.2 不依赖插件的轮播组件索引取余与 translateX轮播是期末作业的重头戏。这里实现一个纯 JS 版本三张场景图自动轮播支持左右按钮切换div classcarousel-viewport div classcarousel-track div classslide/div div classslide/div div classslide/div /div /div button classcarousel-btn prev上一张/button button classcarousel-btn next下一张/buttonCSS 核心是让 track 内的每张 slide 宽度占满视口且不压缩.carousel-viewport { overflow: hidden; } .carousel-track { display: flex; transition: transform 0.4s ease; } .slide { min-width: 100%; height: 360px; background-size: cover; background-position: center; }JS 控制索引和位移const track document.querySelector(.carousel-track); const slides document.querySelectorAll(.slide); const total slides.length; let index 0; let timer null; function goTo(i) { index (i total) % total; track.style.transform translateX(-${index * (100 / total)}%); } document.querySelector(.carousel-btn.next).addEventListener(click, () { goTo(index 1); restartAutoPlay(); }); document.querySelector(.carousel-btn.prev).addEventListener(click, () { goTo(index - 1); restartAutoPlay(); }); function restartAutoPlay() { clearInterval(timer); timer setInterval(() { goTo(index 1); }, 4000); } restartAutoPlay();参数说明index (i total) % total是关键技术点。当 index 等于 total 时取余回到 0当 index 等于 -1 时取余回到 total - 1循环边界无需写 if 分支。translateX的百分比是相对于 track 自身宽度而不是视口宽度track 被三张 slide 撑开后自身宽度等于三个视口宽所以要移动一个视口宽需要移动100 / total个百分比的 track 宽度。写成index * (100 / total)而不是index * 100这个细节明白的话任意张数的轮播都能套用。4.3 一键返回顶部的两种实现与“算法”边界“html一键返回顶部算法”这类搜索词背后的需求其实很简单点按钮平滑回到顶部且按钮在页面顶部时隐藏。先给一个现代浏览器的标准写法const backToTop document.getElementById(backToTop); backToTop.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); }); window.addEventListener(scroll, () { backToTop.classList.toggle(active, window.scrollY 400); }, { passive: true });window.scrollTo配合behavior: smooth是浏览器原生平滑滚动方案代码最少不用自己管理动画帧。但注意部分旧环境不支持 smooth这时可以用 requestAnimationFrame 手动实现一个带缓动的版本function scrollToTopSmooth(duration 400) { const startY window.scrollY; const startTime performance.now(); if (startY 0) return; function step(now) { const progress Math.min((now - startTime) / duration, 1); const eased 1 - Math.pow(1 - progress, 3); window.scrollTo(0, Math.round(startY * (1 - eased))); if (progress 1) { requestAnimationFrame(step); } } requestAnimationFrame(step); }1 - Math.pow(1 - progress, 3)是 easeOutCubic 缓动函数前快后慢符合“快速回到顶部”的直觉。Math.min(..., 1)保证进度不超过 1避免最后一帧回弹。duration 400是 400 毫秒超过这个时长会显得拖动感过强。实际使用时优先用原生scrollTo手动版本作为答辩时“我能讲清楚动画帧机制”的加分项。4.4 用 JS 判断字符串是否包含给人物列表做过滤热词“js判断字符串是否包含”落到这个题目里的对应场景是搜索框输入关键词人物卡片列表实时过滤。String.prototype.includes是这里的主角const searchInput document.getElementById(searchInput); const cards document.querySelectorAll(.card); searchInput.addEventListener(input, () { const keyword searchInput.value.trim().toLowerCase(); cards.forEach((card) { const name card.dataset.name.toLowerCase(); card.hidden !name.includes(keyword); }); });逻辑说明trim()去掉输入两端的空格避免用户多敲一个空格导致匹配失败toLowerCase()统一大小写让“chun”和“Chun”都能匹配includes返回布尔值作为 hidden 属性的赋值可直接生效。用card.hidden true而不是card.style.display none是因为 hidden 是 HTML 标准属性语义更清晰且优先级不会被外部样式干扰。这里要提醒一个细节includes是区分大小写的所以两侧都要先toLowerCase()中文内容调用toLowerCase()不影响原值但如果人物卡片里有英文拼音或外文名这行就必不可少。5. 收尾检查与答辩提分兼容性细节、动画帧验证和无障碍降级代码写完不等于作业能交。最后这一章给出三个能直接落地的收尾动作分别对应兼容性、性能和可访问性。5.1 三个必改的兼容性细节用表格总结期末作业里最常见的三个“本地跑正常、换机器就崩”的问题问题现象改法background-clip: text未加前缀标题文字透明或显示整块渐变矩形保留-webkit-background-clip: text再写标准属性scroll-behavior: smooth被忽略点击锚点瞬间跳转在html上声明或用 JS 的scrollTo({behavior: smooth})兜底图片撑破卡片卡片尺寸被图片拉伸图片用object-fit: cover或改用背景图加background-size: cover第一条已经在 3.1 提过这里是交作业前必须复查的清单化版本。第二条“被忽略”通常不是浏览器不支持而是平滑滚动需要写在html元素上而不是bodyhtml { scroll-behavior: smooth; }5.2 在浏览器开发者工具里验证动画流畅度期末作业被追问“你确定动画不卡吗”时最好的回答是用事实说话。常见做法是在页面按 F12 打开开发者工具切换到 Performance 面板点击录制后操作轮播和滚动几秒后停止录制查看红框标出的帧耗时段落。一帧超过 16.7ms 意味着低于 60 FPS需要检查是否有引起重排的属性变更。用代码验证也是可行的。在轮播的 goTo 函数中加入一段临时耗时统计const start performance.now(); track.style.transform translateX(-${index * (100 / total)}%); console.log(切换耗时:, performance.now() - start, ms);这段临时代码只用于自查测量的是从设置 transform 到 JS 执行完同步操作的时间不包括渲染管线完整耗时。它的意义在于排查 JS 侧是否存在明显瓶颈真正的渲染流畅度仍以 Performance 面板为准。5.3 一个加分收尾prefers-reduced-motion 降级动画当用户系统开启了“减少动态效果”时动画应该被降级。在样式表末尾加一段媒体查询一行代码兼容所有动画media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }这段代码将动画和过渡时长压到接近 0用户不会看到平移和闪烁。0.01ms 而不是 0是为了避免部分浏览器将 0 判定为无效值而回退到默认时长。把它配合前面讲到的transform合成层优化一起放进答辩词里就是两个能主动说出口的技术细节。轮播、返回顶部和卡片悬浮的交互齐全渐变标题和游鱼动画各有明确实现原理这套“大鱼海棠”单页作业就可以进入演示了。本文还有配套的精品资源点击获取