简介这份资源是一套可直接运行的HTML个人简介网页源码面向想练习前端布局与响应式设计的初学者和进阶学习者帮助解决从零搭建个人展示页时结构混乱、样式难调的问题。压缩包共122个文件约36.23MB包含3个html页面、10个css样式表、12个js脚本以及less、scss预处理器文件另有png、jpg、gif等图片素材和ttf、woff、eot等字体文件配套bootstrap、font-awesome、owl轮播等常用前端库覆盖页面结构、样式控制与交互效果。源码中运用h1至h6标题、p段落、img头像、a链接、ul与ol列表、div区块及header、footer等标签组织内容并通过媒体查询、flexbox或grid布局实现PC端与移动端自适应还加入过渡与动画提升观感。目前已有20811人学习下载读者可参照完整目录结构修改个人信息与CSS样式快速产出美观的个人简介页同时理解响应式设计的实现思路。1. 一份个人简介网页为什么值得你花两小时手写而不是套模板如果你正在找「HTML 制作一个美观的个人简介网页附源码」大概率不是想学标签语法而是想要一个能直接改、能直接部署、打开就好看的个人主页。我见过太多人卡在同一个地方收藏了几十套模板下载下来发现 CSS 是压缩过的、结构是嵌套七八层的 div 汤改一个头像位置要翻三百行样式最后放弃。这份方案要解决的就是这件事——用一份结构干净、注释齐全、零依赖的 HTML CSS JS 源码让你两小时内从「拿到代码」到「换成自己的信息并上线」。它适合三类人前端新手想拿一个完整项目练手把 html➕css➕js 基础语法串起来职场人需要一个比简历 PDF 更体面的个人展示页独立开发者想给自己的项目做个轻量落地页。整份代码不依赖任何框架和构建工具双击就能在浏览器打开改完直接扔到任意静态托管上就能访问。下面我按「结构怎么搭 → 样式怎么写 → 交互怎么做 → 坑在哪 → 怎么改出自己的版本」这条线把源码拆开讲透。2. 个人简介网页的骨架从!doctype html到语义化分区2.1 为什么第一行必须是!doctype html很多人复制代码时习惯从html开始把第一行丢掉结果页面在某些浏览器里进入怪异模式quirks mode盒模型计算和字体渲染全乱。!doctype html是 HTML5 的文档类型声明它告诉浏览器「按标准模式渲染」这是所有现代布局能正常工作的前提。配合html langzh-cn声明语言还能让屏幕阅读器和搜索引擎正确识别页面语种。一份个人简介页的骨架通常包含这几个语义区块头部导航、首屏介绍、关于我、技能、项目经历、联系方式、页脚。用语义标签而不是一堆 div好处是结构自解释后期改样式时你能一眼看出哪块是哪块。下面是我常用的骨架结构!doctype html html langzh-cn head meta charsetutf-8 !-- 移动端适配的关键一行缺了它手机上会按 980px 缩放 -- meta nameviewport contentwidthdevice-width, initial-scale1.0 title张三 | 前端开发工程师/title meta namedescription content张三的个人简介前端开发工程师专注交互与性能优化。 link relstylesheet hrefstyle.css /head body header classnav.../header main section idhero.../section section idabout.../section section idskills.../section section idprojects.../section section idcontact.../section /main footer.../footer script srcmain.js/script /body /html逻辑说明head里三样东西不能省——字符集、视口、标题。main包裹主体内容一个页面只用一个。每个section用 id 命名方便导航锚点跳转和 JS 定位。参数说明viewport的widthdevice-width让页面宽度等于设备宽度initial-scale1.0禁止初始缩放这两个值不要改。description控制在 80 字以内是搜索结果里显示的摘要。2.2 语义化分区怎么划分才不返工新手最容易犯的错是按视觉分块看到哪里颜色变了就切一个 div。正确做法是按内容职责分块。首屏hero放姓名、一句话定位、头像和主按钮关于我放两三段自我介绍技能用列表或标签云项目经历用卡片联系方式放邮箱和社交链接。这样划分的好处是当你后期想调整顺序或隐藏某块时直接移动整个 section 即可不会牵一发动全身。我一般会在每个 section 上加一个aria-label比如section idskills aria-label技能列表。这不是必须的但对无障碍访问友好成本几乎为零。分区确定后再往每个区里填内容顺序是先内容后样式不要一边写结构一边调颜色那样会反复推翻。3. 让页面「美观」的 CSS 三件套布局、配色、字体3.1 用 Flex 和 Grid 搭出响应式布局「美观」的第一层是布局稳。个人简介页最常用的两套布局首屏用 Flex 做水平居中技能和项目区用 Grid 做自适应网格。下面这段是首屏的核心样式/* 首屏垂直水平居中最小高度占满一屏 */ #hero { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; /* 占满视口高度注意用 min-height 而非 height */ padding: 0 24px; text-align: center; } /* 项目卡片自动换行的响应式网格 */ #projects .grid { display: grid; /* 每列最小 280px空间够就自动多排一列 */ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }逻辑说明min-height: 100vh而不是height是因为内容可能超过一屏用 height 会溢出裁切。auto-fit配合minmax(280px, 1fr)是响应式网格的经典写法屏幕宽就多列窄就单列不需要写任何媒体查询。参数说明280px是卡片的最小可读宽度低于这个值文字会挤gap控制卡片间距移动端建议不小于 16px否则手指容易误触。3.2 配色和字体三个变量定全局配色翻车是个人主页最常见的血泪经验。我的做法是只用一套 CSS 变量控制全局颜色改主题只改这几行:root { --bg: #0f1115; /* 背景深色 */ --text: #e6e8eb; /* 主文字 */ --muted: #9aa0a6; /* 次要文字 */ --accent: #4f8cff; /* 强调色按钮和链接 */ --radius: 12px; /* 统一圆角 */ } body { background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, Segoe UI, PingFang SC, sans-serif; line-height: 1.7; }逻辑说明用:root定义变量全站引用后期换配色只动这几行。字体栈优先用system-ui直接调用系统字体加载零延迟中文回退到苹方。参数说明line-height: 1.7是中文正文的舒适行高低于 1.5 会显得拥挤。强调色只用一个全站按钮、链接、下划线统一用它颜色一多就显廉价。提示深色背景配浅色文字时纯白#fff会刺眼用 #e6e8eb 这类略带灰的白更耐看。3.3 用 CSS 变量和过渡做出「高级感」高级感往往来自细节hover 时的平滑过渡、卡片的轻微上浮、按钮的阴影变化。这些都不需要 JS纯 CSS 就能做.card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius); padding: 24px; transition: transform 0.25s ease, border-color 0.25s ease; } .card:hover { transform: translateY(-4px); border-color: var(--accent); }逻辑说明transition让状态变化有过渡translateY(-4px)制造上浮错觉。参数说明过渡时长 0.20.3s 最自然超过 0.5s 会显得拖沓。半透明白色边框rgba最后一个参数是透明度在深色背景上比实色边框更柔和这是很多模板显得「贵」的小技巧。4. 交互与动效用原生 JS 做滚动动画和返回顶部4.1 滚动进入视口时淡入页面加载时所有内容一起出现会显得平。用IntersectionObserver做滚动淡入性能比监听 scroll 事件好得多// 选中所有需要动画的元素 const items document.querySelectorAll(.reveal); const io new IntersectionObserver((entries) { entries.forEach((entry) { // 元素进入视口时加上可见类 if (entry.isIntersecting) { entry.target.classList.add(is-visible); io.unobserve(entry.target); // 触发一次后停止观察省性能 } }); }, { threshold: 0.15 }); // 元素露出 15% 时触发 items.forEach((el) io.observe(el));配套 CSS.reveal { opacity: 0; transform: translateY(20px); transition: all 0.6s ease; } .reveal.is-visible { opacity: 1; transform: none; }逻辑说明IntersectionObserver在元素进入视口时回调加类触发 CSS 过渡。unobserve在触发后移除观察避免重复计算。参数说明threshold: 0.15表示元素露出 15% 就触发值越小越早出现translateY(20px)的位移不要太大2030px 足够太大像弹跳。4.2 一键返回顶部的正确实现返回顶部按钮是个人主页的标配但很多人写的版本在移动端会抖动。正确做法是监听滚动距离控制按钮显隐点击时用平滑滚动const backTop document.querySelector(#backTop); window.addEventListener(scroll, () { // 滚动超过 400px 才显示按钮 backTop.classList.toggle(show, window.scrollY 400); }, { passive: true }); // passive 提升滚动性能 backTop.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); });逻辑说明passive: true告诉浏览器这个监听器不会阻止默认滚动能显著提升移动端滚动流畅度。scrollTo的behavior: smooth实现平滑滚动不需要引入任何库。参数说明400px 是经验阈值大约一屏多一点太早显示会干扰阅读。按钮用position: fixed固定在右下角记得留出安全边距。5. 避坑与排查个人简介网页最常见的 5 个翻车点5.1 手机上文字溢出屏幕现象电脑上正常手机上一行文字超出屏幕出现横向滚动条。原因某个元素设了固定宽度如width: 800px或长英文单词/链接不换行。解决全局加* { box-sizing: border-box; }容器宽度用百分比或max-width长文本加word-break: break-word;。排查时在浏览器开发者工具里切到手机视图横向滚动条一出现就能定位到超宽元素。5.2 图片把布局撑变形现象头像或项目截图一加载整个卡片高度跳变。原因img没设尺寸图片加载前高度为 0。解决给图片显式设置width和height或用aspect-ratio占位。头像建议用border-radius: 50%加object-fit: cover保证任何比例的图都不变形。5.3 字体在别人电脑上完全变了样现象你本地用的是某款设计字体发给别人打开变成默认宋体。原因引用了本地未安装的字体又没做回退。解决字体栈里一定写完整回退链中文优先system-ui、PingFang SC、Microsoft YaHei。如果非要用特殊字体用font-face引入并压缩但个人主页没必要系统字体足够好看还快。5.4 锚点跳转被固定导航挡住现象点导航跳到「项目经历」标题被顶部固定导航栏盖住一截。原因固定导航脱离文档流锚点定位到元素顶部时被遮挡。解决给目标 section 加scroll-margin-top: 80px;值等于导航栏高度。这是最干净的方案不用写 JS 补偿。5.5 部署后样式全丢现象本地打开正常传到服务器后页面变成纯文本。原因CSS 路径写成了绝对路径或大小写不一致服务器区分大小写而本地不区分。解决统一用相对路径./style.css文件名全小写。排查时打开浏览器控制台看 Network 面板样式文件是不是 404 一目了然。6. 把源码改成你自己的内容替换清单与上线前自检拿到源码后改造成自己的版本有一套固定顺序按这个顺序走不会乱。第一步换内容把title、description、首屏姓名和一句话定位、关于我段落、技能列表、项目卡片、联系方式全部替换。第二步换视觉改:root里的五个颜色变量换头像图片调整圆角大小。第三步删冗余用不到的 section 整块删掉别留着隐藏减少维护负担。上线前我会跑一遍这张自检表检查项合格标准常见问题移动端显示手机视图无横向滚动固定宽度元素图片加载有占位不跳变缺 width/height链接可用邮箱、社交链接能点开占位符没换加载速度首屏 1 秒内可见大图未压缩标题摘要搜索结果显示正确title 没改关于部署这份代码是纯静态的扔到任意静态托管上都能跑不需要服务器和数据库。上传前把图片压缩一遍头像控制在 100KB 以内项目截图每张 200KB 以内整站体积能压到 1MB 以下打开速度会明显不一样。最后说个我自己的习惯每次改完样式我都会把浏览器窗口从最宽拖到最窄看布局在哪个宽度开始崩然后针对那个断点补一条媒体查询。个人主页不需要复杂的响应式系统三四个断点足够覆盖手机、平板、笔记本和宽屏。这套源码我前后改过十几版最大的教训是——别一上来就追求炫酷动效先把内容和布局做扎实动效是锦上添花内容才是别人愿意停留的理由。希望帮到你。本文还有配套的精品资源点击获取
HTML+CSS+JS手写个人简介网页：零依赖源码与响应式布局实战
简介这份资源是一套可直接运行的HTML个人简介网页源码面向想练习前端布局与响应式设计的初学者和进阶学习者帮助解决从零搭建个人展示页时结构混乱、样式难调的问题。压缩包共122个文件约36.23MB包含3个html页面、10个css样式表、12个js脚本以及less、scss预处理器文件另有png、jpg、gif等图片素材和ttf、woff、eot等字体文件配套bootstrap、font-awesome、owl轮播等常用前端库覆盖页面结构、样式控制与交互效果。源码中运用h1至h6标题、p段落、img头像、a链接、ul与ol列表、div区块及header、footer等标签组织内容并通过媒体查询、flexbox或grid布局实现PC端与移动端自适应还加入过渡与动画提升观感。目前已有20811人学习下载读者可参照完整目录结构修改个人信息与CSS样式快速产出美观的个人简介页同时理解响应式设计的实现思路。1. 一份个人简介网页为什么值得你花两小时手写而不是套模板如果你正在找「HTML 制作一个美观的个人简介网页附源码」大概率不是想学标签语法而是想要一个能直接改、能直接部署、打开就好看的个人主页。我见过太多人卡在同一个地方收藏了几十套模板下载下来发现 CSS 是压缩过的、结构是嵌套七八层的 div 汤改一个头像位置要翻三百行样式最后放弃。这份方案要解决的就是这件事——用一份结构干净、注释齐全、零依赖的 HTML CSS JS 源码让你两小时内从「拿到代码」到「换成自己的信息并上线」。它适合三类人前端新手想拿一个完整项目练手把 html➕css➕js 基础语法串起来职场人需要一个比简历 PDF 更体面的个人展示页独立开发者想给自己的项目做个轻量落地页。整份代码不依赖任何框架和构建工具双击就能在浏览器打开改完直接扔到任意静态托管上就能访问。下面我按「结构怎么搭 → 样式怎么写 → 交互怎么做 → 坑在哪 → 怎么改出自己的版本」这条线把源码拆开讲透。2. 个人简介网页的骨架从!doctype html到语义化分区2.1 为什么第一行必须是!doctype html很多人复制代码时习惯从html开始把第一行丢掉结果页面在某些浏览器里进入怪异模式quirks mode盒模型计算和字体渲染全乱。!doctype html是 HTML5 的文档类型声明它告诉浏览器「按标准模式渲染」这是所有现代布局能正常工作的前提。配合html langzh-cn声明语言还能让屏幕阅读器和搜索引擎正确识别页面语种。一份个人简介页的骨架通常包含这几个语义区块头部导航、首屏介绍、关于我、技能、项目经历、联系方式、页脚。用语义标签而不是一堆 div好处是结构自解释后期改样式时你能一眼看出哪块是哪块。下面是我常用的骨架结构!doctype html html langzh-cn head meta charsetutf-8 !-- 移动端适配的关键一行缺了它手机上会按 980px 缩放 -- meta nameviewport contentwidthdevice-width, initial-scale1.0 title张三 | 前端开发工程师/title meta namedescription content张三的个人简介前端开发工程师专注交互与性能优化。 link relstylesheet hrefstyle.css /head body header classnav.../header main section idhero.../section section idabout.../section section idskills.../section section idprojects.../section section idcontact.../section /main footer.../footer script srcmain.js/script /body /html逻辑说明head里三样东西不能省——字符集、视口、标题。main包裹主体内容一个页面只用一个。每个section用 id 命名方便导航锚点跳转和 JS 定位。参数说明viewport的widthdevice-width让页面宽度等于设备宽度initial-scale1.0禁止初始缩放这两个值不要改。description控制在 80 字以内是搜索结果里显示的摘要。2.2 语义化分区怎么划分才不返工新手最容易犯的错是按视觉分块看到哪里颜色变了就切一个 div。正确做法是按内容职责分块。首屏hero放姓名、一句话定位、头像和主按钮关于我放两三段自我介绍技能用列表或标签云项目经历用卡片联系方式放邮箱和社交链接。这样划分的好处是当你后期想调整顺序或隐藏某块时直接移动整个 section 即可不会牵一发动全身。我一般会在每个 section 上加一个aria-label比如section idskills aria-label技能列表。这不是必须的但对无障碍访问友好成本几乎为零。分区确定后再往每个区里填内容顺序是先内容后样式不要一边写结构一边调颜色那样会反复推翻。3. 让页面「美观」的 CSS 三件套布局、配色、字体3.1 用 Flex 和 Grid 搭出响应式布局「美观」的第一层是布局稳。个人简介页最常用的两套布局首屏用 Flex 做水平居中技能和项目区用 Grid 做自适应网格。下面这段是首屏的核心样式/* 首屏垂直水平居中最小高度占满一屏 */ #hero { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; /* 占满视口高度注意用 min-height 而非 height */ padding: 0 24px; text-align: center; } /* 项目卡片自动换行的响应式网格 */ #projects .grid { display: grid; /* 每列最小 280px空间够就自动多排一列 */ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }逻辑说明min-height: 100vh而不是height是因为内容可能超过一屏用 height 会溢出裁切。auto-fit配合minmax(280px, 1fr)是响应式网格的经典写法屏幕宽就多列窄就单列不需要写任何媒体查询。参数说明280px是卡片的最小可读宽度低于这个值文字会挤gap控制卡片间距移动端建议不小于 16px否则手指容易误触。3.2 配色和字体三个变量定全局配色翻车是个人主页最常见的血泪经验。我的做法是只用一套 CSS 变量控制全局颜色改主题只改这几行:root { --bg: #0f1115; /* 背景深色 */ --text: #e6e8eb; /* 主文字 */ --muted: #9aa0a6; /* 次要文字 */ --accent: #4f8cff; /* 强调色按钮和链接 */ --radius: 12px; /* 统一圆角 */ } body { background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, Segoe UI, PingFang SC, sans-serif; line-height: 1.7; }逻辑说明用:root定义变量全站引用后期换配色只动这几行。字体栈优先用system-ui直接调用系统字体加载零延迟中文回退到苹方。参数说明line-height: 1.7是中文正文的舒适行高低于 1.5 会显得拥挤。强调色只用一个全站按钮、链接、下划线统一用它颜色一多就显廉价。提示深色背景配浅色文字时纯白#fff会刺眼用 #e6e8eb 这类略带灰的白更耐看。3.3 用 CSS 变量和过渡做出「高级感」高级感往往来自细节hover 时的平滑过渡、卡片的轻微上浮、按钮的阴影变化。这些都不需要 JS纯 CSS 就能做.card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius); padding: 24px; transition: transform 0.25s ease, border-color 0.25s ease; } .card:hover { transform: translateY(-4px); border-color: var(--accent); }逻辑说明transition让状态变化有过渡translateY(-4px)制造上浮错觉。参数说明过渡时长 0.20.3s 最自然超过 0.5s 会显得拖沓。半透明白色边框rgba最后一个参数是透明度在深色背景上比实色边框更柔和这是很多模板显得「贵」的小技巧。4. 交互与动效用原生 JS 做滚动动画和返回顶部4.1 滚动进入视口时淡入页面加载时所有内容一起出现会显得平。用IntersectionObserver做滚动淡入性能比监听 scroll 事件好得多// 选中所有需要动画的元素 const items document.querySelectorAll(.reveal); const io new IntersectionObserver((entries) { entries.forEach((entry) { // 元素进入视口时加上可见类 if (entry.isIntersecting) { entry.target.classList.add(is-visible); io.unobserve(entry.target); // 触发一次后停止观察省性能 } }); }, { threshold: 0.15 }); // 元素露出 15% 时触发 items.forEach((el) io.observe(el));配套 CSS.reveal { opacity: 0; transform: translateY(20px); transition: all 0.6s ease; } .reveal.is-visible { opacity: 1; transform: none; }逻辑说明IntersectionObserver在元素进入视口时回调加类触发 CSS 过渡。unobserve在触发后移除观察避免重复计算。参数说明threshold: 0.15表示元素露出 15% 就触发值越小越早出现translateY(20px)的位移不要太大2030px 足够太大像弹跳。4.2 一键返回顶部的正确实现返回顶部按钮是个人主页的标配但很多人写的版本在移动端会抖动。正确做法是监听滚动距离控制按钮显隐点击时用平滑滚动const backTop document.querySelector(#backTop); window.addEventListener(scroll, () { // 滚动超过 400px 才显示按钮 backTop.classList.toggle(show, window.scrollY 400); }, { passive: true }); // passive 提升滚动性能 backTop.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); });逻辑说明passive: true告诉浏览器这个监听器不会阻止默认滚动能显著提升移动端滚动流畅度。scrollTo的behavior: smooth实现平滑滚动不需要引入任何库。参数说明400px 是经验阈值大约一屏多一点太早显示会干扰阅读。按钮用position: fixed固定在右下角记得留出安全边距。5. 避坑与排查个人简介网页最常见的 5 个翻车点5.1 手机上文字溢出屏幕现象电脑上正常手机上一行文字超出屏幕出现横向滚动条。原因某个元素设了固定宽度如width: 800px或长英文单词/链接不换行。解决全局加* { box-sizing: border-box; }容器宽度用百分比或max-width长文本加word-break: break-word;。排查时在浏览器开发者工具里切到手机视图横向滚动条一出现就能定位到超宽元素。5.2 图片把布局撑变形现象头像或项目截图一加载整个卡片高度跳变。原因img没设尺寸图片加载前高度为 0。解决给图片显式设置width和height或用aspect-ratio占位。头像建议用border-radius: 50%加object-fit: cover保证任何比例的图都不变形。5.3 字体在别人电脑上完全变了样现象你本地用的是某款设计字体发给别人打开变成默认宋体。原因引用了本地未安装的字体又没做回退。解决字体栈里一定写完整回退链中文优先system-ui、PingFang SC、Microsoft YaHei。如果非要用特殊字体用font-face引入并压缩但个人主页没必要系统字体足够好看还快。5.4 锚点跳转被固定导航挡住现象点导航跳到「项目经历」标题被顶部固定导航栏盖住一截。原因固定导航脱离文档流锚点定位到元素顶部时被遮挡。解决给目标 section 加scroll-margin-top: 80px;值等于导航栏高度。这是最干净的方案不用写 JS 补偿。5.5 部署后样式全丢现象本地打开正常传到服务器后页面变成纯文本。原因CSS 路径写成了绝对路径或大小写不一致服务器区分大小写而本地不区分。解决统一用相对路径./style.css文件名全小写。排查时打开浏览器控制台看 Network 面板样式文件是不是 404 一目了然。6. 把源码改成你自己的内容替换清单与上线前自检拿到源码后改造成自己的版本有一套固定顺序按这个顺序走不会乱。第一步换内容把title、description、首屏姓名和一句话定位、关于我段落、技能列表、项目卡片、联系方式全部替换。第二步换视觉改:root里的五个颜色变量换头像图片调整圆角大小。第三步删冗余用不到的 section 整块删掉别留着隐藏减少维护负担。上线前我会跑一遍这张自检表检查项合格标准常见问题移动端显示手机视图无横向滚动固定宽度元素图片加载有占位不跳变缺 width/height链接可用邮箱、社交链接能点开占位符没换加载速度首屏 1 秒内可见大图未压缩标题摘要搜索结果显示正确title 没改关于部署这份代码是纯静态的扔到任意静态托管上都能跑不需要服务器和数据库。上传前把图片压缩一遍头像控制在 100KB 以内项目截图每张 200KB 以内整站体积能压到 1MB 以下打开速度会明显不一样。最后说个我自己的习惯每次改完样式我都会把浏览器窗口从最宽拖到最窄看布局在哪个宽度开始崩然后针对那个断点补一条媒体查询。个人主页不需要复杂的响应式系统三四个断点足够覆盖手机、平板、笔记本和宽屏。这套源码我前后改过十几版最大的教训是——别一上来就追求炫酷动效先把内容和布局做扎实动效是锦上添花内容才是别人愿意停留的理由。希望帮到你。本文还有配套的精品资源点击获取
