简介这套合集面向大学生网页设计课程与期末大作业场景收录多套可直接使用的静态网页源码适合网页制作初学者对照学习。资源内置完整页面模板均基于divcss框架编写覆盖个人博客、个人网站、简洁作品集等常见风格可帮助解决临近期末找不到合适模板、网页数量要求较多、作业无从下手等问题也能按设计风格差异快速定位所需作品。压缩包共4261个文件、约142.4MB代码部分以html、css、js为主负责页面结构与交互效果jpg、png、gif等图片素材与woff、ttf等字体文件用于丰富视觉表现docx文档可辅助项目说明目录结构清晰方便筛选与二次改造。这套合集由csm2017整理发布已有22934人学习下载模板贴合学校期末作业常见水平画面完成度较高并包含bootstrap、material等主流样式框架相关配置既可直接提交也适合拆解学习HTML结构与CSS布局思路。1. 静态HTML个人网页为什么大学生的第一份个人作品都从它开始说到个人网页制作很多大学生的第一反应是去下载一个个人网站模板把名字和照片换掉就交差。但真到课程设计展示或者投简历的时候能拿得出手的往往是你用简单静态HTML个人网页作品把我是谁讲清楚的那一版。静态HTML个人网页本质就是一个装满 .html、.css、.js 文件的文件夹浏览器直接打开就能看不需要数据库不需要后端服务改一行代码刷新页面立刻见效。它最适合三类人要交网页设计课作业的学生想开个人博客但没有服务器预算的人想在简历里放一个点开就能看的作品链接的人。这篇笔记不背标签只讲路径页面骨架怎么搭、样式参数怎么设、模板怎么选怎么改、博客页怎么做、以及那些让人半夜抓头的坑。跟着做下来你会得到一份能放进作品集、也能持续更新的静态个人网站。2. 个人网页设计的HTML骨架页面地图、语义化标签与最小可用结构写代码之前先画页面地图这是我从做第一个个人网页作品开始就养成的习惯。很多同学打开编辑器就开写写到一半发现页面之间链接关系乱成一团最后只能在导航里堆一排点了就 404 的僵尸链接。个人网页设计的第一步不是写 HTML而是先想清楚这个站有几页、每页干什么、互相怎么跳。2.1 先画页面地图单页简历型与多页博客型怎么选大学生个人网页最常见的形态就两种单页简历型和多页博客型。单页简历型适合课程作业和求职场景所有内容都放在一个 index.html 里通过锚点或滚动浏览多页博客型适合打算长期记录学习的人通常有首页、关于页、文章列表页、文章详情页。维度单页简历型多页博客型适合场景课程作业、求职展示长期写作、学习记录页面数量1 个36 个更新频率低高维护成本最低每页要同步导航和页脚布局复杂度锚点跳转 单列长页列表页和详情页两套布局我的建议是第一次做从单页起步把一页的内容和样式理顺了再拆多页。如果确定做个人博客页面地图按下面这个结构画最不容易翻车这也是我见到的学生博客里最稳的骨架。index.html 首页自我介绍 最新文章入口 about.html 关于页个人经历、技能清单 blog.html 文章列表页标题 日期 摘要 article/ 文章详情页目录每篇一个 html works.html 课程作业 / 作品展示画地图时顺手把导航链接关系标出来每个页面顶部有同一组导航从任何一页都能回到首页。这一步做完后面写代码基本就是照着地图填空。2.2 最小可用HTML结构头部、导航、主体、页脚的骨架代码不管站点最后有几页每一页都离不开这套最小结构。我一般会直接复制这份骨架再改内容省得每次从头敲。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleA同学的个人主页_前端学习笔记/title link relstylesheet hrefcss/style.css /head body header classsite-header nav classmain-nav a hrefindex.html classlogoA同学/a a hrefindex.html首页/a a hrefblog.html博客/a a hrefworks.html作品/a a hrefabout.html关于/a /nav /header main classmain-content h1你好我是A同学/h1 p某高校计算机专业学生正在搭建自己的个人博客。/p /main footer classsite-footer p© 2025 A同学 · 个人网页作品/p /footer /body /html这份骨架里有几个参数值得单独说明。langzh-CN 告诉浏览器页面是中文charsetUTF-8 决定中文能否正常显示写错就是满屏乱码viewport 的 widthdevice-width, initial-scale1.0 是移动端正常显示的底线缺了它手机打开页面会被缩小成一团。title 建议写成名字 定位的格式老师一眼看出是谁的作业搜索引擎也更好收录。hrefcss/style.css 是相对路径意思是当前 html 文件同级的 css 文件夹里的 style.css。这个看似简单但很多人栽在路径上避坑章节我单独展开。还有一条铁律一个页面只允许一个 h1放页面最核心的标题其余小标题用 h2、h3 逐级往下不要跳级。2.3 语义化标签的职责边界为什么不要用div套div个人网页作品里header、nav、main、article、footer 这些语义标签基本是标配。它们和 div 的唯一区别是自带含义浏览器默认样式几乎一样但代码可读性完全不同。课程答辩时老师翻代码最先看的就是这里——满屏 div 嵌套和结构清晰的语义化标签给人的印象是两码事。职责边界我一般这么分header 是站点头部nav 是导航链接组main 是当前页主体内容article 是能独立成篇的内容一篇博客、一张作品卡片section 是一组相关内容的分组footer 是页脚版权。拿不准一个容器该用什么时不要硬套语义标签用 div 加一个清晰的 id 或 class 反而更好维护。这个拿不准就用 div的建议比硬背标签定义实用得多。有人会问加了语义标签样式没变化是不是没用对因为浏览器给它们的默认样式和 div 几乎一样真正的差异在结构语义上。所以你既要写语义标签也要在 CSS 里给它们定义样式两者不冲突。另外 article 里如果有发布时间用 time 标签包起来标注 datetime 属性这是加分小细节。3. 让个人网站脱离作业感的CSS参数布局、配色、字体与响应式断点HTML 是骨架CSS 是衣服。我见过太多内容不错、一看样式就露怯的大学生个人网页默认蓝色链接、纯黑正文、没有留白、颜色一堆互相打架。这一章不讲花哨特效只讲三件事怎么把样式组织起来、一套能直接抄的布局与配色参数、以及怎么让页面在手机上不裂开。3.1 CSS三种引入方式与优先级外链样式表为什么是默认答案CSS 有三种写法行内样式 style...、页面内部 style 标签、外部样式表 link 引入。行内样式优先级最高但没法复用内部样式写起来快但一个站四个页面就要复制四遍外部样式表只写一份全站共用。对于多页的个人网站模板体系外链是唯一不折磨人的选择。优先级规则记住一句话就行同样权重下后加载的覆盖先加载的行内样式最高。所以你要踩坑翻车之前先看一眼是不是自己把规则写重复了。新建一个 css/style.css我一般从这段最基础的复位样式开始/* css/style.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: PingFang SC, Microsoft YaHei, Noto Sans CJK SC, sans-serif; line-height: 1.7; color: #333; background-color: #fff; }第一块是通配复位去掉浏览器默认内外边距这样各个浏览器的起点一致。box-sizing: border-box 的意思是元素的宽高包含 padding 和 border防止设置 width: 100% 再加 padding 导致内容溢出。font-family 里是一个中文系统字体栈macOS 走苹方Windows 走微软雅黑都没有就回退到 Noto CJK 和任意无衬线字体。这里最忌讳只写一个英文字体名中文没回退会掉到默认宋体页面瞬间旧十年。3.2 Flex与Grid布局参数导航栏、卡片区、双栏正文的常用写法布局部分我的习惯是导航栏用 flex卡片区域用 grid正文与侧栏用 grid 分栏。这三种写法覆盖面很广个人网站的 80% 布局场景都够了。.main-nav { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; padding: 1rem 0; } .main-nav .logo { margin-right: auto; /* logo 占左侧其余链接靠右 */ font-size: 1.25rem; font-weight: 700; }导航栏用 flex 的理由是子项天然排成一行gap 控制间距不用逐个加 margin。logo 上的 margin-right: auto 是 flex 布局的经典技巧auto 外边距会吃掉剩余空间把 logo 推到最左其余链接整体靠右。flex-wrap: wrap 让导航链接在窄屏时自动换行不至于挤成一团。.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; } .card { padding: 1.5rem; border: 1px solid #e5e5e5; border-radius: 8px; background: #fff; }卡片区用 grid 的 auto-fit minmax 组合是静态页面最省心的网格写法。grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) 的意思是尽量多放列每列最小 240px多了的宽度均分。视口只剩 500px 时放不下两列自动变成单列不需要你写额外的媒体查询来控制卡片数量。双栏正文布局同理一个 2fr 一个 1fr 就是主栏占两份、侧栏占一份如果页面窄到放不下媒体查询里把它改回单列即可。priwis 记住一个原则能用布局属性解决的不要用一堆 float 和 margin 硬怼。3.3 配色与字体参数大学生个人网页最常见的三个土味来源配色土味、字体土味、留白土味这是个人网页设计里最常见的三个问题。先说配色高饱和纯色大面积铺开是重灾区——纯红标题、纯蓝链接、亮黄背景单个看都行放一起就是弹窗广告的质感。我的默认做法是压低饱和度主色一个、强调色一个其余全部用中性色。:root { --primary: #2f6f8f; /* 主色低饱和蓝用于导航、标题、链接 */ --accent: #d97706; /* 强调色只用于 hover 和当前页高亮 */ --text: #2b2b2b; /* 正文颜色不用纯黑 */ --bg: #f7f7f5; /* 背景米白比纯白更耐看 */ } body { background: var(--bg); color: var(--text); } a { color: var(--primary); } a:hover { color: var(--accent); }CSS 变量相当于给你的主题色留了一颗后悔药想换色调只需要改 :root 里这一处全站跟着变。后面改造模板换主色时这一招最值钱。参数上我建议主色选饱和度 40% 左右的冷色强调色选互补的暖色正文和背景都用低对比度的大面积中性色就行。字体的土味主要来自两点一是全文用一种花哨字体二是字体栈里没有中文回退。我的参数表可以照抄正文 16px、行高 1.7h1 用 2rem、行高 1.3h2 用 1.5remh3 用 1.2rem小字和版权信息 0.875rem。标题就靠字号和字重区分不需要第二种字体这是最稳妥的做法。页面上下左右的留白也要舍得区块与区块之间给 48px卡片内边距 20px 以上别让文字贴着边框。3.4 响应式断点怎么设手机、平板、电脑三个宽度做完布局先别急着发布把浏览器窗口从宽拖到窄你会看到很多问题卡片挤成一条缝、导航换行乱跳、图片溢出去。响应式的起点不是媒体查询而是两行基础保护代码img { max-width: 100%; height: auto; } media (max-width: 768px) { .card-grid { grid-template-columns: 1fr; } h1 { font-size: 1.5rem; } .two-col { grid-template-columns: 1fr; } }img 的 max-width: 100% 是防溢出神技任何图片都不会撑破父容器。媒体查询是桌面优先写法max-width: 768px 意思是视口宽度小于等于 768px 时套用这些规则。我一般不追求每个像素都完美三个断点够用768px 管平板竖屏和手机横屏480px 管手机竖屏1024px 以上就按桌面布局走。断点不是死值你的内容在哪个宽度开始难看就在哪加断点初学者先从 768px 这一个抄起。4. 个人网站模板的选型与改造六个判断标准、文件结构与替换步骤用模板不丢人我自己的第一个像样的个人网页作品也是从套模板起步的。真正的问题是选错模板下了个要装依赖才能跑的或者打开一看全是压缩过的代码根本没法改。这一章把选模板和改模板的完整流程拆开照着走能省掉大半天的折腾。4.1 选模板的六个判断标准能改、能缩、能看懂选模板的核心就六个字能改、能缩、能看懂。能改指内容可以替换能缩指颜色和字号集中可控能看懂指文件结构不花哨。下面这张检查单我每次下模板前都会过一遍。判断点怎么看为什么纯静态无构建流程没有 package.json、node_modules有构建流程就要装依赖才能预览学生环境容易卡在半路文件层级清楚css/js/assets 分文件夹代码未压缩压缩后的代码没法定位、没法改自带响应式head 里有 viewportCSS 里有 media手机和桌面都要能看这是底线颜色集中在变量找 :root 或文件头部注释换主题色只改一处否则要全文搜索替换中文字体有回退font-family 栈里有苹方或微软雅黑纯英文字体栈会让中文掉回默认宋体图片可替换用的是占位图而非整页背景大图背景大图换个尺寸就崩占位图随便换这六条里第一条最坑。很多免费模板主打轻量但实际上跑了构建工具光安装依赖就能劝退一半人。判断方法很简单压缩包解压后如果第一眼看到的是一堆以 node_modules、dist、build 命名的文件夹直接关掉换下一个。个人网页模板的正道是解压后就能双击 index.html 打开。4.2 模板文件结构拆解index.html、css、js、assets的分工一个合格的个人网站模板解压后结构大致是下面这样这也是你自己动手做个人网页设计时应该保持的目录习惯。my-site/ ├── index.html ├── about.html ├── blog.html ├── css/ │ └── style.css ├── js/ │ └── main.js └── assets/ ├── images/ │ ├── avatar.jpg │ └── cover.png └── fonts/index.html 是入口页面用户访问域名后第一个加载的就是它css 目录放全部样式外部样式表一个入口就够js 目录放交互脚本比如菜单折叠、回顶按钮assets 放图片、字体、图标这类资源文件。这样拆的好处是把职责分清楚改样式去 css换图片去 assets不需要在整个项目里翻找。拿到模板先别急着改内容花两分钟把文件过一遍哪些页面导航里有引用哪些是孤立的演示页。模板自带的字重和动画脚本先保留跑起来再说。孤立页面比如 icons.html、404.html 如果导航没有链接指向可以先留着不动确认整个站跑通之后再删删之前搜一下有没有别处引用这是最常见的翻车点。4.3 替换模板内容的三必改标题、导航、首页文案模板选好、结构摸清之后进入真正换血的环节。三处必改按顺序来改完你的模板就是你的了。第一处是 title 和 meta description这是用户和搜索引擎看到的第一眼信息很多同学改完全站唯独忘了它导致浏览器标签页还挂着模板作者的名字。titleA同学的个人博客_前端学习笔记/title meta namedescription content某高校计算机专业学生的个人网页作品记录前端学习与课程项目。description 控制在 60 到 80 字简单说清你是谁、这个站有什么。第二处是导航把模板导航里用不到的链接删掉确保每个 href 都有对应的真实文件否则点击就 404。第三处是首页首屏文案我惯用一个三段式h1 写名字和定位副标题写一句话价值下面跟两到三个作品或文章入口卡片。换主色时用 3.3 里的 CSS 变量打开 css/style.css找 :root 或文件头部的颜色定义把 primary 改成你自己的主色。如果模板没做变量也没关系搜索框里搜色值如 #3498db把出现的所有位置统一替换成一色。替换头像和图片时有个血泪经验不要直接拿一张尺寸差异巨大的图覆盖同名文件先裁成和原图相近的比例再覆盖否则 CSS 里写死的宽高会把脸拉变形。5. 个人网页制作避坑指南路径、编码、缓存、兼容性的5个翻车点这一章是纯踩坑记录每条按现象 → 原因 → 解决写。这些坑我当年几乎全踩过当时觉得是玄学后来发现每条都有明确原因。你在做简单静态HTML个人网页作品时遇到同样问题直接对号入座就行。5.1 双击打开图片全裂、样式全丢相对路径与本地预览现象双击 index.html页面变成纯文字图片全裂CSS 完全没加载。原因通常有两个一是模板里用了 /assets/images/avatar.jpg 这种以斜杠开头的绝对路径它在服务器根目录下没问题但在本地 file:// 协议下会去磁盘根目录找文件自然找不到二是路径里用了反斜杠浏览器不认识。解决把代码里所有资源的引用改成相对路径写成 assets/images/avatar.jpg 或 ./assets/images/avatar.jpg。同时养成用本地静态服务预览的习惯在项目目录执行 python -m http.server 8000浏览器访问 http://127.0.0.1:8000这样本地行为和线上环境几乎一致也能提前暴露路径问题。改完之后再双击打开两种方式都应该正常。5.2 中文乱码编码参数没对齐现象页面中文变成鏂囩珷锟斤拷之类的乱码刷新也没用。原因head 里声明了 charsetUTF-8但编辑器保存时用的是 GBK 或 GB2312或者反过来。老模板很多是以 GB2312 编码保存的你下载下来在默认 UTF-8 的编辑器里打开再保存就埋下了乱码隐患。解决编辑器右下角显示编码的地方把文件重新保存为 UTF-8head 里 要写在 title 之前如果整站多个文件乱码用带编码转换功能的文本编辑器批量处理。判断到底哪一端出了问题有个技巧用浏览器开发者工具看页面响应头里的 charset 声明再和编辑器右下角的保存编码对比两边对齐就不会乱。5.3 改了CSS没反应缓存、语法错误与强制刷新现象明明把 color 改成了 red刷新页面还是旧颜色。原因分两种浏览器缓存了旧的 style.css或者 CSS 文件里某个花括号没闭合导致它后面整段规则全部失效。第二种最坑因为它表现为前半段样式正常、后半段样式失效排查起来像玄学其实是语法错误在捣鬼。解决先用 CtrlF5 强制刷新排除缓存问题还不行就打开 css/style.css从最后一条规则往前逐段检查花括号是否成对。快速定位方法用浏览器开发者工具打开 style.css 标签页看它实际解析到哪一行停住停住位置的上一行附近就是语法错误点。我的习惯是每写完一组新规则就立刻刷新验证一次把问题控制在最小范围而不是攒一整夜再统一排错。5.4 手机打开布局乱viewport与固定宽度的锅现象电脑上一切正常手机打开页面缩成一小条字小得看不清或者出现横向滚动条。原因head 里没有 viewport meta手机浏览器会默认按 980px 虚拟宽度排版再整体缩放或者 CSS 里写了 width: 1200px 这种固定宽度把布局撑死。解决head 里补上 这是移动端显示的前提。容器宽度用 max-width 加 width: 100%不要写死像素。给所有 img 加上 max-width: 100%; height: auto;图片就不会撑破容器。这三招做完手机端的布局基本不会烂到没法看。剩下的小问题再用 3.4 的媒体查询逐个收拾。5.5 导航链接404大小写、层级与相对路径现象本地预览导航一切正常传到服务器后某些页面 404或者从子页面点回首页找不到文件。原因你在 Windows 上开发时文件名大小写不敏感Blog.html 和 blog.html 都能打开但很多服务器是 Linux大小写敏感文件叫 blog.html 而链接写 Blog.html 就 404。另一个常见问题是层级在 article/ 子目录下的页面里写 hrefindex.html浏览器会去 article 目录找 index.html自然是找不到。解决全站文件名和目录名统一小写并保持链接里的写法与真实文件名完全一致。子页面回上级目录用 ../index.html回到更上级用 ../../index.html。发布前把每个页面导航里的链接挨个点一遍这事只能用笨办法但能替你省掉上线后的尴尬。6. 把模板改造成个人博客文章列表、详情页与当前页高亮的三个动作模板改造到最后一步你的目标多半是让它变成一个能持续更新的个人博客。这里分享三个我每次搭建静态博客都会做的动作全是能直接抄的。第一个动作把首页的卡片展示区替换成文章列表。复用模板里卡片的 class只换内容样式完全不碰。section classpost-list article classpost-card h2a hrefarticle/first-post.html搭建个人博客的第一篇文章/a/h2 time datetime2025-01-122025-01-12/time p记录从下载模板到改完首屏的全过程包括踩过的路径坑。/p /article /section标题用 h2 而不是 h3因为列表页的 h1 在页面顶部time 标签里的 datetime 属性是给机器读的方便以后排序。第二个动作给文章详情页定一个阅读宽度。详情页不需要满宽太宽了眼睛来回扫很累。.post-content { max-width: 40rem; /* 约 640px中文阅读舒适宽度 */ margin: 0 auto; line-height: 1.8; }40rem 换算过来大概 640px加上 1.8 的行高是中文长文阅读的舒适区间。详情页里所有文字、图片、代码块都放在这个容器里页面立刻有文章页的样子。第三个动作给当前页导航加高亮用一小段 JavaScript 判断文件名。// js/main.js const current location.pathname.split(/).pop() || index.html; document.querySelectorAll(.main-nav a).forEach(function (link) { if (link.getAttribute(href) current) { link.classList.add(active); } });location.pathname.split(/).pop() 取当前页面文件名和每个导航链接的 href 比对命中就加 active 样式。配套 CSS 写一句 .main-nav a.active { color: var(--accent, #d97706); font-weight: 600; }。这段脚本不依赖任何库两行就够效果是用户一眼知道自己站在哪个页面这也是个人博客专业性的一种体现。我现在回头看不值得做的是那种把精力全花在特效堆砌上的个人网站值得做的永远是结构清晰、更新方便、打开就快的简单静态HTML个人网页作品。这套模板改造加博客落地的流程我反复用了很多次最大的教训是每次改完一个页面先用本地静态服务把整个站的链接全点一遍再谈发布。这个习惯看着笨但替我省掉了无数上线后的尴尬。希望帮到你。本文还有配套的精品资源点击获取