简介一套面向大学生网页设计期末作业的HTMLCSS静态网站成品包围绕学校常见的多页面网站要求制作共包含9个不同布局的网页适合需要快速完成或参考课堂作业的初学者。整套资源共28个文件以5个HTML页面、5个CSS样式表为核心代码搭配9张JPG图片与4张PNG图片作为页面素材另有4个MP3音频和1个MP4视频可用于背景音乐或效果展示压缩包整体约23.39MB。已有34303人学习下载热度较高。资源在目录结构和代码书写上做了规范处理例如将页面、样式、素材分类存放HTML与CSS分离书写便于教师查看时理解结构也方便学生替换文案、图片和音乐后直接提交。与常见的网上杂乱代码不同这套作品既不会显得过度专业又能满足期末作业的规范性要求适合作为改版基础。1. 网页设计期末大作业先想清楚这三个问题再动手越是临近交作业越容易直接打开编辑器就写。我见过太多同学在网页设计期末大作业上反复推翻重来导航栏改了五版图片路径全是红的甚至到最后都不知道自己掉进的是 CSS 坑还是 HTML 结构坑。网页设计期末大作业的本质是用 HTML CSS 在有限篇幅里证明你已经建立了「信息结构 → 视觉表现 → 用户交互」的完整意识它不需要炫技但必须完整、自洽、能离线打开。别急着敲代码先用十分钟想清三件事页面做给谁看、要展示哪几类信息、哪些效果是能在现有水平下稳定实现而不是靠玄学碰运气。把这三件事定下来你后面写的每一行 HTML 和 CSS 都在为它服务而不是反过来被特效牵着走。2. 页面规划与文件结构一份能交得出手的作业该长什么样2.1 先把信息架构画出来从栏目到页面的拆解方法大多数期末大作业翻车不是代码写错是页面内容本身撑不住。常见做法是先用一张纸把网站要放的信息列出来再决定做几个页面。做过几十次作业辅导后我一般推荐最稳妥的三页结构首页index.html、内容列表页、详情或关于页。三页听起来少但每一页都要承载不同模块做出来已经很完整。拿「中秋节网页设计」这类主题举例首页放主视觉横幅、节日简介和导航入口列表页放节日习俗的卡片流详情页放一篇完整介绍。这样每个页面都有独立任务HTML 结构不会重复CSS 也不会因为页面太少而没东西可写。2.2 目录结构与命名规范第一版就避开路径血泪史文件规划是交付的一部分评审老师会看你的文件夹是否规范。一个可以照抄的目录结构是这样的web-final-project/ │ ├── index.html // 首页 ├── list.html // 列表页 ├── detail.html // 详情页 │ ├── css/ │ ├── common.css // 公共样式变量、重置、导航、页脚 │ ├── index.css // 仅首页使用 │ └── list.css // 仅列表页使用 │ ├── images/ │ ├── banner.jpg │ ├── card-1.jpg │ └── logo.png │ └── js/ └── main.js // 少量交互非必需这段结构的关键在于CSS 按「公共」和「页面专属」分开文件多了不会乱。命名只用小写字母和连字符图片目录就叫 images不叫图片或IMG新建文件夹。我见过最惨的一次是图片文件名带中文和空格传到老师电脑上全裂路径问题在期末作业里占掉一半以上的翻车案例目录规范是第一道防线。2.3 用 CSS 变量统一视觉从第一行代码就建立「设计规范」页面规划不止是文件规划视觉参数也要提前定。不要每个页面单独写一遍颜色和字号用 CSS 变量统一管理是现在最稳妥的做法。打开 css/common.css第一段就写变量:root { --primary-color: #b33a2c; /* 品牌色节庆主题的红棕 */ --secondary-color: #f5e8c8; /* 底色米黄 */ --text-color: #333333; /* 正文颜色 */ --font-size-body: 16px; --font-size-title: 28px; --radius-card: 12px; --space-page: 24px; } body { margin: 0; font-family: Microsoft YaHei, PingFang SC, sans-serif; background-color: var(--secondary-color); color: var(--text-color); line-height: 1.7; }这段代码的意图是把「设计决策」集中到一处。以后你想换主题色只需要改--primary-color这一行所有引用它的页面和元素同时变化不用每个 class 去找。注意:root在 HTML 里对应html根元素它的优先级比html选择器高一层变量在这里声明最合适。字体栈里先放中文优先字体再放系统通用字体避免去引用外部字体文件导致离线打不开。3. 用 HTML CSS 搭出主体页面卡片、栏栅和导航怎么落地3.1 导航栏与页脚全站复用模块的固定写法导航栏和页脚是每个页面都有的模块HTML 结构要写成全站统一的形式。导航栏的最稳写法是header包一个列表而不是一堆散落的div。HTML 结构先立住header classsite-header nav classnavbar div classlogo a hrefindex.htmlimg srcimages/logo.png alt中秋/a /div ul classnav-menu lia hrefindex.html classactive首页/a/li lia hreflist.html节日习俗/a/li lia hrefdetail.html节日详情/a/li /ul /nav /header导航列表用语义化标签ul而不是div堆叠评审时能看到你对 HTML 语义有意识。逻辑说明.active类放在当前页面对应的链接上高亮当前页logo 用图片加 alt 属性alt 不是随便写的是给盲人读屏和图片加载失败时看的期末作业里写上能加分。下面配套 CSS.site-header { position: sticky; top: 0; background-color: var(--primary-color); padding: 0 var(--space-page); z-index: 100; } .navbar { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; height: 64px; } .nav-menu { display: flex; gap: 32px; list-style: none; } .nav-menu a { color: #fff; text-decoration: none; padding: 8px 4px; border-bottom: 2px solid transparent; transition: border-color 0.2s ease; } .nav-menu a:hover, .nav-menu a.active { border-bottom-color: #ffd97a; }说明几个关键参数display: flex是现在所有布局的基础逻辑配合justify-content: space-between让 logo 和菜单各顶两端gap: 32px控制菜单项间隔别再用 margin 逐个加。position: sticky配合top: 0让导航滚动时吸顶这个效果既实用又能在作业展示时体现交互细节。页脚和导航同理用footer.site-footer写三列联系方式或版权信息同样用一个公共 class 放在 common.css 里所有页面复制同一段 HTML 就能复用。3.2 卡片式列表布局flex 栅格与 hover 过渡参数列表页list.html是作业里最能体现 CSS 功底的一页。常见做法是一组卡片横向排列卡片包含图片、标题、一句话摘要。HTML 骨架如下section classcard-grid article classcard img srcimages/moon.jpg alt赏月 h3赏月/h3 p八月十五赏月是中秋最核心的习俗家人围坐庭院。/p a hrefdetail.html classcard-link了解详情/a /article !-- 复制 card 结构生成更多卡片 -- /section这里是 3 列还是 4 列由 CSS 决定而不是 HTML。card-grid的样式如下.card-grid { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; } .card { width: 300px; background-color: #fff; border-radius: var(--radius-card); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); } .card img { width: 100%; height: 180px; object-fit: cover; display: block; }核心参数是object-fit: cover它保证图片无论原始尺寸如何都会被裁剪填满 180px 高度的卡片头不会压扁变形。overflow: hidden是为了让图片圆角生效否则图片直角会漏出来。hover 的translateY(-6px)是悬浮上浮 阴影加深是最廉价也最出效果的交互。这里有个容易被忽略的点过渡写在原状态而不是 hover 状态即transition要放在.card里而不是.card:hover里这样鼠标移出时也会有平滑归位动画。3.3 图片轮播或横幅用纯 CSS 实现自动切换的替代方案很多同学以为轮播必须写 JavaScript其实期末作业阶段用 CSS 做横幅切换完全够用还能避开 JS 调试的坑。这里用一个input加label的经典 Hack 实现静态度切换适合展示三张图。HTML 结构如下div classslider input typeradio nameslider idslide-1 checked input typeradio nameslider idslide-2 input typeradio nameslider idslide-3 div classslides div classslide stylebackground: url(images/banner-1.jpg) center/cover;/div div classslide stylebackground: url(images/banner-2.jpg) center/cover;/div div classslide stylebackground: url(images/banner-3.jpg) center/cover;/div /div div classslider-nav label forslide-1/label label forslide-2/label label forslide-3/label /div /div原理是单选框只选一个的特性配合label for点击切换。CSS 必须写清楚兄弟选择器逻辑.slider { position: relative; height: 360px; overflow: hidden; } .slides { display: flex; width: 300%; height: 100%; transition: transform 0.5s ease; } .slide { width: 33.333%; height: 100%; } #slide-1:checked ~ .slides { transform: translateX(0); } #slide-2:checked ~ .slides { transform: translateX(-33.333%); } #slide-3:checked ~ .slides { transform: translateX(-66.666%); }width: 300%是因为有三张图一张占屏宽三分之一整体排成一行切换的实质是改变transform: translateX的百分比。选中的单选按钮在 DOM 顺序上必须排在.slides前面~通用兄弟选择器才能生效这是实现前提。底部三个label显示为小圆点点击等价于选中对应 radio。需要注意这套方案切换需要手动点若想自动轮播还是要引入少量 JS但期末静态展示场景手动切换更可控不会出现定时器反复激活的诡异问题。4. CSS 3D 与动效让期末作业在答辩时有记忆点4.1transform: rotateY(60deg) translateZ(300px)出来是什么样这是最近被问得最多的一个 CSS 问题说明很多人在网上抄了 3D 相册的代码但不理解效果。拆开看rotateY(60deg)是让元素绕 Y 轴垂直方向旋转 60 度元素会像门板一样转过来translateZ(300px)是在旋转之后的局部坐标系里沿 Z 轴向屏幕外移动 300px。两者叠加的效果是元素先转身然后朝你面前拉近。放在perspective透视容器里你会看到一个斜着悬浮的图片卡片。很多人理解不了是因为先rotate再translate与先移动再旋转的最终位置完全不同CSS 变换的坐标系跟随元素自身不是固定不变的。要稳定做出环绕相册效果核心规则是「先给父容器设perspective: 1000px子元素再逐个rotateY(角度) translateZ(半径)角度等差递增」。这个规则我在下面的 3D 卡片相册里直接给出可用代码。4.2 CSS 涟漪光圈扩散效果两种实现及参数调整热搜里出现了大量「css涟漪光圈扩散」这个效果被用在按钮、主题图、背景装饰上。原理是不断放大一个圆形的边界并降低其透明度视觉上形成水波纹。最简单的方式是animation配合box-shadow扩散.ripple { width: 80px; height: 80px; border-radius: 50%; background: rgba(179, 58, 44, 0.4); animation: ripple 2s ease-out infinite; } keyframes ripple { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.5); opacity: 0; } }这段代码里infinite让动画循环播放scale(2.5)是最终放大倍数。但这个方法有个视觉瑕疵只有一层圆在放大缺少连续波感。进阶做法是叠加伪元素让两个不同延时的圆叠在一起.ripple::after { content: ; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ripple 2s ease-out 1s infinite; }延时参数1s正好是 2s 周期的一半第二个圆会在第一个圆扩散到一半时启动形成一前一后的波峰。需要注意用::after时父元素必须position: relative否则伪元素会跑到页面上其他位置这一点很多人踩过。4.3 一个可交作业的 3D 旋转相册完整实现把前面两点合起来做一个六张图的 3D 环绕相册放在首页底部是整个作业的视觉高光。HTML 结构如下div classstage div classalbum div classphoto styletransform: rotateY(0deg) translateZ(300px) img srcimages/photo-1.jpg alt纪念 /div div classphoto styletransform: rotateY(60deg) translateZ(300px) img srcimages/photo-2.jpg alt纪念 /div div classphoto styletransform: rotateY(120deg) translateZ(300px) img srcimages/photo-3.jpg alt纪念 /div div classphoto styletransform: rotateY(180deg) translateZ(300px) img srcimages/photo-4.jpg alt纪念 /div div classphoto styletransform: rotateY(240deg) translateZ(300px) img srcimages/photo-5.jpg alt纪念 /div div classphoto styletransform: rotateY(300deg) translateZ(300px) img srcimages/photo-6.jpg alt纪念 /div /div /divCSS 如下重点在 stage 的透视参数.stage { perspective: 1200px; display: flex; justify-content: center; align-items: center; min-height: 420px; } .album { position: relative; transform-style: preserve-3d; width: 200px; height: 150px; animation: spin 18s linear infinite; } .photo { position: absolute; inset: 0; border: 4px solid #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); } .photo img { width: 100%; height: 100%; object-fit: cover; } keyframes spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }逻辑说明写三处关键perspective: 1200px定义观察者距离场景的远近值越小透视越强烈preserve-3d必须写在.album上否则子元素会被压平在父容器平面内效果直接消失每张照片的实际位置由行内transform决定角度步长是 360/660 度半径 300px 决定环绕圆的大小。如果你想让相册停住让老师仔细看某一面可以删掉animation: spin改为给.album:hover暂停比如animation-play-state: paused这个小细节演示时会显得考虑周全。5. 网页设计作业常见问题排查样式失效、图片不显示和乱码的典型坑5.1 页面打开后 CSS 完全没有生效现象双击 index.html页面只有文字没有颜色、没有布局或者样式和预览时完全不一样。原因优先级排序外部样式表路径写错 引入方式用错 浏览器缓存 HTML 结构关闭标签缺失。检查顺序是先打开浏览器 F12在 Console 里看有没有红色报错再看 network 面板里的 css 文件是否 404。解决路径确定 html 文件与 css 文件夹的相对位置css/common.css是相对于 index.html 的路径如果 index 放进了子目录路径要改成../css/common.css。注意link标签的写法link relstylesheet hrefcss/common.cssrelstylesheet是声明这是一个样式表少写或不写都不会生效。最后一步是强制刷新macOS 用 CommandShiftRWindows 用 CtrlShiftR排除缓存干扰。5.2 CSS 样式用file://协议打开时被安全策略拦截现象老师把作业打包发到微信或者你把整个文件夹从桌面搬到了别的目录双击打开后背景图、字体、动画全没了控制台报错里有file:///C:/...的路径被拒绝。原因现代浏览器对本地文件的 CSS 访问有安全限制尤其是 CSS 里的import方式引入另一个 CSS 文件。解决不要用import引入样式一律改用link标签图片路径用相对路径不要用C:/Users/...这种绝对本地路径。你的作业要保证在任何一台电脑上双击就能完整显示所以全程相对路径是最稳的。如果用了 CSS 动画类的代码也注意不要依赖在线 CDN 字体和图标库交付前把所有资源下载到本地 images 或 fonts 目录。5.3 图片显示为一个小图标或直接不渲染现象卡片里的图片位置只有一个破碎图或者一个 alt 文字。最常见原因文件名大小写不一致。图片叫Moon.JPGHTML 里写的moon.jpgWindows 桌面环境不敏感但评审电脑和 Web 服务器都是要区分大小写的如果作业后来迁移到服务器就会翻车。解决所有图片文件统一改为小写字母加连字符例如moon-festival.jpg不要用空格和中文。另外检查图片是否在外层容器里被overflow: hidden裁剪掉了高度——img写在div里div 没有高度图片会把高度挤出来导致布局乱掉。给图片外层容器设置固定高度再给img加object-fit: cover三行代码规避 90% 的图片高度问题。5.4 检查元素时样式后面画了删除线颜色标黄现象F12 里能看到自己写的类名但属性被划掉表示这个属性被更高优先级的规则覆盖了。原因CSS 优先级计算规则是「同一元素选择器越具体越优先」.nav-menu li a的优先级高于.nav-menu a后者就被划掉另外注意 hover 状态下的样式会被动态伪类覆盖。解决不要用!important硬刚那是最后的后悔药而不是常规手段。先检查是不是同优先级下后写的规则覆盖了先写的在同一个文件里调整顺序即可如果是页面级样式和公共样式冲突就提升选择器层级受影响的元素加一个更具体的祖先路径。排查优先级最笨但最有效的方式是把 CSS 里同名类搜索出来数一下选择器的 id、class、标签数量。5.5 HTML 里出现乱码或问号中文显示异常现象html 文件里写的中文在浏览器里变成乱码或 title 显示??。原因文件编码不是 UTF-8或者是 UTF-8 但少了编码声明。解决在head最前面写meta charsetutf-8这是 html5 的标准做法同时确认编辑器右下角编码格式选择 UTF-8。如果你是复制别人的代码发现文件里已经写了一行meta http-equivContent-Type contenttext/html; charsetutf-8这两者作用相同但 html5 更简洁保留一个即可多了反而可能在特定环境下报错。6. CSS 引入方式对比与交作业前的打包自检最后一步很多人栽在交付上。CSS 有三种引入方式行内样式写在标签的style属性里内部样式写在head里的style标签中外部样式用link引入独立文件。期末作业统一下场是外部样式因为评审老师要的是工程化意识。三种方式对比可以让你在答辩时说出明确选择理由引入方式代码位置适用场景维护难度行内样式标签div stylecolor单独定制一个元素高无法复用内部样式head内style单页面小作业中其他页面无法共享外部样式link relstylesheet hrefcss/common.css多页面网站低全站统一答辩时能说清「为什么不用行内样式」就赢了行内样式优先级高于外部样式且无法复用改动一处颜色需要全文搜索替换。外部样式配合变量改一行全局变色这是工程实践里最基本的思维。交作业前做一次最终自检按这个顺序过一遍用 Chrome 打开 index.html按 F12 看 Console 是否有红色报错依次点击所有导航链接确认每个二级页面都回得到首页把所有图片资源重命名检查一遍确认路径全为相对路径把整个文件夹压缩为 zip换一台电脑解压后再打开一次页面。我自己的习惯是最后一步一定做因为很多问题只在「换环境」后才暴露比如资源路径带了盘符、字体文件忘了放进文件夹、压缩时选错了目录层级导致解压后 index.html 跑到了子文件夹。这些细节都不难纯靠意识。希望能帮到你祝你的期末大作业一次通过。本文还有配套的精品资源点击获取