简介面向大学生网页设计与前端期末大作业的静态网页源码基于原生 HTML、CSS、JavaScript 编写涵盖完整的多页面站点结构可直接运行并作为高分解题模板。包内共有31个文件包含5个 HTML 页面、1个 CSS 样式文件、2个 JS 交互脚本、21张 JPG 图片素材及许可证文件压缩包约30.28MB。站点实际实现了首页、关于我、照片墙、留言板、动漫主题等模块页面涉及导航布局、图文展示、表单校验、日历选择与照片轮播等典型交互留言板页面配合 formCheck.js 完成表单验证Calendar.js 提供日期选择支持图片素材覆盖背景、人物、风景等类别便于直接替换或扩展。附带清晰目录结构适合作为期末作品提交、课程设计参考或前端入门练习已有13801人学习下载是快速完成高质量大作业的实用型资源。1. 为什么原生 HTML/CSS/JS 的静态网页还能拿 95 分这门课的评分逻辑前端大作业交上去之后老师最快淘汰的往往不是技术最差的那批而是页面之间互相割裂、导航点不通、表单提交后没有反馈的“半成品”。这份 static-web-ddl 的期末作业源码能稳定落在 95 分以上靠的不是 Vue、React 这类前端框架而是把原生的 HTML、CSS、JavaScript 完成度做满了五个页面共享同一套 dh.css 视觉体系formCheck.js 做了真实可用的表单校验Calendar.js 提供了日期选择images 目录里的图片按 back、sky、conan、basketball、photo 明确分类。对于 web 前端开发入门阶段的学生来说这恰好踩中了考评表里“结构完整、样式统一、交互有效、代码规范”四条线。下面直接拆这套源码的组织方式和实现细节新手能照着改熟手也能拿来做验收清单。2. 五页站点的信息架构index、AboutMe、PhotoWall、Message、Comic 的分工与导航复用评审看一个大作业花在整体结构上的时间不会超过三分钟。这三分钟里要看的就是点开 index 知道你是谁菜单能走到每个页面每个页面有实际内容而不是占位符。static-web-ddl 的布局思路很适合借鉴五个页面都放在站点根目录index.html 负责身份展示AboutMe.html 讲个人履历PhotoWall.html 做照片墙Message.html 做留言板Comic.html 做动漫收藏。五个页面靠同一套导航串联视觉上是一套功能上有分工页面之间不会互相打架。2.1 页面定位与素材分组拿到一份源码先别急着改代码先把页面和素材的对应关系理清。这套资源的图片都在 images 目录下从文件名就能反推作者的页面规划页面文件页面定位核心模块对应图片分组index.html首页导航Banner 首屏、站点简介、五个入口back0.jpg、back1.jpgAboutMe.html个人履历基本信息、技能列表、兴趣爱好photo1.jpg、basketball1.jpg、basketball2.jpgPhotoWall.html图片展示图片网格、悬停动效、分块布局photo*.jpg、sky1.jpg、sky2.jpg、sky3.jpgMessage.html留言交互留言表单、日期选择、输入校验无内容图走表单逻辑Comic.html兴趣收藏卡片列表、作品封面conan1.jpg、conan2.jpg、conan3.jpg这种划分方式很聪明。首页只做展示和导航把最重的图片内容拆到照片墙和漫画页AboutMe 用少量图片点缀Message 完全不依赖图片。这样每个页面加载的资源比较均衡不会出现某个页面堆了十几张图、另外几个页面空空荡荡的情况。做大学生静态网页设计作业时页面数量不是越多越好而是每一页都要有不可替代的存在理由。2.2 导航栏在五个页面中的复用与当前页标识静态网页没有模板引擎导航栏在五个页面里各复制一份是正常做法。常见的结构是这样的!-- 五个页面共用的导航结构以 index.html 为例 -- header classsite-header div classlogoDDLspanPortfolio/span/div nav classmain-nav ul lia hrefindex.html classactive首页/a/li lia hrefAboutMe.html关于我/a/li lia hrefPhotoWall.html照片墙/a/li lia hrefMessage.html留言板/a/li lia hrefComic.html动漫收藏/a/li /ul /nav /header这里有一个很容易被忽略的细节classactive在每个页面要手动换位置。交作业之前把五个页面逐个点开核对一遍否则老师点进 AboutMe.html 时导航还亮着“首页”第一印象直接扣分。另一个高频坑是相对路径所有页面都在根目录css 和 js 在各自子目录写引用时必须以站点根目录为基准css/dh.css和js/formCheck.js在五个页面里路径保持一致如果为了整理文件专门建了页面子目录路径就要对应改成../css/dh.css很多人栽在这一步。2.3 命名规范本身就是可维护性把 images 里的文件按主题分类命名这个习惯在期末作业里容易被低估。back 开头的做背景sky 开头的做氛围图conan 和 basketball 一看就是两个内容板块。后续换图或者答辩被提问时不需要打开图片一个个看直接按前缀替换。相对比那种1.jpg、2.jpg一路排到底的命名方式这种命名规范能让老师在翻源码时快速建立好感。如果你自己要从零搭一个类似的静态网页项目建议从一开始就按“用途前缀_序号”这个格式命名所有静态资源。3. dh.css 的分层样式体系reset、布局、组件、主题的四段式维护静态网页项目里css 文件是最容易变成垃圾场的。很多学生的 dh.css 从头写到尾全是一堆标签选择器和 id 选择器改一个按钮颜色要找半天。这套资源只有一个 dh.css但内部实际上采用了分层组织的思路这也是它能在有限代码量里撑起五个页面统一观感的关键。3.1 为什么一个样式文件也要分“层”没有引入前端组件库纯手写样式时分层不是为了架构好看而是为了出问题时能快速定位。我一般会把样式分成四层reset 层负责抹平浏览器默认差异layout 层负责页面骨架component 层定义按钮、卡片、导航这类公共部件page 层放各页独有样式。分层之后改布局不会误伤组件改组件不会影响其他页面的独有样式。层级需要解决的问题选择器特征典型声明reset 层浏览器默认样式不一致*、body、amargin、padding、font-familylayout 层宽度、间距、定位基准.container、.site-headerwidth、margin、positioncomponent 层跨页面复用.btn、.card、.main-navbackground、border-radius、box-shadowpage 层单页面独有表现.photo-grid、.banner个别调整与覆盖3.2 骨架代码与维护思路这套项目的 dh.css 常见骨架如下关键在每一段的注释分隔和选择器范围控制/* reset 层 */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: Microsoft YaHei, PingFang SC, sans-serif; line-height: 1.6; color: #333; background: #f7f8fa; } /* layout 层 */ .container { width: min(1200px, 92%); margin: 0 auto; } .site-header { position: fixed; top: 0; z-index: 100; width: 100%; background: rgba(255, 255, 255, 0.92); } .main-nav ul { display: flex; list-style: none; gap: 24px; } /* component 层 */ .btn { display: inline-block; padding: 8px 20px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; } .card { background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); overflow: hidden; }box-sizing: border-box放在 reset 层是因为它影响所有元素的尺寸计算必须最先声明。layout 层的.site-header用了固定定位这时候要给 body 补一个 padding-top高度等于导航栏高度否则页面内容会被导航遮住。component 层的.btn我会刻意把border提前写上方便后续做不同颜色的按钮时只需要覆盖background和border-color不需要新增选择器。3.3 背景图片的调度逻辑images 里 back 开头和 sky 开头的图片在这个场景下最常见的用法是作为 Banner 和模块背景。把大图交给 css 背景而不是img好处是通过background-size: cover自动裁剪不需要手动量图片尺寸。css 文件在 css 目录下所以背景路径要写成../images/开头这一点新手经常写错.banner { background: url(../images/back0.jpg) center center / cover no-repeat; min-height: 420px; display: flex; align-items: center; justify-content: center; }center center表示水平和垂直都居中cover表示等比缩放并铺满容器超出部分裁掉。min-height 而不是 height是为了防止内容增多时图片背景区域被固定高度截断。如果某一页加载感觉偏慢先看这几张背景图的大小一般压缩到 200KB 以内对演示场景就足够了。3.4 响应式断点别贪多很多前端学习路线会把响应式讲得很复杂但对期末大作业来说断点只需要做三档1024px、768px、480px。评分现场多半在教室大屏或老师笔记本上宽度上限不用管重点管住 768px 以下这个档位演示时窗口被拉窄导航换行会非常难看。常见的写法是按桌面优先向下覆盖media (max-width: 768px) { .main-nav ul { flex-direction: column; gap: 8px; } .photo-grid { grid-template-columns: repeat(2, 1fr); } } media (max-width: 480px) { .photo-grid { grid-template-columns: 1fr; } .banner { min-height: 260px; } }grid-template-columns从 3 列降到 2 列再降到 1 列是照片墙最稳妥的降级方案不用去写复杂的响应式图片高度。还要确认一件事浏览器视口宽度小于 768px 时固定定位的.site-header高度会增加body 的 padding-top 要同步调整否则导航会压住内容。调这个值时直接在浏览器开发者工具里拖视口宽度边拖边看是最快的验证方式。4. formCheck.js 与 Calendar.js表单校验和日期组件的轻量实现静态网页要拿高分交互不能只停留在 hover 变色这一层。Message.html 里的留言表单配上 formCheck.js 的校验和 Calendar.js 的日期选择正好是“有完整交互闭环”的证明。你以后在前端面试题里遇到的很多场景其实就是这两个小文件在做的事事件绑定、正则匹配、DOM 渲染、数据回填。4.1 表单校验的规则与触发时机表单校验不是把所有校验堆到提交瞬间才做常见的做法是“失焦提示 提交总检”双轨并行。失焦校验让用户填完一项立刻知道对不对提交校验拦住最后一道关。Message 页面的留言表单典型规则如下字段校验规则失败提示语昵称2-12 位中文或英文字母昵称需要是 2-12 位中文或英文字母邮箱常规邮箱格式邮箱格式不正确请重新输入留言内容5-200 字去首尾空格后判断留言内容请控制在 5-200 字之间对应的核心校验函数可以写成这样// formCheck.js 核心逻辑返回 false 时阻止表单提交 function checkForm(form) { // trim 去掉首尾空格避免用户多敲空格导致校验误判 const name form.name.value.trim(); const email form.email.value.trim(); const message form.message.value.trim(); // 中文昵称或英文昵称长度 2-12 const nameReg /^[\u4e00-\u9fa5a-zA-Z]{2,12}$/; // 保留对 .cn 这类多字符后缀的兼容 const emailReg /^[a-zA-Z0-9._%-][a-zA-Z0-9.-]\.[a-zA-Z]{2,}$/; if (!nameReg.test(name)) { alert(昵称需要是 2-12 位中文或英文字母); return false; } if (!emailReg.test(email)) { alert(邮箱格式不正确请重新输入); return false; } if (message.length 5 || message.length 200) { alert(留言内容请控制在 5-200 字之间); return false; } return true; }逻辑说明form.name.value拿的是 name 属性为 “name” 的输入框值trim()必须在正则判断之前执行否则用户输入“ 张三 ”会因为首尾空格匹配不上正则。邮箱正则里的[a-zA-Z.]分别覆盖邮箱局部、域名和中缀最后一段[a-zA-Z]{2,}限制了顶级域名至少 2 位。调用时在 form 的 onsubmit 事件里写return checkForm(this)返回 false 浏览器就不会刷新页面。4.2 Calendar.js 的渲染与点选逻辑Message 页里放一个日期选择组件常见用途是标记留言日期或者预约时间。手写日历的核心是计算某年某月有多少天以及 1 号是星期几然后动态生成表格// Calendar.js 的常规写法挂在全局对象下避免污染作用域 const Calendar { // month 传入 1-12new Date(year, month, 0) 得到上个月的最后一天 getDays(year, month) { return new Date(year, month, 0).getDate(); }, render(year, month, container) { const firstWeekDay new Date(year, month - 1, 1).getDay(); const totalDays this.getDays(year, month); let html table classcalendar-table; html trth日/thth一/thth二/thth三/thth四/thth五/thth六/th/trtr; // 补齐月初第一天之前的空格子 for (let i 0; i firstWeekDay; i) { html td classempty/td; } for (let day 1; day totalDays; day) { html td classday>container.addEventListener(click, function (event) { const target event.target; // 通过># 将长边压缩到 1600px品质 82输出到 optimized 子目录避免覆盖原图 mogrify -resize 1600x1600 -quality 82 -path ./optimized *.jpg参数说明表示只缩小不放大小图保持原样-quality 82对 jpg 来说是无损感观和体积的平衡点压到 75 以下在背景大图上容易出现色块-path ./optimized指定输出目录不对原图做破坏性操作。压缩完把 optimized 里的文件替换回 images重新跑一遍每一页确认视觉上没有肉眼可见的劣化这个步骤就算过了。5.2 演示前的验证清单按下面的顺序走一遍基本能覆盖评分老师会碰到的所有操作路径。每一条都是 5 秒内能完成的操作全部做完不会超过 10 分钟用隐身模式打开 index.html清掉缓存避免旧样式干扰判断。从导航依次点进五个页面确认每一页的 active 状态都在当前页。空表单提交一次再填错误邮箱提交一次确认拦截提示出现。填合法内容并选择日期后提交确认页面不刷新且出现成功反馈。打开浏览器开发者工具的 Console 面板确认没有任何红色报错。把视口宽度拖到 375px重点看导航栏和留言板是否有横向溢出。其中横向溢出这个问题在静态网页里特别常见。检测方法很简单在开发者工具 Console 里输入document.documentElement.scrollWidth window.innerWidth返回 true 就说明有元素超宽了逐个检查图片和表格的固定宽度即可。5.3 用 git 留一个干净快照压缩包里有 .gitignore 和 LICENSE说明原项目是用 git 管理的。接手之后建议把整个目录初始化一次并提交一个干净的版本这样答辩时如果需要现场改代码随时可以回退到稳定状态git init git add . git commit -m final version before submission.gitignore里通常已经写好了忽略规则提交前跑一下git status确认没有把临时文件、压缩包副本或系统缓存文件带进去。最后一步操作提交完成后把浏览器缩放拖到 375px切到留言板页面点一下日期输入框确认日历弹出位置没有被导航栏遮住再切回桌面端宽度做一次空表单校验这两条过了就可以放心打包交作业了。本文还有配套的精品资源点击获取