简介面向高校学生的网页设计期末大作业资源包收录多套基于 HTMLCSSJS 的静态个人主页与个人博客模板采用 divcss 布局覆盖页面结构搭建、样式美化与脚本交互等基础环节适合刚接触前端、需要完成课程作业或自学练手的初学者参考与改编。压缩包共 4261 个文件约 142.4MB以 jpg、png、gif 等图片素材和 js、css、html 页面文件为主体另含 scss、less 样式源文件与 woff、ttf、svg 等字体图标资源配套 docx 说明文档构成可直接运行的完整站点素材。目前已有 22949 人学习下载说明其在同类作业场景中认可度较高。多套模板整体风格统一、页面完整下载后可按需替换文案与图片快速搭建个人介绍、作品展示、日志列表等常见栏目省去从零构思版式与配色细节的时间也便于对照源码理解布局思路与交互实现方式。1. 先弄明白一件事个人网页就是一份浏览器能读懂的“电子展板”很多同学第一次听到“网页制作”脑子里浮现的是程序员对着黑屏敲一堆看不懂的符号。其实个人网页设计没那么玄乎。你打开浏览器看到的任何一个页面本质都是放在文件夹里的一个文本文件后缀叫.html浏览器负责把它翻译成文字、图片和按钮。你要做的不是发明浏览器而是往这份文本里填内容、调样子就像在学校门口立一块展板木板不用你造你只负责决定上面贴什么、怎么排版。大学里常见的“期末大作业”要求交一份“简单静态HTML个人网页作品”说白了就是交一个文件夹里面有首页、有自我介绍、有几张图双击能打开、能点来点去。它跟“个人网站模板”的关系就像毛坯房和样板间——模板已经把墙砌好了你进去换家具、刷墙漆就行。这篇入门就从“这到底是什么”讲到“第一个页面怎么跑起来”零基础也能跟着做。2. 从零到第一个页面先搞懂静态网页“静”在哪再跑通十行代码2.1 静态网页的“静”到底静在哪里先把这个词拆开。静态网页指的是服务器上放的是什么文件浏览器拿到的就是什么内容中间不发生“根据你是谁、你登录没登录”去数据库里查东西再拼页面的事。你可以把它想成一张印好的宣传单谁来拿都是同一张动态网站更像餐厅点餐系统你点不同的菜后厨给你出不同的单。这个区别对新手特别重要因为它决定了你第一周该学什么。个人博客、个人简历页、作品展示页绝大多数属于静态网页一个index.html放首页一个about.html放自我介绍一个works.html放作品再配一个style.css管长相。它不需要你买服务器、不需要装数据库、不需要懂后端语言一个文件夹在本地双击就能看效果。这也是为什么“个人网页制作”常被当作入门第一课——反馈快改一行字刷新一下就变不容易一开始就被环境配置劝退。静态网页的短板也要提前知道它做不了真正的留言板、登录、在线支付。想加评论功能一般是接一段第三方提供的嵌入代码想加“联系我”最稳的做法是直接放邮箱和社交账号链接。入门阶段先别碰这些把页面做出来、能看、能在手机上正常显示已经是及格线以上的期末大作业水平。2.2 零基础先学哪三样骨架、衣服、小动作网页制作的技术栈可以粗分成三层对应三个文件类型。第一层 HTML负责骨架哪里是标题、哪里是段落、哪里插图片、哪里是链接。第二层 CSS负责衣服字号多大、什么颜色、左右留多少空、手机上怎么排。第三层 JavaScript负责小动作点按钮弹个窗、导航栏收起展开、图片轮播。新手最容易犯的错是一上来就三个一起学结果 HTML 标签还没认全就去抄一段 JS 轮播代码粘进去不生效也不知道从哪查。我的建议是先把顺序定死第一周只碰 HTML 和 CSS能独立做出一个“标题 一段自我介绍 一张图 三个链接”的页面第二周再学 CSS 的布局把内容排成左右两栏或者卡片网格JavaScript 放到最后而且只学“改文字、改样式、响应点击”这三件小事就够用了。编辑器方面装一个带语法高亮的代码编辑器就行别用手机备忘录也别用带格式的文档软件——它们会偷偷往文件里塞看不见的格式符号保存出来的.html打开就是乱的。文件夹也提前规划好新建一个总文件夹比如叫my-site里面放index.html、一个css文件夹、一个images文件夹。这个习惯看着小后面能省掉一大半“图片怎么不显示”的麻烦。2.3 第一个例子十行代码做出“你好我是某某”下面这段就是最小可运行的首页。新建一个文本文件把后缀改成.html把代码粘进去保存双击打开。!DOCTYPE html html langzh-CN head !-- 这一行告诉浏览器用 UTF-8 读文件防止中文变乱码 -- meta charsetUTF-8 !-- 这一行让页面在手机上也按屏幕宽度缩放别漏 -- meta nameviewport contentwidthdevice-width, initial-scale1.0 title小A的个人主页/title /head body !-- h1 是一级标题一个页面只用一个方便搜索引擎和读屏软件识别 -- h1你好我是小A/h1 p某高校大二学生正在学网页制作这是我的第一个静态页面。/p p我喜欢摄影和跑步下面是我的a hrefabout.html自我介绍/a。/p /body /html逐块说一下。!DOCTYPE html是声明“这份文件按现代网页标准解析”不写也能打开但浏览器可能进入兼容模式样式表现会怪。head里放的是给浏览器看的信息不显示在页面上charset管编码viewport管手机适配title是浏览器标签页上那行字。body里才是用户看到的内容。h1到h6是标题数字越小级别越高p是段落每段文字都该包一层a是链接href后面写目标地址写about.html就表示同文件夹下的另一个页面。注意标签基本成对出现p开头、/p结尾漏掉结束标签是新手最常见的保存后页面“串味”的原因。想让页面好看一点在/title后面加一行link relstylesheet hrefcss/style.css然后在css文件夹里新建style.css/* body 是整页的底色和默认字体改这里影响全局 */ body { background-color: #f7f8fa; color: #222222; font-family: Microsoft YaHei, sans-serif; max-width: 720px; /* 内容最宽 720 像素避免大屏上文字拉太长 */ margin: 40px auto; /* 上下留 40 像素左右自动居中 */ padding: 0 16px; /* 小屏幕上左右留一点空隙 */ }这段 CSS 的意思是整页浅灰底、深灰字、微软雅黑字体内容区最宽 720 像素并水平居中。改background-color的值刷新底色立刻变改max-width的数字页面宽窄立刻变。第一个例子到这里就算跑通了接下来所有花活都是在这个骨架上加东西。3. 拆开一份个人网站模板导航、首屏、关于我、作品、页脚各管什么3.1 一份模板通常由哪几个文件组成拿到一份“个人网站模板”别急着改文字先看目录结构。常见的静态模板长这样文件或文件夹作用新手要不要动index.html首页访客打开网站看到的第一个页面要重点改about.html自我介绍页要内容换成自己的works.html作品或项目列表页要卡片数量可增减css/style.css全站样式颜色、字体、间距都在这要先改颜色变量js/main.js交互脚本比如移动端菜单展开先别动images/图片素材要替换成自己的图这个结构不是死规定但九成简单静态个人网页作品都是这个路子。你需要建立的心智模型是HTML 文件负责“这一页有什么内容”CSS 文件负责“所有页面长什么样”图片单独放一个文件夹方便管理。模板作者把这三者分开放就是为了让你改内容的时候不碰样式改样式的时候不碰内容。有个细节值得注意模板里的index.html和about.html会有大量重复代码比如页头导航、页脚版权信息。这不是作者偷懒而是静态网页没有“公共模板”机制每个页面都得把导航再写一遍。所以你改导航链接的时候要记得每个.html文件都改漏一个就会出现“首页能点回首页、关于页点不动”的尴尬。改之前先把整个文件夹复制一份备份这是血泪经验。3.2 页面的骨架header、nav、main、footer 分别放什么新手看模板代码容易眼花其实抓住五个语义标签就够用了。它们不产生任何视觉效果但把页面切成了有名字的区域读代码的人包括几个月后的你一眼能对上号。body !-- 页头通常放网站名或你的名字每个页面都一样 -- header classsite-header a classlogo hrefindex.html小A的主页/a /header !-- 导航链接到各个页面放在 header 里面或紧挨着 -- nav classsite-nav a hrefindex.html首页/a a hrefabout.html关于我/a a hrefworks.html我的作品/a /nav !-- 主体每个页面真正不同的内容都放这里 -- main section classhero h1你好我是小A/h1 p某高校学生喜欢摄影、跑步和写代码。/p /section /main !-- 页脚版权、联系方式每个页面也一样 -- footer classsite-footer p联系我xiaoaexample.com/p /footer /bodyheader是页头放站点标识nav是导航放跳转链接main是主体一个页面只放一个里面可以套多个section表示不同板块footer是页脚放版权和联系方式。这样切分的好处是你后面写 CSS 时可以直接写.site-nav a { ... }来统一改导航链接的样式不用给每个链接起名字。模板里常见的“首屏大标题 一句话简介”就是main里的第一个section行业里叫 hero 区。它通常配一张背景图或大号字作用是三秒内告诉访客“这是谁、做什么的”。期末大作业评分里首页首屏的信息清晰度往往比花哨动效更加分。3.3 导航和页脚怎么复制到每个页面还不乱静态网页没有include机制导航只能一个页面一个页面地复制。手工复制最怕两件事一是链接写错二是改了一处忘了另一处。一个实用的土办法是在导航代码前后加注释标记比如!-- nav-start --和!-- nav-end --改的时候整段选中替换不容易误伤旁边的代码。另一个办法是把导航做得尽量简单只放三到四个链接不搞二级下拉菜单。下拉菜单需要 CSS 定位配合新手调起来容易翻车。等你能稳定维护三个页面之后再考虑加“作品详情页”这种第四、第五个页面。页脚同理只放版权年份和联系方式。年份别写死成某一年写成“2024 - 2025”这种区间也行但交作业前记得核对一遍别让页脚写着去年的日期。这些细节不涉及技术难度纯粹是交付前的检查习惯而习惯往往比技术更能决定一份作业的完成度。4. 动手改出你自己的版本换名字、换配色、加一张作品卡片4.1 先改文字把模板里的名字、学校、专业换成自己的改模板的第一步不是改样式是改内容。打开index.html从上到下把模板作者的占位文字换成你自己的站点名、首屏大标题、一句话简介、关于我页里的经历、作品页里的项目名。这里有个小技巧先把所有要改的文字列在记事本里改一段核对一段别边想边改容易改到一半忘了自己写到哪。替换时用编辑器的“查找替换”要小心。比如你想把“张三”替换成“小A”没问题但如果你想替换“作品”这个词可能会把代码里的classworks也误伤——虽然不影响显示但会让后面的样式对不上。稳妥的做法是只替换中文正文里的词不碰引号里的英文类名。还有一个容易被忽略的点title标签里的文字也要改。它是浏览器标签页上显示的那行字交作业时老师打开一堆页面标签页全写着“Document”或者模板作者的名字观感会差很多。改完保存双击index.html逐个页面点一遍导航确认没有死链。4.2 再改颜色和字体三个变量换掉整站风格模板的样式文件通常几百行直接改容易改崩。比较稳的做法是找到文件开头的颜色定义如果模板用了 CSS 变量改起来就非常轻松/* :root 里定义的是全局变量整站引用同一套颜色 */ :root { --main-color: #2f6feb; /* 主色按钮、链接、强调文字 */ --text-color: #222222; /* 正文颜色别用纯黑太刺眼 */ --bg-color: #f7f8fa; /* 页面底色浅灰比纯白柔和 */ --card-bg: #ffffff; /* 卡片底色比页面底色亮一点形成层次 */ } /* 用法把颜色值换成 var(变量名) */ a { color: var(--main-color); } body { background-color: var(--bg-color); color: var(--text-color); }var(--main-color)的意思是“取上面定义的那个值”。你只要改:root里那三四个色值整站所有引用到的地方一起变不用一处处找。选色没有标准答案但有个新手友好的原则主色只用一个别超过两个正文用深灰不用纯黑底色用极浅的灰或米白别用高饱和度的颜色铺满整页。如果模板没用变量全是写死的十六进制色值也可以用查找替换把重复出现的那个主色统一换掉。替换前先数一下这个色值出现了多少次替换后再刷新看有没有哪个区块变得不协调——有些色值是故意用在深色背景上的统一换掉可能让文字看不清。4.3 加一张作品卡片从复制一段结构到调好间距作品页是个人网页里最能体现“这是你的东西”的部分。不用一上来做复杂的网格先加一张卡片跑通流程div classcard !-- 图片放在 images 文件夹里路径写相对路径 -- img srcimages/project-x.jpg alt模拟项目X的界面截图 h3模拟项目X/h3 p一个用 HTML 和 CSS 做的课程作业页面包含首页和详情页。/p a href# classcard-link查看详情/a /div.card { background: var(--card-bg); border-radius: 8px; /* 圆角数值越大越圆 */ padding: 20px; /* 卡片内边距内容不贴边 */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* 淡淡的阴影制造悬浮感 */ max-width: 320px; } .card img { width: 100%; /* 图片宽度撑满卡片 */ height: 180px; /* 固定高度避免不同尺寸图片把卡片撑得参差不齐 */ object-fit: cover; /* 裁切填充不变形 */ border-radius: 6px; }object-fit: cover是新手最该记住的一条没有它竖图会被压扁、横图会被拉长有了它图片按比例裁切填满设定区域视觉上整齐很多。卡片本身用padding留内边距、border-radius做圆角、box-shadow加一点阴影这三样加起来就是常见的“卡片感”不需要图片素材也能做出层次。加完一张卡片复制这段结构就能变成三张、四张。想让它们横排在父容器上加display: flex; gap: 16px; flex-wrap: wrap;gap控制卡片间距flex-wrap保证屏幕窄的时候自动换行。这三个属性组合是新手做作品列表最省事的方案比调浮动和定位稳得多。5. 新手最容易翻车的五个地方路径、乱码、手机端、标签闭合、文件位置5.1 图片显示不出来只有一个裂图图标现象代码里明明写了img src图片.jpg打开页面却是一个破图标或者干脆空白。原因九成是路径写错了。浏览器找图片是相对于当前.html文件的位置去找的。如果你的页面在根目录图片在images文件夹里src就必须写images/图片.jpg不能只写文件名。另一种常见情况是文件名大小写不一致文件叫Photo.JPG代码里写photo.jpg在 Windows 上可能碰巧能显示换台电脑或者传到网上就失效。解决把图片和页面放在同一个总文件夹下统一用相对路径文件名全部用小写英文加短横线比如project-x.jpg别用中文名和空格。改完刷新页面还不行就打开浏览器开发者工具看 Network 面板红色那条会直接告诉你它在找哪个路径。5.2 中文全变成问号或方块现象页面里的中文显示成“锟斤拷”或者一排问号。原因文件保存的编码和浏览器读取的编码不一致。meta charsetUTF-8写了但文件本身不是按 UTF-8 保存的或者这行根本没写浏览器按默认编码去猜。解决先在head里确认有meta charsetUTF-8然后用编辑器的“另存为”或状态栏把文件编码改成 UTF-8重新保存。注意不要用带格式的文档软件编辑.html它保存时可能加上自己的编码声明把页面搞乱。5.3 电脑上好看手机上挤成一团现象在电脑浏览器里排版正常用手机打开或者把窗口拉窄文字溢出、卡片重叠、导航挤成两行。原因一是漏了meta nameviewport contentwidthdevice-width, initial-scale1.0手机浏览器会按桌面宽度渲染再缩小二是布局用了固定像素宽度比如width: 1200px窄屏放不下。解决先补上 viewport 那行再把固定宽度改成max-width加百分比卡片列表用flex-wrap: wrap让它自动换行。判断标准很简单把浏览器窗口从宽拉到窄页面不出现横向滚动条、文字不被截断就算过了一遍基础检查。期末大作业如果只在一个屏幕尺寸下好看答辩时用手机一打开就容易露馅。5.4 复制来的代码一保存页面就“失效”了现象从网上抄了一段代码粘进去保存页面样式全乱或者标签直接显示在页面上。原因两个高发点。一是标签没闭合比如div开了没关浏览器会自己猜着补猜错就把后面的内容全包进去了。二是粘进了全角符号中文输入法下的引号、分号、括号在代码里不合法浏览器不认。解决粘完代码先把输入法切到英文检查引号是不是直的、分号是不是半角;再用编辑器的括号匹配功能点一下开标签看它有没有高亮对应的闭标签。新手阶段宁可手打也不要整段复制手打的过程就是记标签的过程。5.5 本地能打开交上去样式全丢现象在自己电脑上双击index.html一切正常压缩包发给老师或者传到网上页面变成纯文字。原因css文件夹没一起打包或者link标签里的路径写成了自己电脑的绝对路径比如C:\Users\...\style.css。绝对路径只在你本机有效换台机器就断。解决交作业前把整个my-site文件夹压缩不要只挑.html文件样式引用一律用相对路径css/style.css。养成一个习惯改完页面把整个文件夹复制到另一个位置再打开一次能正常显示才算真的没问题。这个动作花不了一分钟但能避免“做了两周、交上去零分”的翻车。6. 从“能打开”到“敢给人看”下一步学什么、拿什么练手页面能打开之后很多人会卡在“接下来学什么”上教程太多方向太散今天看布局明天看动画最后什么都没做完。我的建议是按“能立刻用上”的顺序排而不是按知识体系的完整度排。下面这张表是我会给零基础同学排的四周节奏你可以照着改阶段学什么拿什么练第一周HTML 常用标签、CSS 颜色与字体把首页文字和配色换成自己的第二周Flex 布局、间距与卡片把作品页改成三张卡片横排第三周媒体查询、手机端适配把窗口拉窄修到不横向滚动第四周一点点 JavaScript点击切换做一个“展开/收起”的自我介绍第一周的目标不是“学完 HTML”而是“能独立改一个页面”。第二周重点攻 Flex因为它能解决新手 80% 的排版问题导航横排、卡片横排、内容左右分栏都是它。媒体查询只要记住一个写法media (max-width: 600px) { ... }里面写窄屏下要覆盖的样式比如把横排改成竖排、把字号调小。JavaScript 不用急着系统学。先做一个最小交互点按钮显示隐藏一段文字。需要用到document.querySelector选中元素、给按钮加addEventListener监听点击、改元素的style.display。这三步能跑通你对“脚本在干什么”就有实感了再回头看书就不容易犯困。资源使用上也有个顺序建议先拿模板跑通再拿模板改最后才尝试从空白文件写。很多人一上来就想“我要原创”结果卡在第一个页面出不来热情耗光。用模板不丢人期末大作业考察的是你能不能把内容组织清楚、把页面调到自己满意而不是背下所有标签。我第一次带同学做个人网页时有个同学改到一半把style.css删了理由是“想重新写一份更干净的”结果两天都没恢复回原来的样子。从那以后我每次动模板之前都强制先把整个文件夹复制一份、改名加日期再开工改崩了直接换回来十分钟的事。这个习惯比任何技巧都值钱。希望帮到你。本文还有配套的精品资源点击获取