简介一套以《大鱼海棠》为主题的网页期末作业包含 10 个页面面向需要提交学校网站课程设计、静态网页或前端基础作业的学生。项目从文件夹规划到代码书写均按 Dreamweaver 常用规范整理css、js、images 等目录区分清晰并额外加入 404 错误页面整体结构完整、布局统一适合直接参考或二次修改。压缩包为 RAR 格式共 215 个文件整体约 23.62 MB。其中 HTML 页面、CSS 样式表、JavaScript 脚本各有 10、9、12 个图片素材以 89 个 PNG 和 71 个 JPG 为主同时附带 Less 源文件、字体图标、Bootstrap 与 jQuery 插件分别负责页面结构、视觉表现、交互逻辑和响应式组件。已有 8070 人学习下载。拿到手后可以通过分析目录划分和代码注释快速理解静态网站的标准组织方式也能借鉴其中导航菜单、轮播、动画和字体库的引入方法把整套目录骨架与命名规范迁移到自己的期末作业中减少从零起步的搭建成本。1. 为什么一份10页的《大鱼海棠》作业要背上六个CSS把压缩包解压bootstrap.css、animate.css、jquery.mmenu.all.css、slick.css、font-awesome.min.css之外还躺着photo.css、error404.css、widget.css这些一看就是手工加的样式。这个组合很典型Bootstrap 负责栅格和基础组件slick 负责轮播mmenu 负责移动端抽屉菜单animate.css 做滚动动效font-awesome 提供图标字体剩下几个自定义 CSS 才是作业的“原创分”。学校检查这类静态网页作业第一眼看的是文件结构和代码规整度第二眼看的是交互细节。这篇文章就把这份 10 页作业的依赖关系、引用顺序、关键函数写法和提交前要过的检查项拆开讲一遍适合正在补作业的学生也适合没少给这类项目做“代上线”但不想背锅的工程师。2. 页面骨架与依赖加载顺序先让样式不打架2.1 文件夹分工作业检查第一步先看这里静态网页作业的文件夹结构不需要多高级但要让人一眼看得懂。常见做法是根目录放 10 个 HTML 页面按页面角色命名css/目录下把所有样式按用途拆开js/目录存放插件和自定义脚本images/按页面或模块建子目录fonts/专门放 font-awesome 的字体文件。big-fish/ ├── index.html ├── photo.html ├── about.html ├── culture.html ├── music.html ├── ... ├── 404.html ├── css/ │ ├── bootstrap.css │ ├── animate.css │ ├── style.css │ ├── photo.css │ ├── error404.css │ ├── slick.css │ └── widget.css ├── js/ │ ├── jquery.min.js │ ├── bootstrap.min.js │ ├── jquery.mmenu.all.js │ ├── slick.min.js │ └── main.js ├── fonts/ │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.woff2 │ ├── fontawesome-webfont.woff │ └── fontawesome-webfont.ttf └── images/ ├── hero/ ├── gallery/ └── news/HTML 页面全部平铺在根目录而不是塞进pages/子目录这样hrefphoto.html、hrefabout.html就能直接写相对路径评审老师双击就能打开不需要起本地服务。文件名用连字符小写不要用中文命名也不要混用拼音缩写否则传到服务器上很容易出现大小写敏感导致的 404。字体文件是 font-awesome 最容易漏掉的一环只保留fontawesome-webfont.eot会让现代浏览器图标全部变成方块因为font-face里通常同时声明了 eot、woff2、woff、ttf 四种格式浏览器会按顺序选第一个能用的。2.2 页面头部的CSS依赖排序CSS 的加载顺序直接决定覆盖关系。这份作业里style.css覆盖 Bootstrap 默认值所以必须放在 Bootstrap 后面widget.css管理侧栏组件和 Bootstrap 的 widget 类名没有冲突但为了统一还是放在style.css之后。参考顺序!doctype html html langzh-CN head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title大鱼海棠 - 首页/title !-- 1. 框架与第三方动画 -- link relstylesheet hrefcss/bootstrap.css link relstylesheet hrefcss/animate.css !-- 2. 插件样式 -- link relstylesheet hrefcss/slick.css link relstylesheet hrefcss/jquery.mmenu.all.css !-- 3. 图标字体 -- link relstylesheet hrefcss/font-awesome.min.css !-- 4. 自定义业务样式放在最后 -- link relstylesheet hrefcss/style.css link relstylesheet hrefcss/widget.css link relstylesheet hrefcss/photo.css /head第三方的动画和插件样式放在自定义样式之前是因为style.css里可能需要微调.slick-dots li button的颜色或.mm-menu的边框阴影CSS 后面的规则会覆盖前面的规则。一个很容易踩的坑是把animate.css放在style.css后面然后在style.css里用animation-delay调整入场顺序结果有些元素的animation简写属性被重置成默认值动画就消失了。2.3 jQuery插件的正确引入位置与初始化时机CSS 放在head里JavaScript 放在body底部这是因为 jQuery 插件初始化时要操作 DOM脚本放在后面能确保$(document).ready()执行时节点已经存在。顺序是 jQuery → Bootstrap → mmenu → slick → 自定义main.js插件之间互相依赖就会报错。body !-- 页面主体 -- script srcjs/jquery.min.js/script script srcjs/bootstrap.min.js/script script srcjs/jquery.mmenu.all.js/script script srcjs/slick.min.js/script script srcjs/main.js/script /body所有初始化脚本统一收敛到main.js不要在页面里到处散落script标签。jquery.mmenu.all.js需要 jQuery 1.7 以上学校作业常用的 jQuery 3.x 没问题slick 同样依赖 jQuery两个插件都要求$(function() { ... })包裹。初始化完成后记得检查浏览器控制台有没有$ is not defined或者$(...).slick is not a function前者说明 jQuery 没加载或加载顺序错了后者说明 slick 的 JS 文件路径不对。3. 首页轮播、相册与字体图标三个高评分的静态交互3.1 用slick实现首页主视觉轮播首页主视觉是整份作业的评分重点。用 slick 做轮播比手写 setTimeout 切换要稳得多内置了自动播放、圆点导航、无限循环和触摸滑动不需要额外实现鼠标拖拽。HTML 结构里需要一个容器套若干个子元素section classhero-slick div classhero-slide stylebackground-image: url(images/hero/big-fish-1.jpg); h2所有活着的人类都是海里一条巨大的鱼/h2 a hrefabout.html classbtn btn-default了解故事/a /div div classhero-slide stylebackground-image: url(images/hero/big-fish-2.jpg); h2从出生开始他们就是一条条大鱼/h2 /div /section对应的初始化代码放在main.js里$(function () { $(.hero-slick).slick({ autoplay: true, autoplaySpeed: 3500, dots: true, arrows: false, fade: true, pauseOnHover: true, speed: 800 }); });autoplay和autoplaySpeed控制是否自动播放和切换间隔3500 毫秒比较适合展示型首页。fade: true使用淡入淡出过渡适合大图背景如果要横向滑动就删掉这一行。dots: true会在底部生成圆点导航小圆点的样式默认是灰色作业里通常会在style.css中覆盖.slick-dots li button的背景色改成带主题感的暗红色。如果只有两张轮播图还开了arrows: false建议保留dots否则用户会误以为页面静止了。轮播图自身高度建议在style.css里给.hero-slick设一个max-height并用background-size: cover让图片填满容器不然不同屏幕下首屏高度不一致。3.2 相册页photo.css的栅格布局相册页是这个项目里最需要自己写样式的地方。photo.css存在的意义就是别让所有图片都用 Bootstrap 的col-md-3一排排傻站要么做瀑布流要么做带悬停遮罩的网格。比较省事的做法是直接上 CSS Griddiv classgallery-grid a hrefimages/gallery/01.jpg classgallery-item img srcimages/gallery/01.jpg alt椿与湫 span classgallery-title椿与湫/span /a a hrefimages/gallery/02.jpg classgallery-item img srcimages/gallery/02.jpg alt大鱼海棠 /a /div/* photo.css */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .gallery-item { position: relative; overflow: hidden; border-radius: 6px; } .gallery-item img { width: 100%; min-height: 180px; object-fit: cover; transition: transform 0.4s ease; } .gallery-item:hover img { transform: scale(1.05); } .gallery-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 12px 8px; color: #fff; font-size: 14px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); opacity: 0; transition: opacity 0.3s ease; } .gallery-item:hover .gallery-title { opacity: 1; }这段样式对搜索引擎和检查代码的老师都很友好:hover伪类触发图片轻微放大和标题浮现视觉效果接近完成度很高的站点。object-fit: cover能保证宽高比不一致的图片不会拉伸变形这是很多新手最容易忽略的属性。IE11 不支持grid-template-columns里的auto-fill但学校作业基本只看 Chrome所以这个问题不用太纠结。3.3 Font Awesome图标与字体文件路径font-awesome.min.css是纯字体图标方案它的图标不是图片而是通过font-face加载字体文件渲染出来的字符。这也是fontawesome-webfont.eot必须和 CSS 保持正确相对路径的原因。查看font-awesome.min.css开头的font-facefont-face { font-family: FontAwesome; src: url(../fonts/fontawesome-webfont.eot?v4.7.0); src: url(../fonts/fontawesome-webfont.eot?#iefixv4.7.0) format(embedded-opentype), url(../fonts/fontawesome-webfont.woff2?v4.7.0) format(woff2), url(../fonts/fontawesome-webfont.woff?v4.7.0) format(woff), url(../fonts/fontawesome-webfont.ttf?v4.7.0) format(truetype); }如果你的压缩包里只有 eot 没有 woff2 和 ttf建议从 FontAwesome 4.7 的官方包补全另外三个字体文件。使用时直接在 HTML 中写pi classfa fa-heart/i 北冥有鱼/p pi classfa fa-film/i 国产动画/p pi classfa fa-music/i 印象曲/pfa是基本类名fa-heart、fa-film、fa-music分别对应不同字形。检查方法很简单打开页面如果看到一个小方块说明字体文件没加载或路径不对优先看浏览器 Network 面板里字体文件请求是否 404。4. 移动端菜单与404兜底响应式作业必须有的两个细节4.1 jquery.mmenu给移动端导航加分学校作业通常只检查 PC 端但“响应式”这三个字写在题目里就能拉开差距。jquery.mmenu.all.css对应的jquery.mmenu.all.js提供一个移动端抽屉菜单小屏下导航缩成一个汉堡按钮点击后从左或右侧滑出菜单面板。这个插件的初始化需要一段导航结构nav idmobile-menu ul lia hrefindex.html首页/a/li lia hrefphoto.html剧照相册/a/li lia hrefabout.html故事简介/a/li lia hrefculture.html文化考据/a/li /ul /nav然后在main.js里初始化$(function () { $(#mobile-menu).mmenu({ slidingSubmenus: true, navbar: { title: 大鱼海棠 }, extensions: [theme-dark] }); });slidingSubmenus让子菜单水平滑动这个交互很多人一眼就能注意到。navbar.title会固定在抽屉顶部显示站点名称。extensions: [theme-dark]使用暗色主题和《大鱼海棠》的红黑色调更搭。mmenu 初始化后会把原导航替换成#mm-mobile-menu以及页面左上角自动生成一个汉堡按钮。如果页面里没有自动出现按钮看一下代码结构mmenu 要求html标签不能被手动加mm-js类插件自己会加如果页面里有多个 nav 元素要检查初始化选择器是否写对。另外桌面端隐藏这个抽屉菜单是用 media query 控制的.mm-menu默认只在小屏显示不需要手动display:none。4.2 error404.css的兜底体验10 个页面里专门放一个404.html说明资源包里已经考虑了链接打错的情况。作业中做一个完整 404 页面的不多这页反而容易拿印象分。HTML 写一个居中容器main classerror404-wrap span classerror404-code404/span p classerror404-text这条缝隙恰好容一缕海棠花落进来。/p a classbtn btn-default hrefindex.html回首页/a /mainerror404.css里用 flex 垂直水平居中再给数字做一个抢眼的渐变.error404-wrap { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; } .error404-code { font-size: 6rem; font-weight: 700; background: linear-gradient(135deg, #e05a7f, #7b3b58); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .error404-text { color: #999; margin: 20px 0 28px; }这里用了-webkit-background-clip: text做字体渐变这个写法在 Chrome 和 Edge 下稳定Firefox 也支持。如果遇到渐变不显示确认-webkit-text-fill-color: transparent和background-clip: text同时存在缺一个都会变白字。回首页按钮直接用 Bootstrap 的btn btn-default避免又写一堆自定义样式。4.3 常见布局错位排查响应式作业最常见的四个问题菜单没有汉堡按钮、轮播图在小屏下变形、图片溢出容器、字体图标显示方框。排查顺序建议先看控制台有没有加载错误接着看 Network 面板里 CSS、JS、字体文件的状态码。mmenu 菜单不显示八成是选择器错了或者 mmenu 的 JS 引入顺序在 jQuery 之前轮播图变形看.hero-slick是否有明确高度限制必要时给img加上width: 100%; height: auto;图片溢出容器先检查img的max-width是否设置成100%。这些细节比多写一个页面更能体现规范程度。5. 防“代做”审查的代码规范技巧5.1 文件夹与命名的表面功夫评作业的老师见过太多模板套壳识别代做看的是这些细节所有代码缩进是否一致、注释风格是否统一、有没有残留无用的引用、CSS 类名是不是成套。命名不要在style.css里用div1、box2尽量语义化划分比如.header-nav、.hero-slick、.gallery-item、.widget-news。HTML 页面标题要和文件名对得上photo.html的title不能还是“首页”。同时检查有没有多余的空目录、占位图片、.DS_Store这类系统文件一并清理。5.2 CSS选择器与代码格式规范作业里如果有一行写.gallery-item:hover .gallery-title另一行写.gallery-item .gallery-title:hover这种不一致很容易暴露“复制粘贴”。统一的做法是所有选择器用小写字母类名之间用连字符分隔属性书写和缩进保持一致同一份作业里要么都用单引号要么都用双引号。给一段推荐格式.widget-news { margin-bottom: 24px; padding: 20px; background: #f8f8f8; border-left: 3px solid #e05a7f; } .widget-news .widget-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; }每一条规则之间留一个空行块和块之间也分开。不要使用import加载其他 CSS因为import会阻塞渲染而且 Dreamweaver 的“检查浏览器兼容性”功能会对import报警告。也不用在 HTML 里写大段style统一收进外部样式表。5.3 一套可执行的提交前检查结尾收在一个实用表格上把提交前要过的检查项列清楚同时补上几个页面执行期实用的 JS 小函数比如返回顶部、金额保留两位小数、字符串包含判断。这是作业里“额外加分”的部分代码量小但效果直接// 返回顶部 $(#back-top).on(click, function () { $(html, body).animate({ scrollTop: 0 }, 400); }); // 金额保留两位小数 var total 198.5; console.log(total.toFixed(2)); // 198.50 // 判断当前页面是否包含某个字符串 if (location.pathname.indexOf(photo) ! -1) { $(.gallery-grid).addClass(is-photo-page); }toFixed(2)会返回字符串类型如果后续还要做加法记得用parseFloat()转回数值这是新手最容易踩的类型坑。indexOf判断页面名比正则简单直接但注意indexOf(photo)也会匹配photocopy如果只匹配独立页面用location.pathname.includes(/photo.html)includes是 ES6 方法现代浏览器都认。返回顶部按钮记得只在页面滚动超过一定距离后显示加一行滚动监听$(window).on(scroll, function () { $(#back-top).toggle($(window).scrollTop() 300); });提交前对照这份检查表类名命名风格一致、图片格式统一为 jpg 或 webp、所有页面title不同、动画时长统一在 0.3 秒到 0.8 秒之间、没有重复初始化同一个插件、移动端 375px 宽度下菜单正常弹出。能做到这几点就是一份“表面功夫做足、内部也不露怯”的作业成品。本文还有配套的精品资源点击获取