简介这是一套面向学生的网页设计期末大作业HTMLCSS资源包围绕9个页面的布局展开适合需要完成静态网站课程作业或期末项目的学习者提供可直接参考和修改的规范范例。压缩包共28个文件5个HTML结构、5个CSS样式、13张JPG/PNG图片素材以及4个MP3和1个MP4媒体文件整体约23.39MB目录按页面与样式分类存放。目前已有34303人学习或下载。资源强调“表面功夫”代码书写工整文件命名和文件夹归类清晰难度控制在学生能解释的水平既易获分又不易被怀疑代做。同时配有多个主题页面及音视频素材方便在不改动整体布局的前提下快速替换成自己的内容形成差异化明显的期末作品。1. 网页设计期末作业HTMLCSS 布局最磨人的不是语法是兜不住网页设计期末作业最让人上火的阶段不是最后交不出去而是写完第一版之后打开页面导航要么顶在左上角要么缩放到 75% 就换行Banner 背景图在中间缺一块三张卡片像熬夜赶工的后果一样挤成一团。这套作业真正考的不是你会写多少特效而是能不能用 HTMLCSS 把导航、Banner、图文卡片、页脚这套基本盘放稳。而这个资源的价值恰恰是把基本盘拆开讲透了用哪些标签、CSS 怎么组织、布局参数怎么定、哪些写法能加分。适合两类人一类是想让期末页面干净整齐但基础不牢的学生另一类是时间紧、想直接改文案和图片就交作业的人。2. 资源拆开看文件结构、语义化标签与 class 命名为什么决定作业上限2.1 文件拆分把 CSS 独立出来而不是全靠style一把梭打开一份能拿高分的作业先别急着看特效看目录就够了。很多同学习惯把样式全写在同一个 HTML 文件的style标签里越到后面文件越长导航、Banner、卡片、页脚的规则混在一起随便改一处就可能误伤另一处。这份资源里我按常见分工组织成了下面这种结构web-final/ ├── index.html ├── works.html ├── contact.html ├── css/ │ ├── common.css │ └── home.css └── images/ ├── banner.jpg └── photo-1.jpg不用把它当成一个固定模板理解成分工即可index.html负责首页结构works.html放作品或课程展示contact.html放联系表单common.css管全站导航、页脚、按钮这些通用样式home.css只处理首页独有内容。这样改首页时不需要动公共文件交作业时老师也能一眼看出你懂“结构、样式分离”。看首页头部是最直接的判断依据!doctype html html langzh-CN head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title首页 - 网页设计期末大作业/title link relstylesheet hrefcss/common.css link relstylesheet hrefcss/home.css /head这里有几个参数值得好好解释。langzh-CN是告诉浏览器页面内容以简体中文为主虽然不加也能显示但会影响字体回退和读屏器的语音charsetutf-8必须出现在title之前否则 Windows 下打开中文会乱码viewport里的widthdevice-width, initial-scale1.0是响应式的基础后面做手机适配时缺了它基本白搭。link的顺序我一般这样约定common.css放前面home.css放后面。因为 CSS 里同优先级、同特定性的规则后出现的会覆盖先出现的。公共样式是地基页面样式是局部装修后加载可以更灵活地覆盖。如果反过来home.css里想调整导航颜色却被common.css挡住那排查起来就得猜半天。结构拆分之后建议再立一个重置样式否则浏览器默认的margin和padding会让所有页面“自带一圈边框”* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Microsoft YaHei, PingFang SC, sans-serif; line-height: 1.6; color: #333; background-color: #f7f8fa; }解释一下这块box-sizing: border-box的意思是元素的width已包含padding和边框写百分比布局时不会被内边距撑破line-height: 1.6让正文行距宽松一些期末打印出来也好读字体栈写成中文字体在前、通用字体在后就是告诉浏览器“如果没装雅黑就用苹方再不行用系统默认无衬线体”。这些不是必须背的知识点但答辩时老师抽查任何一个你都能答出来印象分会好很多。2.2 语义化标签与 class 命名结构越清楚后面改样式越省事HTML 写得好不好老师不运行也能看得出来。语义化标签本身不改变视觉效果但决定了布局代码能不能被快速读懂。下面是首页主结构的骨架body header classsite-header nav classnav container a classlogo hrefindex.html网站名称/a ul classnav-list lia classnav-link active hrefindex.html首页/a/li lia classnav-link hrefworks.html作品/a/li lia classnav-link hrefcontact.html联系/a/li /ul /nav /header main section classbanner h1网页设计期末大作业/h1 /section section classcard-grid container h2 classsection-title课程内容/h2 article classcard卡片内容/article article classcard卡片内容/article /section /main footer classfooter-info p© 2025 期末作业 · 仅供学习交流/p /footer /bodyheader里放网站导航main里放当前页面唯一主要内容footer放版权信息这些标签都有自己的语义。注意section里最好配一个h1或h2否则浏览器和老师都不知道这一块在讲什么主题。导航用ul列表而不是一串裸a是因为列表天然表达“多个并列入口”而且后期加间距、加下划线都更方便。class 命名也不要写.div1、.box2这种编号式名字。我习惯用“位置作用”的方式.site-header是站点页头.banner是横幅区.card-grid是卡片网格容器.footer-info是页脚信息区。以后改样式时看到类名就能猜到它管哪个区域比“这个 class 在哪儿卡住了”去全文搜索要省时间得多。3. 主布局实战Flex 导航、Banner 参数与 720px 断点这样定3.1 导航和图文卡片先写 Flex少碰 float期末作业里最常见的布局就是顶部导航加下方三列卡片。早几年教材还在用float: left一套下来要清理浮动、要算宽度、还要考虑父元素高度塌陷对期末作业来说性价比极低。我一般直接用 Flex浏览器兼容性足够代码量也更短。.container { max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 16px; } .site-header { background: rgba(255, 255, 255, 0.9); border-bottom: 1px solid #e5e5e5; } .nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 14px 0; } .nav-list { display: flex; gap: 24px; list-style: none; flex-wrap: wrap; }这段代码里有几个参数是平时最容易调错的。max-width: 1200px规定了内容区最宽 1200但后面还要跟一个width: 100%这样当浏览器窗口小于 1200 时容器会自动收窄不会出现横向滚动条。margin: 0 auto让块级容器水平居中其中两边为auto是居中的关键不能写成上、左、右都给了具体值。align-items: center让 logo 和菜单在垂直方向对齐justify-content: space-between则把两组元素推到左右两端。flex-wrap: wrap值得单独讲。如果去掉它窄屏下导航会硬挤在一行里子项被压缩得奇形怪状加上之后放不下时自动换行起码不会破版。列表里用gap: 24px控制菜单间距这比给每个li加margin-right省事但要注意gap只作用于 Flex 或 Grid 子元素之间普通块级元素之间的空隙还是得用margin。我也见过必须用float的情况比如照着老教材改。常见做法是用一个 clearfix 清理浮动.clearfix::after { content: ; display: table; clear: both; }但说实话只要能换 Flex我建议直接换。课程页面展示时老师更关心最终效果答辩时解释“我用 Flex 做一维布局、用 Grid 做二维网格”比解释“我清了浮动”要顺口得多。3.2 Banner 高度与背景图铺法三个 background 参数不乱调Banner 是首页门面。很多作业挂在这里问题通常是背景图被拉伸、渐变颜色切得生硬、文字在浅色图上根本看不清。我习惯先把 Banner 做成一个用渐变撑住的居中区域后续换图不伤整体.banner { display: flex; align-items: center; justify-content: center; height: 420px; background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); } .banner h1 { color: #fff; font-size: 2.4rem; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); text-align: center; }先说为什么用display: flex; align-items: center; justify-content: center;。文字在 Banner 里是唯一子元素Flex 的三行代码同时完成水平垂直居中比给h1设置margin-top去挤位置要可靠。高度 420px 是一个比较中庸的值笔记本和投影仪上都不会太矮如果想做出整屏横幅把height改成100vh但期末页面下面还有内容全屏 Banner 反而会让首屏信息密度变低。linear-gradient(135deg, #6a11cb 0%, #2575fc 100%)是从左上往右下渐变的紫色到蓝色。135deg 表示渐变方向0% 和 100% 是颜色渐变位置中间还可以插入更多颜色比如50%处加一个中间色。答辩时把这个参数讲明白比“我上网复制了个渐变”要强得多。如果要在 Banner 上放背景图常见写法是.banner { height: 60vh; background-image: url(../images/banner.jpg); background-size: cover; background-position: center; }注意这里路径是../images/banner.jpg因为 CSS 文件在css/子目录下相对于 CSS 文件所在位置要往上退一级才能找到images/。这是期末作业翻车率最高的位置之一后面排查章节我会再提。background-size: cover的意思是图片铺满容器并保持宽高比多出来的部分被裁掉background-position: center决定裁剪时保留中间区域。3.3 卡片网格用 CSS Grid 做自适应不写花哨媒体查询卡片网格要做成自己长成三列、屏幕变窄自动变成一列我用的是 Grid 的auto-fill少写很多断点答辩时也能讲出“自适应布局”这个点.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin: 40px 0; } .card { background: #fff; border-radius: 12px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-6px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); }这段 CSS 的关键在repeat(auto-fill, minmax(280px, 1fr))。auto-fill让浏览器根据容器宽度自动安排列数minmax(280px, 1fr)表示每一列最小 280px剩余空间按比例分配。容器 1200px 时排三列最窄时自动只留一列。中间那一层细节比写三条媒体查询要少而且改起来更快。.card:hover里的transform: translateY(-6px)是鼠标移入时整张卡片向上浮 6px配合box-shadow增强制造“卡片抬起来”的感觉。四个阴影参数从左到右是水平偏移 0、垂直偏移 4px、模糊半径 10px、颜色透明度 0.08。如果想要更强的悬浮感就把垂直偏移调成 8px、模糊半径调成 20px但别加到夸张的 60px否则阴影会糊成一片。3.4 响应式断点只做一个 720px别把期末作业写成适配工程很多教程会列出一堆断点1024px、768px、480px、360px。期末作业真的没必要写这么多。只要保证宽屏和手机竖屏不错位就足够拿分了。media (max-width: 720px) { .nav-list { flex-direction: column; width: 100%; text-align: center; } .banner { height: 260px; } .card-grid { grid-template-columns: 1fr; } img { max-width: 100%; } }为什么选 720px因为绝大多数手机竖屏宽度都在 375px 到 430px 之间720px 这个断点把手机和窄屏平板一起覆盖了不需要每个尺寸都单独调。flex-direction: column让导航列表从横向变成纵向width: 100%保证它占满一行点击区域变大。.card-grid { grid-template-columns: 1fr; }会覆盖上面auto-fill的多列规则。这里有一个很容易被忽略的知识点媒体查询的规则靠“顺序”覆盖所以这组代码必须放在所有普通样式之后如果写在前面后面的普通样式会把它盖回去。响应式成败还有一个前提是meta nameviewport必须存在。没有它手机浏览器会默认按 980px 宽渲染页面再用手指缩放你的 720px 断点压根不会被触发。这一条不是锦上添花是必修项。4. 三个加分特效3D 翻转卡片、涟漪光圈和动态相册的纯 CSS 写法4.1 3D 旋转卡片perspective 才是“立体感”的开关有同学问过transform: rotateY(60deg) translateZ(300px)出来到底长什么样。拆开看先绕 Y 轴旋转 60 度再沿着旋转后的“正面方向”向屏幕外平移 300px。视觉上像一张卡片从侧面转过来又朝人脸方向推近边缘会产生明显的透视变形。如果父容器没有加perspectivetranslateZ几乎没有立体感最多只是感觉卡片缩小了perspective才是让 3D 效果成立的开关。.scene { perspective: 800px; } .flip-card { background: #fff; padding: 24px; border-radius: 12px; transform: rotateY(45deg) translateZ(80px); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .flip-card:hover { transform: rotateY(0deg) translateZ(0); }perspective: 800px的含义是“观察者离元素 800px”。数值越小透视越强变形越夸张数值越大画面越接近正视图。一般卡片效果我用 800px 到 1000px300px 会像广角镜头卡片边缘拉得很斜。transform 的执行顺序是右往左也就是说先执行rotateY(45deg)再执行translateZ(80px)。如果反写成translateZ(80px) rotateY(45deg)效果会变成先把卡片平拉向人眼再在眼前做旋转画面完全不同。期末作业里我会优先给学生用 hover 从 45deg 回正到 0deg 的写法因为这种效果只动了角度稳定且不容易翻车。过渡曲线cubic-bezier(0.22, 1, 0.36, 1)是所谓“easeOutExpo”风格的曲线回正时先快后慢观感比默认 ease 舒服。4.2 涟漪光圈扩散用 ::after 模拟点击波纹不写一长串逻辑“CSS 涟漪光圈扩散”听起来高级实际实现靠的是伪元素和动画。波纹通常覆盖在按钮上鼠标点下去的一瞬间出现一个白色光圈从中心扩散并消失。这里用少量 JavaScript 记录点击位置其余交给 CSS.btn { position: relative; overflow: hidden; padding: 10px 22px; border: none; border-radius: 6px; background: #2575fc; color: #fff; cursor: pointer; } .btn::after { content: ; position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 80px; height: 80px; background: rgba(255, 255, 255, 0.45); border-radius: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; } .btn:active::after { animation: ripple 0.6s ease-out; } keyframes ripple { from { transform: translate(-50%, -50%) scale(0); opacity: 0.6; } to { transform: translate(-50%, -50%) scale(4); opacity: 0; } }:active::after的意思是按钮被按住的瞬间触发伪元素动画。--x和--y是 CSS 自定义属性默认值是50% 50%所以即使不额外传参波纹也会从按钮中心出现。要跟随鼠标坐标只需加一小段事件代码btn.addEventListener(pointerdown, function (e) { const rect btn.getBoundingClientRect(); btn.style.setProperty(--x, e.clientX - rect.left px); btn.style.setProperty(--y, e.clientY - rect.top px); });用pointerdown而不是click是因为手指按压的反馈更跟手比“点击后抬起才出效果”更自然。:active的问题在于只有按住时动画存在松开就回到默认状态在线演示时容易被老师说成“只有一下”所以更常见的是把动画放到点击后追加的一个 class 上btn.addEventListener(click, function () { btn.classList.remove(wave); void btn.offsetWidth; btn.classList.add(wave); });CSS 里写成.btn.wave::after { animation: ripple 0.6s ease-out; }。中间的void btn.offsetWidth是强制浏览器重新计算一次布局这样即使不是同一个 class 重复添加浏览器也会把它当作新的动画重新播放。没有这一句第二次点击通常毫无反应。4.3 动态相册鼠标移入缩放hover 过渡最小化实现动态相册不用做成轮播一个干净的 hover 放大效果就足够撑起作品页。关键不是图片本身怎么做而是把放大后的溢出裁掉。.album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .photo-card { overflow: hidden; border-radius: 8px; background: #eee; } .photo-card img { display: block; width: 100%; height: 220px; object-fit: cover; transition: transform 0.6s ease; } .photo-card:hover img { transform: scale(1.1); }这里最常见的问题是直接写img:hover { transform: scale(1.1); }。图片放大后会把周围内容挤开甚至让页面出现横向滚动条。把transform作用在图片上同时让父容器overflow: hidden图片在放大过程中超出父容器的部分会被隐藏看起来就像图片在相框内滑动放大。height: 220px; object-fit: cover的作用是把所有图片统一裁剪成 220px 高并保持原始比例多余部分裁掉。如果你的相册里是竖构图长图cover会把图片左右切掉很多这时要么改成object-fit: contain让整张图等比放进容器并留白要么提前在作图软件里把图片裁成固定比例。期末作业的图片素材本来就来自各处显得统一是很重要的加分点。5. 交作业前必看的排查清单四个高频翻车点与解决办法5.1 CSS 样式加载不出来文件路径、浏览器安全策略一起查现象双击打开index.html页面只有裸文字、没有颜色、没有圆角按钮像老式网页。控制台报错常见的是Access to CSS stylesheet at file:///C:/Users/... has been blocked。原因有两类一是link的href路径写错比如 HTML 在根目录CSS 在css/子目录写成hrefstyle.css自然找不到二是浏览器对本地file://打开文件的保护机制不允许某些本地资源从其他目录被直接加载。解决办法是先确认目录层级再用相对路径link relstylesheet href./css/common.css./表示当前 HTML 文件所在目录./css/common.css在 HTML 位于根目录时等价于css/common.css。如果不需要课设说明不使用./但保留它更清楚。如果路径没错但控制台仍给出访问被阻止就用本地静态服务不要纠结这个错误cd 项目目录 python -m http.server 8000然后浏览器访问http://localhost:8000。8000是端口号被占用可以换成8080或5000。另外有学校机房还在用 IE 11 的碰到样式完全失效可以加一句强制使用 Edge 文档模式meta http-equivX-UA-Compatible contentIEedge放在title之前IE 11 才会按现代模式解析 CSS。5.2 图片显示为碎图或错位拉伸八成是路径和 object-fit 问题现象页面上图片显示一个小方框加红叉或者图片明明存在却把卡片撑得变扁。原因图片路径没有和 HTML 文件形成正确相对关系图片文件名用了中文、空格、大写后缀在 Windows 下可能没事换到 Mac 或 Linux 后无法识别。另一个常见原因是直接给img标签写死width220 height120原图比例一旦和这两个值不同就会被压扁或压宽。解决把图片统一放进images/目录文件名改成小写英文加短横线再用相对路径引用img srcimages/photo-1.jpg alt课程现场照片样式上不要同时手动设定宽高交给 CSS 处理.album img { width: 100%; height: 220px; object-fit: cover; }object-fit: cover会保证图片按比例裁剪而不是强制拉伸。需要检查的一个细节是如果图片在index.html同级但 CSS 是从css/里写的路径关系不同HTML 中的相对路径以 HTML 文件为基准CSS 中的url()以 CSS 文件为基准不要混用。5.3 动画只播一次或第二次没反应动画结束后的状态没归零现象涟漪光圈第一次点击正常第二次点击完全没效果3D 卡片第一次翻过去再翻回来就停在半中间。原因动画结束后的样式没有回到初始状态。比如.btn::after的默认opacity写成了 0.6动画播放完又回到 0.6视觉上残留半透明光圈另外同一个 class 重复添加时浏览器认为动画没有变化不会重新执行。解决伪元素的日常状态写死为不可见触发状态单独放在动画 class 上.btn::after { opacity: 0; } .btn.wave::after { animation: ripple 0.6s ease-out; }如果需要连续触发强制让浏览器中断一次再重新播放btn.classList.remove(wave); void btn.offsetWidth; btn.classList.add(wave);void btn.offsetWidth这一行强制读取一次布局浏览器因此会认为 class 发生了真实变化动画才能重新执行。凡是遇到“第二次点击没反应”的特效优先检查是不是少了这个强制重排。5.4 手机或老师电脑打开后布局乱掉viewport meta 和固定宽度是重灾区现象自己在 1920px 屏幕上看着好好的页面换成老师笔记本 1366px 就出现横向滚动条手机打开时字号缩得很小导航叠成一团。原因页面头部没加 viewport内容区用了固定width: 1200px而不是max-width图片没有限制最大宽度Flex 容器没有允许换行。解决分三步第一步是确认头部 metameta nameviewport contentwidthdevice-width, initial-scale1.0这句的意义是让手机浏览器按实际屏幕宽度渲染不要默认使用 980px 虚拟视口。第二步是把固定宽度改成自适应.container { width: 100%; max-width: 1200px; } img { max-width: 100%; }第三步是给导航和卡片容器留出换行余地。导航已经写了flex-wrap: wrap卡片网格用auto-fill或媒体查询接管列数。如果这三件事都做了布局不可能还乱。检查时推荐用浏览器开发者工具的手机模拟模式先把宽度拖到 375px 看一屏再拖到 1280px 看一屏两个状态不横向滚动基本就能安全交作业了。6. 交付前最后一遍把多页面合成一个入口、用 Markdown 留一份说明文档期末作业经常是多个 HTML 页面首页、作品页、联系页分开交。老师为了看全貌需要来回切换文件体验很差。我习惯在交付前把多页合成一个长页面把所有页面的核心内容复制到index.html里每个区域一个section id...导航链接改成锚点跳转。lia href#home首页/a/li lia href#works作品/a/li lia href#contact联系/a/li对应区域加idsection idhome classpage-panel首页内容/section section idworks classpage-panel作品内容/section section idcontact classpage-panel联系内容/section锚点跳转是浏览器原生行为不写 JavaScript 也能用。滚动定位略生硬也没关系期末作业的意义是让老师一次看完而不是像产品一样丝滑。如果原来的works.html和contact.html还要保留就必须保留一份独立可跳转的版本首页导航不要把地址写成绝对路径比如C:/Users/...否则在教室电脑上会直接失效。留档这一步经常被忽略。答辩前要写设计报告把网页做成截图再复制文字很浪费时间。常见做法是直接把 HTML 转成 Markdown再在 Markdown 里补充设计说明。如果电脑有 pandoc 环境可以这样转cd 项目目录 pandoc index.html -t markdown -o 说明文档.md没有环境的也可以直接在 Typora 或支持剪贴板转 Markdown 的编辑器中把页面文字粘贴进去重点是保留内容的层级结构导出的 Markdown 用来写报告能省不少事。转完后再把说明文档.md放进同一个项目目录这样老师拿到压缩包时既能看到页面源码也能看到与之一一对应的文字说明。我以前交作业时直接丢出几个互不关联的 HTML老师在地址栏里手动敲文件名的事都干过。后来我养成了一个习惯每次交付前都把散页合成一个入口页头部viewport必须存在CSS 和图片路径全部逐条点一遍再导出一次 Markdown 说明文档。整个过程不到十分钟但能让你的作业看起来像一套有交付意识的作品而不是几个文件的堆砌。希望这些步骤帮到你也祝你期末顺利。本文还有配套的精品资源点击获取