简介面向前端初学者与需要快速搭建个人展示页的用户这款HTML个人主页资源包内置背景、简洁、卡片、星空四种风格模板覆盖视觉沉浸、极简信息流、层次卡片与动态星空四类常见需求。背景模板支持自定义背景色简洁模板强调留白与色彩平衡卡片模板突出层次与空间感星空模板则通过动态效果营造氛围。下载后直接替换文字与图片即可使用无需复杂配置适合个人开发者、作品集展示、博客主页焕新、课程设计等场景。资源包共162个文件包含完整项目目录结构以样式源文件、样式成品、页面结构、图片素材、交互脚本、字体文件为主压缩包约49.32MB目录按风格分类素材齐全便于二次开发与学习。已有12654人浏览学习。每种风格均经过配色与布局细节打磨可帮助前端学习者直观理解不同样式方案也可将星空动画等模块单独提取复用直接部署为静态个人主页。1. 好看的个人主页博主推荐里最容易被低估的一句话刷到“博主推荐 html 好看的个人主页附源码”这个标题的人十有八九不是不会写代码而是已经翻遍了模板站存了一堆半成品结果没有一个是看着顺眼、又能一次性改完就敢丢出去的。个人主页难得不在技术而在于它同时要解决两件事让访客在 5 秒内知道你是谁让代码在你走后还能被你自己维护。博主推荐的价值恰恰是把这两件事的踩坑路径帮你走了一遍——别人用 HTML 和 CSS 做出的页面不需要后端、不需要数据库双击就能打开部署到任意静态托管平台就能上线这才是它经久不衰的原因。这篇文章不教你造轮子只给你一套可以直接抄的个人主页实现方案。我会把一个可复现的单文件 HTML 个人主页从结构、样式到交互拆开讲清楚并覆盖部署和排错。适合三类人准备找实习或跳槽的开发者、想把自己作品串起来的独立开发者以及单纯想把个人资料页做得体面的设计师。你要是已经会用 Flexbox 和 Grid能省下不少时间。2. 先立骨架HTML 结构决定页面能长多好看2.1 模块怎么划分Hero、关于、作品、底栏一个都不能少好看的 HTML 个人主页绝大多数都遵循同一个信息架构首屏 Hero 区放名字和一句话介绍往下是“关于我”让访客快速建立信任再往下是作品集或项目展示最后一栏放版权和联系方式。这个顺序不是拍脑袋定的而是访客浏览时的注意力曲线——前 5 秒决定留不留前 30 秒决定要不要继续看作品放在第三屏正好承接住阅读兴趣。模块划分不要过度设计。见过不少人一开始就上 7 个 section结果开发到一半自己都懒得维护。我的习惯是最少 4 个模块Hero、About、Projects、Footer。如果你有博客或社交账号在 Hero 或 Footer 里加链接就行不需要单独开一屏。结构上优先用语义化标签header、main、section、article、footer能表达清楚层次比满屏div更容易让浏览器和搜索引擎理解页面在讲什么后续改样式也不用靠猜。2.2 从零开始写骨架一段可以照抄的 HTML以下是一份最小可用的单文件骨架另存为index.html就能在浏览器打开。演示数据里我用某开发者做代称你改成自己名字即可。!DOCTYPE html html langzh-CN head meta charsetUTF-8 / !-- 移动端适配关键没有这行手机上字会变大且布局错乱 -- meta nameviewport contentwidthdevice-width, initial-scale1.0 / meta namedescription content某开发者的个人主页展示项目经历与联系方式 / title某开发者 · 个人主页/title style /* 后面的 CSS 统一写在这里单文件方式方便预览和分享 */ /style /head body !-- 首屏 Hero 区名字 一句话介绍 主按钮 -- header classhero idtop div classhero-inner p classhero-kickerHELLO, I AM/p h1某开发者/h1 p classhero-sub写代码也写文档喜欢把复杂的东西讲简单。/p a classbtn href#projects看我的作品/a /div /header !-- 关于我短介绍 关键字标签 -- main section classabout-wrap idabout h2关于我/h2 p五年 Web 前端开发经验做过电商活动页、数据可视化看板 也做过几个还算能拿出手的开源小工具。/p ul classtag-list liHTML / CSS/li liJavaScript/li liUI 还原/li /ul /section !-- 作品集卡片式布局后续用 CSS Grid 排两列 -- section classprojects-wrap idprojects h2作品/h2 div classproject-grid article classcard h3某跨平台系统/h3 p一套面向小型团队的协作工具前后端分离日均处理上千条任务。/p /article article classcard h3某图像处理 Demo/h3 p用 Canvas 实现的滤镜工具支持导出处理后的图片。/p /article /div /section /main footer classfooter p© 2024 某开发者 · 用 HTML 和 CSS 手写/p /footer /body /html结构说明header classhero承担首屏视觉锚点h1在页面里只出现一次对 SEO 更友好main把“关于我”和“作品”包起来让主要内容与页脚区分开id属性是为后面的锚点导航准备的点击按钮就能平滑滚到对应区块。参数上最需要留意的是viewport缺失或写错会导致移动端字体被浏览器强制放大后面排错章我会展开说。2.3 不要一上来就用框架原生 HTML 的边界与底气这里劝退一个常见冲动刚做完结构就想引入前端框架或组件库。如果你的页面只有一屏半的内容、两三个交互原生 HTML/CSS/JavaScript 的加载速度和维护成本都远低于框架。框架适合页面多、状态多、组件复用的场景个人主页这种静态展示页引入框架等于为了开一瓶啤酒买了一套精酿设备。那什么时候该升级当你要做多语言切换、动态数据加载、多页面路由或者复杂动画时再考虑引入构建工具。在此之前单文件 HTML 的优势非常明显复制就能跑不会因为包管理器装错依赖而翻车。博主推荐的源码大多是单文件的不是因为博主偷懒而是这种交付方式对读者最友好你拿到之后改文字就能用没有任何附加成本。3. CSS 决定“好看”先定设计变量再写具体样式3.1 用 CSS 变量把配色、圆角、间距先定死“好看”这件事很主观但博主推荐里那些页面能让你一眼觉得舒服通常不是因为用了多惊艳的创意而是视觉秩序够稳定。所谓秩序就是全页面只出现 23 个主色、统一的圆角半径和间距倍数。我一般会在:root里先把这些设计变量声明好后续所有组件只引用变量不再写死数值。这样做的好处是换主题时只改一处而不是满篇找色值。以下是我常用的变量表你可以直接抄走调整变量名默认值作用--bg#f7f7fb页面背景浅色底色--card-bg#ffffff卡片背景--text#1f2937主文字颜色--muted#6b7280次要文字颜色--accent#4f46e5主题强调色用于按钮和链接--radius16px卡片、按钮的统一圆角--space24px间距基准值用calc()派生间距变量值本身也是参数--accent建议选一个饱和度中等、明度偏深的颜色大面积浅色底配亮色会有廉价感--radius控制在 1220px 之间太小显得生硬太大容易像儿童玩具。间距用基准值的倍数比如calc(var(--space) * 2)就是 48px这套方法能保证你加新模块时不需要重新“发明”间距。3.2 提升画面感的三个关键手法渐变、层级阴影、卡面动效很多页面一眼看去觉得“有设计感”靠的是三个不复杂的 CSS 手法。第一是 Hero 区背景渐变纯色背景太呆板简单的linear-gradient就能让首屏有呼吸感第二是卡片投影用box-shadow制造纵深让内容从背景里浮出来第三是 hover 动效鼠标悬停时给卡片一个轻微的位移动画访客会立刻感知到页面是“活”的。这三个手法凑齐页面基本就能达到“博主推荐”的观感线。下面是一份和上一章骨架配套的 CSS直接放进style标签里即可:root { --bg: #f7f7fb; --card-bg: #ffffff; --text: #1f2937; --muted: #6b7280; --accent: #4f46e5; --radius: 16px; --space: 24px; --shadow: 0 10px 30px rgba(0,0,0,0.06); } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--text); font-family: -apple-system, PingFang SC, Microsoft YaHei, sans-serif; line-height: 1.7; } /* Hero 区线性渐变 居中布局 */ .hero { background: linear-gradient(135deg, #eef2ff 0%, #ffffff 50%, #e0e7ff 100%); text-align: center; padding: 80px 20px; } .hero h1 { font-size: 44px; letter-spacing: 2px; margin: 8px 0 12px; } .hero .hero-sub { color: var(--muted); font-size: 18px; max-width: 520px; margin: 0 auto 28px; } /* 按钮用 accent 色做背景加 hover 微反馈 */ .btn { display: inline-block; padding: 12px 28px; background: var(--accent); color: #fff; border-radius: 999px; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; } .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35); } /* 通用区块容器 */ .about-wrap, .projects-wrap { max-width: 960px; margin: 0 auto; padding: 64px 24px; } .about-wrap h2, .projects-wrap h2 { font-size: 28px; margin-bottom: 16px; } /* 标签列表去掉圆点用圆角背景 */ .tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; } .tag-list li { background: #eef2ff; color: var(--accent); padding: 6px 16px; border-radius: var(--radius); font-size: 14px; } /* 作品卡片用 Grid 自适应两列小屏自动降为一列 */ .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space); margin-top: 24px; } .card { background: var(--card-bg); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); transition: transform 0.25s ease, box-shadow 0.25s ease; } .card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.12); } .card h3 { font-size: 18px; margin-bottom: 8px; } .card p { color: var(--muted); font-size: 14px; } .footer { text-align: center; color: var(--muted); padding: 40px 20px; font-size: 14px; }这段样式的作用逻辑是按“层级”展开的body 层定底色和字色Hero 层解决“第一眼震撼”卡片层负责内容承载动效放在交互元素上。参数上最值得关注的是grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))它让卡片在宽屏下保持两列、在窄屏下自动堆叠不需要额外写媒体查询。transition里我写了 0.2 秒和 0.25 秒两组时长按钮的反馈比卡片更快这是为了符合访客对“点击反馈要快、悬浮反馈可以稍慢”的直觉。3.3 字体排版个人主页最容易输在字号和行距上很多源码直接拿系统默认字号字会显得又大又散。我给个人主页定的字体阶梯是三档标题 2844px正文字体 1618px辅助文字 14px。行距用line-height: 1.7中文阅读性能保持在这个值附近低于 1.5 会显得拥挤高于 2.0 又太空。中文网页的难点在于字体栈。上面代码里font-family依次是-apple-system苹果设备、PingFang SCMac 中文、Microsoft YaHeiWindows 中文、最后兜底无衬线字体。不建议引远程字体库中文字体文件动辄几 MB加载慢不说还会拖慢页面打开速度违背个人主页“快速直达”的初衷。4. 手写交互与上线从本地预览到部署公网4.1 三个低成本交互平滑滚动、滚动显现、暗色模式交互不用多三个就够锚点平滑滚动、滚动到区块时淡入显现、暗色模式切换。前两个现在都可以用 CSS 实现大部分效果暗色模式只需一小段 JavaScript。先把完整的脚本代码贴出来放在/body之前script // 1. 平滑滚动全局启用所有锚点链接自动生效 document.documentElement.classList.add(js-enabled); document.querySelectorAll(a[href^#]).forEach((anchor) { anchor.addEventListener(click, (e) { e.preventDefault(); const target document.querySelector(anchor.getAttribute(href)); if (target) target.scrollIntoView({ behavior: smooth, block: start }); }); }); // 2. 滚动显现利用 IntersectionObserver 给卡片加可见类 const cards document.querySelectorAll(.card); const observer new IntersectionObserver((entries) { entries.forEach((entry) { if (entry.isIntersecting) { entry.target.classList.add(visible); // 只触发一次避免反复滚动时重复计算 observer.unobserve(entry.target); } }); }, { threshold: 0.2 }); cards.forEach((card) observer.observe(card)); // 3. 暗色模式读取 localStorage防止刷新后回退 const savedTheme localStorage.getItem(theme); if (savedTheme dark) document.body.classList.add(dark); /script配合这段 CSS滚动显现才有实际效果.card { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } .card.visible { opacity: 1; transform: translateY(0); } body.dark { --bg: #111827; --card-bg: #1f2937; --text: #f9fafb; --muted: #9ca3af; --shadow: 0 10px 30px rgba(0,0,0,0.4); }逻辑说明scrollIntoView比手动计算滚动位置省心它天然支持平滑动画。IntersectionObserver的回调里用了unobserve这是个小优化避免卡片离开视口再回来时重复触发动画。暗色模式的设计技巧是把变量覆盖放在body.dark选择器下这样所有引用 CSS 变量的样式会自动跟着变不需要单独为每个组件写一套暗色样式。参数threshold: 0.2表示卡片进入视口 20% 时才触发显现数值过小会导致卡片尚未露出就播放动画。4.2 本地预览推荐用静态服务器而不是双击文件双击index.html就能看但我不建议养成这个习惯。很多浏览器对本地文件的加载限制很严格图片、字体、模块化脚本可能因为跨域原因静默失败你看到的是“本地明明正常、部署上去才出问题”的经典翻车现场。正确的做法是起一个本地静态服务器让浏览器按照真实域名的规则去访问文件。# 方法一用 Python 自带模块适合电脑里装了 Python 的环境 cd 你的主页目录 python3 -m http.server 8000 # 方法二用 Node 生态的 serve适合前端开发者 npx serve .两条命令任选其一然后在浏览器打开http://localhost:8000。逻辑是python3 -m http.server把当前目录当作网站根目录在本地 8000 端口提供服务npx serve .同样是把当前目录静态化但会额外打印局域网地址方便你用手机在同一 WiFi 下真机调试。真机调试很重要电脑上正常的布局在手机上经常现原形这一步是省不掉的。4.3 部署到公网适合个人主页的三条路径对比本地跑通之后把页面变成能分享给别人的链接是最后一步。部署 HTML 静态站有三条常见路线按需选择部署方式适用人群成本难度Pages 类静态托管新手想最快拿到链接免费低云服务器 Nginx手上有服务器想要完整控制权按服务器计费中对象存储 CDN追求加载速度和稳定性按流量计费用量少时可忽略中Pages 类托管的操作基本是在平台里新建一个项目把文件夹拖进去平台自动生成一个公网地址。优点是不需要懂服务器就能上线缺点是绝大部分这类平台的免费额度对个人主页绰绰有余。云服务器路线适合你已经有一台机器在跑别的服务把主页放进 Nginx 的站点目录即可对象存储和 CDN 适合页面图片多、访客分布广的情况回源和缓存策略需要一点学习成本。新手我建议走第一条。部署完拿到链接先自己用手机流量访问一次正常人不会用电脑访问你的主页移动端表现决定了 90% 的第一印象。5. 避坑博主推荐的源码里最常见的 4 个翻车点5.1 图片不显示路径问题占了八成现象本地预览时头像和作品截图都能显示部署后全部裂开或者同事拿到源码后打开图片直接不渲染。原因几乎都是路径写错。HTML 里引用图片用相对路径时./images/a.png和images/a.png的基准不同前者明确指当前目录下的images文件夹后者则依赖浏览器解析当前 URL 的相对规则。另一个常见的坑是文件名大小写Windows 下不区分服务器上严格区分本地好好的图片部署到线上就 404。解决所有图片路径统一小写文件名目录名用短横线分词例如img/project-thumb.png。引用时一律以项目根目录为基准写相对路径不要用以/开头的绝对路径否则部署到子目录时会全部失效。部署后先用浏览器开发者工具 Network 面板看图片请求的状态码是 404 还是 200就能立刻定位是不是路径问题。5.2 锚点滚动失效大多数时候不是 JS 的锅现象点击“看我的作品”按钮没反应或者页面瞬间跳到目标位置而不是平滑滚动。原因往往是id和目标区块不匹配。#projects对应的 HTML 元素没有写idprojects或者同一个页面里有两个相同id浏览器只会认第一个。平滑滚动失效则要检查是不是某段样式或脚本覆盖了html元素的scroll-behavior。解决给每个目标 section 都加上唯一id并在浏览器控制台执行document.querySelectorAll([id])检查是否有重复。平滑滚动我推荐优先用 CSS 方案在样式里写一句html { scroll-behavior: smooth; }这段声明放在全局样式最前面JS 只做“阻止默认跳转”这一件事逻辑更清晰。5.3 暗色模式刷新后闪白localStorage 读取太晚现象切到暗色模式后刷新页面先闪一大片白然后才变暗。原因是脚本写在/body后面浏览器先把默认浅色背景渲染出来了脚本执行时才读取localStorage并补上dark类。这个现象在真实使用中观感很差也是很多源码没处理到的细节。解决把主题初始化脚本挪到head里在页面渲染任何可见内容之前就把dark类加上。放head的脚本不需要等 DOM 加载完成因为它只操作document.body的类名而此时 body 标签还不存在直接写document.documentElement.classList.add(dark)操作根元素即可。CSS 变量定义在:root上所以暗色样式可以写成html.dark { ... }效果一致。5.4 手机端字体突然变大又是 viewport 的锅现象电脑上精心调好的字号在手机上打开大了一倍布局稀碎。原因只有一个——缺失meta nameviewport标签。没有这个标签移动端浏览器默认按 980px 宽度渲染页面然后等比缩小等你缩放查看时字就显得特别大。解决把widthdevice-width, initial-scale1.0这段原封不动放进head。这一步其实在 2.2 节的骨架代码里已经有但很多人复制源码时会把整个 head 一起扔掉只保留 body 里的结构。排查手机端问题时先看 head 里有没有 viewport再谈其他这一条能省掉你大量时间。用浏览器开发者工具的移动端模拟器测一遍比反复拿真机试更高效。6. 进阶把“博主推荐”的模板改造成属于自己的版本拿到源码之后最重要的能力是敢于往里面加自己的私货。我给一个具体的改造思路用 CSS 变量换肤是最快的差异化方式。将:root里的--accent从#4f46e5改成#0d9488墨绿色或#db2777玫红色整个页面的气质会立刻改变这比改动布局更快地让页面“属于你”。再进一步可以在 Hero 区加一句你自己真正想说的话而不是模板里那句“I am a developer”访客对具体细节的信任感远高于漂亮的口号。另一个值得投入的细节是页面加载体验。个人主页体积很小但你可以用一张背景图替代纯色渐变把图片压缩到 100KB 以内配合loadinglazy让非首屏的图片按需加载。这套页面的潜力上限是由 HTML 与 CSS 的边界决定的当你想加博客、作品详情页时就把单文件拆成多目录项目引入一个简单的静态站点生成器但这是后话。我还想留下一个习惯建议任何从上文抄下来的参数比如字体栈、色值、间距基准动手改之前先在浏览器里前后对比一下记录下你调整了什么。我之前做一版个人主页时把圆角从 16px 改成了 4px以为会更有科技感结果整页显得廉价后来才意识到那套设计语言是依赖大圆角的。这种经验光看源码学不会只有自己调过才知道哪里能碰、哪里不能碰。博主推荐的价值就在于帮你省掉这些试错成本但最终的质感还是来自你愿意花时间打磨的那几次调整。希望这篇文章能帮你少走弯路尽快做出那个愿意分享出去的主页。本文还有配套的精品资源点击获取
