简介这份资源面向正在准备网页设计期末大作业的大学生与网页制作初学者提供多套可直接参考的静态个人网页、个人博客与网站模板帮助解决作业数量多、无从下手、找不到合适模板等常见困扰。压缩包共4261个文件约142.4MB以jpg、png、gif等图片素材和js、css脚本样式为主配合html页面、scss与less预编译样式、woff/ttf字体文件以及docx说明文档构成完整的divcss框架代码体系页面画面精美结构规范。目前已有22943人学习下载热度较高。读者可从中获得多套符合学校期末作业水平的完整源码覆盖个人主页、博客等常见题材便于对照学习页面布局、样式组织与交互实现也能按模块快速替换素材与文案适合作为课程设计、期末考核的参考方案与练手素材。1. 从一份“交作业级”静态网页说起为什么它反而适合拿来练手很多同学第一次做个人网页都是被期末大作业逼出来的。打开编辑器新建一个index.html写两行标题然后卡在“接下来该放什么”上。这份个人网站模板就是冲着这个场景来的它是一套纯静态的 HTML 个人网页作品包含首页、个人简介、博客列表、作品展示这几个典型页面没有后端、没有数据库、不需要装任何环境双击就能在浏览器里打开。适合谁适合刚学完 HTML 和 CSS、想找一个结构完整又不至于看不懂的参考项目的人也适合需要快速交一份个人网页设计作业、但不想从零搭骨架的人。它不炫技但页面结构、样式组织、文件划分都是按真实项目习惯来的拿来改比拿来抄更有价值。2. 项目结构拆解静态站点的目录怎么分才不乱2.1 先看整体目录长什么样拿到一份静态网页模板第一件事不是急着改颜色而是先看清楚它的目录划分。这套模板的典型结构大致是这样personal-site/ ├── index.html # 首页 ├── about.html # 个人简介页 ├── blog.html # 博客列表页 ├── works.html # 作品展示页 ├── css/ │ ├── reset.css # 浏览器默认样式重置 │ ├── style.css # 主样式文件 │ └── responsive.css # 响应式适配 ├── js/ │ └── main.js # 交互脚本 ├── images/ │ ├── avatar.jpg # 头像 │ └── works/ # 作品配图 └── fonts/ # 图标字体可选这个划分方式很朴素但符合静态站点的基本工程习惯页面放根目录样式按职责拆成三个文件脚本单独一个目录图片按用途再分子目录。很多同学把所有 CSS 塞进一个文件、所有图片堆在根目录改到后面自己都找不到哪张图对应哪个页面。这套模板至少在目录层面给了你一个可以照着抄的答案。2.2 页面之间的公共部分怎么处理静态站点最烦的就是导航栏和页脚。四个页面每个页面都复制一遍导航改一个链接就要改四处漏一处就出现“首页能跳、关于页跳不了”的玄学问题。这套模板的处理方式是导航和页脚在每个 HTML 里各写一份但结构完全一致靠统一的 class 名来控制样式。!-- 每个页面顶部的导航结构class 保持一致 -- nav classsite-nav div classnav-inner a hrefindex.html classlogo我的主页/a ul classnav-list lia hrefindex.html classactive首页/a/li lia hrefabout.html关于我/a/li lia hrefblog.html博客/a/li lia hrefworks.html作品/a/li /ul /div /nav这里的关键点是classactive这个标记。当前页面对应的导航项加上activeCSS 里就能给它单独上色或加下划线。你新增页面时只要复制这段导航、把active挪到对应的li上就行。参数上唯一要注意的是href的路径如果页面都在根目录直接写文件名如果以后把博客放进blog/子目录路径就要改成../index.html这是新手最容易翻车的地方。2.3 样式文件的加载顺序有讲究reset.css、style.css、responsive.css这三个文件的引入顺序不能乱head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title个人主页/title link relstylesheet hrefcss/reset.css link relstylesheet hrefcss/style.css link relstylesheet hrefcss/responsive.css /headreset.css必须最先加载它负责清掉浏览器默认的 margin、padding、列表样式让后面写的样式有一个干净的起点。style.css是主体负责桌面端的布局和配色。responsive.css放最后里面用媒体查询覆盖前面的规则实现手机端适配。如果你把responsive.css放到style.css前面媒体查询里的样式会被后面的规则覆盖掉手机上看起来就跟没适配一样。这个顺序问题我见过太多人踩改了半天没效果最后发现是 link 顺序写反了。3. 核心页面实现首页布局和博客列表怎么落地3.1 首页的 Hero 区与卡片布局首页通常分两大块顶部一个 Hero 区放头像、名字和一句自我介绍下面用卡片网格展示最新博客或作品。Hero 区的实现不复杂但有几个细节决定了它好不好看!-- 首页 Hero 区 -- section classhero div classhero-inner img srcimages/avatar.jpg alt头像 classavatar h1 classhero-title你好我是 A 同学/h1 p classhero-desc某高校计算机专业在读喜欢前端和写点小工具。/p a hrefabout.html classbtn了解更多/a /div /section对应的 CSS 用 flex 做垂直居中.hero { display: flex; justify-content: center; align-items: center; min-height: 60vh; text-align: center; } .avatar { width: 120px; height: 120px; border-radius: 50%; /* 圆形头像 */ object-fit: cover; /* 防止图片变形 */ }object-fit: cover这个属性值得单独说一句。头像图片如果不是正方形不加这行就会被拉伸变形脸变扁或者变长。加上之后图片会按比例裁剪填满容器视觉上正常很多。min-height: 60vh让 Hero 区至少占屏幕高度的 60%这样在内容少的时候页面也不会显得空。3.2 博客列表用 Grid 还是 Flex博客列表页是典型的“一列卡片”布局。这套模板用的是 CSS Grid.blog-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; padding: 40px 20px; }repeat(auto-fill, minmax(300px, 1fr))这行的意思是每列最小 300px最大平分剩余空间能放几列放几列。屏幕宽就三列屏幕窄就两列再窄就一列不需要写一堆媒体查询。gap: 24px控制卡片之间的间距比用 margin 一个个调要省事得多。如果你更习惯 Flex也可以写成display: flex; flex-wrap: wrap;但 Flex 在最后一行卡片数量不满时对齐会有点别扭Grid 在这方面更省心。3.3 博客卡片的 HTML 结构每张博客卡片的结构保持一致方便批量复制article classblog-card a hrefblog-detail.html classcard-link img srcimages/works/post1.jpg alt文章封面 classcard-cover div classcard-body h3 classcard-title我的第一个前端项目复盘/h3 p classcard-excerpt记录一下做这个静态页面时踩过的坑……/p time classcard-date datetime2024-01-152024-01-15/time /div /a /article这里用article而不是div是因为博客卡片本身就是一篇独立的内容语义上更合适。time标签的datetime属性写标准日期格式浏览器和搜索引擎都能识别。卡片整体包在a里点击任意位置都能跳转比只让标题可点体验好。注意a里不能再套a如果你卡片里还想放“”链接就得把外层a换成div加 JS 跳转这是 HTML 的硬性规则。4. 避坑与常见问题静态页面最容易翻车的几个点4.1 图片路径大小写不一致本地能开线上 404现象在自己电脑上双击 HTML 图片正常显示传到服务器或者换台电脑就裂了。原因Windows 文件系统不区分大小写Avatar.jpg和avatar.jpg都能找到但 Linux 服务器区分大小写路径对不上就是 404。解决统一图片命名规范全部用小写字母加连字符比如avatar.jpg、post-cover.png并且在 HTML 里严格按实际文件名写。我一般会在项目根目录放一个images文件夹所有图片名手打一遍不靠复制粘贴减少出错。4.2 中文文件名导致乱码或无法访问现象图片叫我的头像.jpg本地正常部署后链接变成一串百分号编码甚至直接打不开。原因URL 对非 ASCII 字符的处理依赖服务器配置不同环境表现不一致。解决所有文件名、目录名一律用英文小写中文只出现在页面内容里不出现在文件路径里。这是血泪经验改起来麻烦不如一开始就避免。4.3 忘记写 viewport手机上字小得看不清现象电脑上排版正常手机打开整个页面缩成一团要双指放大才能看。原因缺少meta nameviewport contentwidthdevice-width, initial-scale1.0这行浏览器默认按桌面宽度渲染再缩小。解决每个 HTML 的head里都加上这行一个都不能漏。加完之后responsive.css里的媒体查询才会按预期生效。4.4 导航 active 状态漏改用户不知道自己在哪页现象从首页跳到关于页导航栏还是“首页”高亮。原因复制导航结构时忘了把active类挪到当前页对应的li上。解决每新建一个页面先复制导航第一件事就是改active的位置再写页面内容。可以给自己定个规矩导航没改完不写正文。4.5 CSS 改了没生效浏览器缓存背锅现象明明改了style.css刷新页面还是旧样式。原因浏览器缓存了旧的 CSS 文件。解决开发阶段用Ctrl F5强制刷新或者在开发者工具里勾选“禁用缓存”。上线后如果遇到同样问题可以在 link 后面加版本号比如style.css?v2强制浏览器重新加载。这个不算 bug但排查起来很浪费时间知道原因就能少走弯路。5. 二次开发与改造把这套模板变成你自己的作品5.1 换配色和字体十分钟改头换面这套模板的配色集中在style.css顶部的几个变量里如果用了 CSS 变量的话或者散落在各个选择器中。最省事的改法是先找到主色全局替换。比如原来的主色是#3b82f6你想换成绿色把所有出现这个色值的地方替换成#10b981就行。字体方面在body里改font-family推荐用系统字体栈body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Microsoft YaHei, sans-serif; }这行代码的意思是优先用苹果系统字体其次 Windows 的 Segoe UI中文优先苹方和微软雅黑最后兜底无衬线字体。这样不用引入外部字体文件加载快各平台显示也都不差。5.2 增加一个“项目详情页”的完整步骤模板里作品展示页只有列表没有详情页。想加一个详情页按这几步走第一步复制works.html重命名为work-detail.html。第二步把导航里的active挪到“作品”上。第三步把原来的作品网格替换成详情内容结构article classwork-detail h1 classdetail-title某图像处理 Demo/h1 p classdetail-meta技术栈HTML / CSS / JavaScript/p img srcimages/works/demo-cover.jpg alt项目截图 classdetail-cover div classdetail-content h2项目背景/h2 p这是我在某课程里做的一个小工具……/p h2核心功能/h2 p支持图片上传、滤镜切换、下载处理结果。/p /div /article第四步回到works.html把每张作品卡片的链接指向work-detail.html。第五步在style.css里给.work-detail加上最大宽度和居中保证长文本可读.work-detail { max-width: 800px; margin: 0 auto; padding: 40px 20px; line-height: 1.8; }max-width: 800px是经验值正文超过这个宽度眼睛左右扫视会累。line-height: 1.8让行间距舒服一点中文段落尤其需要。5.3 用 JavaScript 给博客列表加个筛选如果博客文章多了可以加一个按标签筛选的功能。先在每张卡片上加>article classblog-card>// 获取所有筛选按钮和卡片 const buttons document.querySelectorAll(.filter-btn); const cards document.querySelectorAll(.blog-card); buttons.forEach(btn { btn.addEventListener(click, () { const tag btn.dataset.tag; // 读取按钮上的标签 cards.forEach(card { // 如果标签是全部或者匹配就显示否则隐藏 const show tag all || card.dataset.tag tag; card.style.display show ? block : none; }); }); });这段代码的逻辑很直白点按钮读标签遍历卡片匹配的显示不匹配的隐藏。dataset.tag读取的就是 HTML 里style="width:16px;margin-left:4px;vertical-align:text-bottom;cursor:text;" />