简介大学生Web期末作业可参考的完整个人主页设计包面向网页设计课程学员与需要快速完成静态站点作业的入门开发者。资源包含首页、关于我们、作品展示、新闻动态、视频展示与联系我们共6个功能页面覆盖个人网站常用信息结构可借鉴导航栏、图文排版、视频嵌入与表单布局等设计帮助学习者理解多页面站点如何组织内容与用户交互。压缩包共49个文件以HTML页面和JPG图片为主另含SWF动画、FLV视频、JS脚本及DWT模板视频与脚本用于页面动态效果DWT模板便于统一全站风格整体约21MB可直接用于HTML/CSS/JavaScript课程成果提交或二次学习。包内Templates、Scripts、images、video等目录将页面模板、交互脚本与媒体素材独立存放便于替换与维护。目前已有2352人学习下载适合作为期末大作业的参考模板也可用于拆解页面布局、媒体元素集成、脚本调用等基础实现思路。1. 期末网页作业设计的本质它不是“写页面”是“搭一套可答辩的小项目”很多人搜“html css网页制作成品”以为期末作业就是找到一个能打开的网页交上去。实际上老师评估的是“你会做”而不是“你能打开”页面结构是否清晰语义化标签有没有用对CSS是不是照搬的JavaScript 交互能不能讲出执行顺序。标题里的“web期末作业设计网页”也暗示了这不是一个 html 文件的事而是要把结构、样式、脚本、资源整合成一套完整的小项目。这篇博文就按“骨架 → 视觉 → 交互 → 验收”的顺序把一套能复现、能解释、能拿得出手的做法讲清楚适合想快速产出第一个像样作品的人。2. 先搭工程骨架HTML5语义化、文件目录与DOCTYPE的细节2.1 目录结构一个能直接放进“web期末作业设计网页”的文件夹约定期末作业最常见的翻车点不是页面丑而是所有代码堆在一个 index.html 里CSS 用style塞在 head 中JS 用script写在 body 底部。功能勉强能跑但答辩时一问“你的工程结构是什么”就卡住。我一般会先按下面这样建目录project-root/ ├── index.html ├── about.html ├── css/ │ ├── reset.css │ └── style.css ├── js/ │ ├── main.js │ └── scroll.js ├── images/ │ ├── banner.jpg │ └── logo.png └── assets/ └── font/这个结构的核心是“按类型拆分按页面命名”。css 里把 reset 和业务样式分开是因为 reset 负责清浏览器默认边距style.css 才是你真正写的页面样式两者混在一起时调样式、换主题、排查浏览器差异都会很痛苦。js 按功能拆成 main.js 和 scroll.js是为了在答辩时说清楚“哪个脚本负责哪块交互”。目录建好后资源引用也必须是相对路径不能写C://xxxx这种绝对路径。否则换一台机器展示就直接失效。下面这张表是常见资源的存放位置和引用方式资源类型存放位置引用方式说明页面样式css/style.csscss/style.css通过link加载全站公共脚本js/main.jsjs/main.js通过script src加载页面配图images/images/banner.jpg图片路径必须用相对路径字体文件assets/font/在 CSS 里用font-face声明避免使用未授权字体提示交作业时不要把整个项目压缩成乱糟糟的一堆文件应该保留目录结构再打包。很多老师会直接在地址栏输入file:///...打开路径乱了马上就能发现。2.2 页面骨架DOCTYPE 与 langzh-CN 到底影响什么好的页面骨架不只是“能显示”而已它还决定了浏览器用哪种模式解析、中文会不会变乱码、移动端打开是否自动缩放。下面是一个标准入口页模板!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title网页设计期末作业/title link relstylesheet hrefcss/style.css /head body header nav idmainNav/nav /header main h1这是首页标题/h1 /main footer p版权信息/p /footer script srcjs/main.js defer/script /body /html!DOCTYPE html是让浏览器进入标准模式的关键。没有它部分浏览器会退回怪异模式Quirks Mode盒模型、百分比高度、margin的表现都会古怪到你无法解释。langzh-CN不是摆设屏幕阅读器依赖它决定用什么语音朗读也方便搜索引擎理解页面语言。charsetUTF-8必须放在 head 最前面一旦浏览器先按系统默认编码解析了一部分中文内容就可能出现标题乱码这时再改 meta 已经来不及。脚本放在 body 末尾同时加上defer属性。defer的意思是“等 HTML 解析完再执行”这样即使脚本写在head里也不会阻塞渲染但为了符合多数人的阅读习惯我仍然习惯把script放在 footer 之后。2.3 用 HBuilder 或 VS Code 起项目别在浏览器里直接拖文件做“web期末作业设计网页”开发环境越简单越好。HBuilderX 自带内置浏览器新建 Web 项目会自动生成index.html、css、js目录适合完全不清楚“怎么把站点跑起来”的同学。VS Code 则需要装 Live Server 插件装好后右键index.html→ “Open with Live Server”它会启动一个本地端口并自动刷新调试 CSS 或 JS 时能省掉无数手动按 F5 的时间。如果电脑上什么都没装也可以用 Python 内置的 HTTP 服务cd project-root python3 -m http.server 8080然后访问http://localhost:8080。这个命令本质是把这个目录变成一个静态资源服务器比直接用file://打开更接近真实部署环境也方便用手机在同一局域网下预览。直接双击 html 文件有两个问题一是某些浏览器会限制本地脚本和字体加载二是页面里如果有fetch请求本地文件协议下会直接报 CORS 错误。3. HTMLCSS 核心视觉落地布局、选择器、样式细节3.1 布局选型Flex 还是 Grid期末作业里的选择标准布局是“html css网页制作成品”里最容易拉开差距的部分。很多同学仍然在用float写导航栏然后又因为浮动塌陷清不干净加一堆 hack。我现在的原则是一维排列用 Flexbox二维排列用 Gridfloat只在做文字环绕图片时使用。页头导航用 Flexbox 是最稳的写法.nav { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 0 32px; }justify-content控制主轴排列space-between让两侧元素贴边中间自动留白align-items控制交叉轴居中。gap是给子元素之间加间距的最直接方式不用再给每个li写margin-right。卡片列表这种二维场景更适合 Grid。比如作品集页面.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }minmax(240px, 1fr)的意思是每列至少 240px如果容器够宽就平分剩余空间auto-fill会让浏览器自动计算列数。这样无论屏幕多窄卡片都不会挤成一团也天然具备一定响应式能力。布局方式适合场景期末作业中的使用频率Flexbox导航、按钮组、单行卡片最高Grid卡片墙、商品列表、页面骨架高Float文字环绕图片低除非课程明确要求绝对定位角标、浮层、返回顶部按钮中提示答辩时如果被问“为什么用 Grid”标准回答是“因为我们需要同时控制行和列而 Flexbox 更适合只控制单轴”。这是最直接的价值点。3.2 常用的 CSS 伪类选择器怎么用从 :hover 到 :not(:last-child)CSS 选择器决定了你写的样式能命中哪些元素。很多“问题样式”不是属性写错而是选择器没有选中目标。“css 伪类选择器怎么用”是前端入门最高频的问题之一这里列几个期末作业立刻能用的写法。.menu li:not(:last-child) { border-right: 1px solid #eee; }:not(:last-child)表示“除了倒数第一个 li 之外的所有 li”这比单独给最后一个元素补一个无边框类更简洁。热词里“css 除了倒数二个元素”的做法可以用:nth-last-child(-n2)表示选择倒数两组元素。.card:nth-child(3n1) { grid-column: span 2; }:nth-child(3n1)是“每 3 个一组取每组第 1 个”的意思。这个选择器用来做杂志式错落布局很有效比如 9 张图片中第 1、4、7 张占两列其余占一列。参数anb的写法里n从 0 开始计数3n1得到的是 1、4、7、10。交互反馈也离不开伪类。比如输入框聚焦时高亮边框.search-input { border: 1px solid #ddd; transition: border-color 0.2s ease; } .search-input:focus { border-color: #4f46e5; outline: none; }:focus是比mouseenter更可靠的交互入口因为键盘 Tab 也能触发。用鼠标点击时它照样生效又不依赖 JavaScript页面可用性会明显提升。3.3 几个低成本但很出效果的小样式渐变、圆角、鼠标移入事件期末作品想看起来“像那么回事”不需要会复杂的视觉设计只要用对几个现代 CSS 特性。“css 字体渐变”是其中一个常见做法是背景裁剪到文字上.gradient-title { background: linear-gradient(90deg, #4f46e5, #06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }关键词是background-clip: text它让背景只在文字区域内可见后面的-webkit-text-fill-color: transparent把文字填充色变成透明背景才透出来。注意-webkit-前缀仍然是必须保留的Safari 和旧版 Chrome 不支持无前缀写法。这个技巧不适合大面积正文只建议用在一级标题或 Logo 上。“css 优惠券圆切”是另一个容易被问到的点。优惠券两侧那个半圆缺口不是真正“切掉”而是用一个和背景同色的圆形遮挡.coupon { position: relative; width: 280px; padding: 24px; background: #fff; border-radius: 12px; } .coupon::before, .coupon::after { content: ; position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: #f5f5f5; transform: translateY(-50%); } .coupon::before { left: -9px; } .coupon::after { right: -9px; }这里把伪元素的背景色设成页面背景色#f5f5f5而不是透明视觉上就产生了“缺口”。真正的透明缺口需要用mask属性或径向渐变伪元素方案代码更简单且兼容性更好。卡片在鼠标移入时的反馈也就是热词里的“css 鼠标移入事件”其实是指:hover配合transition.card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); }transform负责让卡片上移box-shadow负责产生浮起阴影。transition里的0.3s ease表示 0.3 秒的缓动动画太快显得生硬太慢显得拖沓0.25s 到 0.35s 是安全范围。这里不需要 JavaScript因为它是纯展示层面的反馈。3.4 变量与媒体查询让样式可维护、可响应期末作业如果能顺手用上 CSS 变量评委印象分会高很多。CSS 变量用--变量名定义用var()读取:root { --primary: #4f46e5; --text-main: #333; --gap: 20px; } .nav a { color: var(--primary); }:root相当于html在这里定义全局变量之后换主题色只需要改一处。媒体查询则决定了页面在手机宽度下的表现media (max-width: 768px) { .nav { flex-direction: column; gap: 12px; } .card-grid { grid-template-columns: 1fr; } }max-width: 768px的意思是“当视口宽度小于等于 768px 时应用里面这些样式”。这部分几乎是现代网页设计的默认要求哪怕你的页面是给电脑展示的写上媒体查询也能在老师用笔记本外接投影时避免布局错乱。4. JS 交互从“看得见”到“用得了”4.1 JS 判断字符串是否包含与搜索过滤的实战JavaScript 在期末作业里最常见的任务之一是搜索过滤。比如你有一个作品集卡片列表希望用户在搜索框输入文字时卡片实时筛选。“js判断字符串是否包含”的标准做法是String.prototype.includes()const cards document.querySelectorAll(.card); const searchInput document.querySelector(#searchInput); searchInput.addEventListener(input, () { const keyword searchInput.value.trim().toLowerCase(); cards.forEach(card { const title card.dataset.title.toLowerCase(); if (title.includes(keyword)) { card.style.display ; } else { card.style.display none; } }); });trim()去掉用户误输入的首尾空格toLowerCase()让搜索不区分大小写否则用户输入HTML就搜不到html。includes(keyword)判断字符串是否包含包含就返回true。注意keyword为空字符串时includes()永远为true所以输入被清空后所有卡片都会回来这符合预期。如果兼容性要求极高可以用indexOf(keyword) -1代替includes。两者唯一的区别是indexOf返回位置下标找不到时返回-1。现在的浏览器基本都支持includes不用特意做降级。4.2 鼠标移入事件与导航状态切换导航高亮是另一个高频需求。很多人第一反应是写 CSS:hover但:hover只在鼠标悬停时生效移开后立刻消失。如果你希望某个导航项被点击后保持高亮状态就需要用 JavaScript 管理一个类名。“鼠标移入事件”的正确事件是mouseenter而不是mouseover原因是mouseenter不会在进入子元素时不断冒泡触发。const navItems document.querySelectorAll(.nav li); navItems.forEach(item { item.addEventListener(mouseenter, function () { navItems.forEach(i i.classList.remove(active)); this.classList.add(active); }); });这段代码的意思是鼠标进入某个li时先把所有导航项的高亮状态清掉再给当前项加上active。用classList.add/remove修改样式不要直接改style.backgroundColor因为类名是唯一可以同时被 CSS 和 JS 控制的入口改独立样式属性会让后续维护者抓狂。如果导航项是数组元素可以通过e.target.closest(li)做事件委托document.querySelector(.nav).addEventListener(mouseover, e { const li e.target.closest(li); if (!li) return; li.parentElement.querySelectorAll(li).forEach(i i.classList.remove(active)); li.classList.add(active); });closest(li)会从当前事件目标向上查找最近的 li如果点到的是a也能正确拿到它所在的 li。4.3 一键返回顶部算法从 scrollTo 到缓动“html一键返回顶部算法”几乎是期末作业必点技能。最简单的方案是直接让页面瞬间回到顶部window.scrollTo(0, 0);但这看起来很粗暴。更好的做法是写一个缓动动画让页面滚动的速度越来越慢形成“卷回去”的感觉。核心思路是每一帧都滚动到“当前距离顶部的 80%”const backTop document.getElementById(backTop); window.addEventListener(scroll, () { backTop.style.display window.scrollY 300 ? block : none; }); backTop.addEventListener(click, () { const step () { const currentY window.scrollY; const nextY Math.floor(currentY * 0.75); if (nextY 0) { window.scrollTo(0, nextY); requestAnimationFrame(step); } else { window.scrollTo(0, 0); } }; requestAnimationFrame(step); });window.scrollY是当前滚动距离顶部的位置。currentY * 0.75每次减少 25%数值越小滚动越慢永远不会一下子到 0所以要加一个nextY 0的判断最后直接归零。requestAnimationFrame(step)是浏览器在下一帧渲染前调用 step正常情况下每秒执行 60 次比setTimeout定时器更平滑。其实还有个不用算法实现的方案写在 CSS 里html { scroll-behavior: smooth; }有了这一行window.scrollTo(0, 0)也会产生平滑滚动。但记住“html 一键返回顶部算法”这个需求它考核的是理解动画帧和距离递减的过程。答辩时能把这套数学逻辑讲清楚比单纯说“我用了 window.scrollTo”有价值得多。5. 提交前检查与常见坑让“成品网页”可展示、可答辩5.1 “HTML 文件无法预览”通常是路径或编码问题期末作品没法打开十有八九是路径问题。css/style.css表示“当前目录下的 css 文件夹里的 style.css”../css/style.css才是上一级目录的 css 文件夹。如果你在pages/about.html里引用了css/style.css浏览器会去pages/css/style.css找结果自然是 404。打开浏览器开发者工具切到 Console 和 Network 面板看到红色Failed to load resource或404就能定位是哪个文件找不到。中文乱码则是编码问题检查charset是否写在 head 里的第一个 meta。如果你用记事本另存过 html 文件保存时编码选择“带 BOM 的 UTF-8”否则部分 Windows 机器上会出现首行幽灵字符。5.2 3D 立方体相册这类花活preserve-3d 的兼容坑想给作品加一个“3d立方体相册css”效果代码本身不复杂最常踩的坑是父级没有开启三维空间.cube { width: 200px; height: 200px; position: relative; transform-style: preserve-3d; animation: cubeRotate 12s linear infinite; } .cube .face { position: absolute; width: 200px; height: 200px; background: rgba(79, 70, 229, 0.7); display: flex; align-items: center; justify-content: center; } .face:nth-child(1) { transform: rotateY(0deg) translateZ(100px); } .face:nth-child(2) { transform: rotateY(90deg) translateZ(100px); }transform-style: preserve-3d是核心它告诉浏览器子元素的 3D 变换要保留空间位置关系。如果不写子元素会被强制平铺到父元素的二维平面上旋转立方体就变成变性图片。translateZ(100px)里的 100px 是立方体边长的一半边长为 200px 时就该偏移 100px这是数学决定的改错参数立方体就会散架。提示这种 3D 效果不要放在首屏因为部分教室投影仪的分辨率和刷新率会让动画掉帧。放在“作品展示”或“更多内容”区既保住亮点又不会干扰主内容阅读。5.3 提交前的 5 步检查清单检查项怎么检查常见结果控制台报错F12 打开 ConsoleUncaught TypeError、404图片加载Network 面板看红色条目路径错误、图片体积过大中文字体浏览器放大 200% 看是否溢出字体栈没写中文候选字体外链可访问检查友情链接、CDN 资源换了网络环境后加载失败注释是否完整代码里是否有功能注释答辩时无话可讲还有一个容易被忽略的点img的alt属性一定要写。老师问语义化的时候alt 是最直观的证据图片加载失败时alt 也能让用户知道这里曾经计划放什么。这个属性加不加不影响视觉但展示时随口讲一句“我给每张图都写了替代文字”效果比解释十行 CSS 都实用。本文还有配套的精品资源点击获取