个人简历单页网站制作|静态页面完整编写教程

2026-07-19 15:10 · 技术洞察
前言介绍 在求职过程中,一份清晰、专业的个人简历是获得面试机会的关键。传统的Word或PDF简历虽然通用,但无法展示你的技术能力或设计感。而一个自制的个人简历单页网站,不仅能直观呈现你的个人信息、技能和项目经历,还能直接向面试官证明你具备前端开发的基础能力。本教程将带你从零开始,使用纯HTML和CSS编写一个响应式、美观的个人简历单页网站。无论你是零基础的小白,还是想巩固基础的学习者,都能通过本教程完成一个可直接部署的静态简历页面。整个教程不依赖任何框架或库,只需一个文本编辑器和浏览器即可完成。 前置准备 在开始编写代码前,请确保你具备以下环境和工具: 1. 文本编辑器:推荐使用Visual Studio Code(免费,支持语法高亮和插件),也可以使用Sublime Text、Notepad++或系统自带的记事本。 2. 浏览器:推荐使用Chrome或Edge,用于预览和调试页面。 3. 基础文件结构:在桌面创建一个新文件夹,命名为“my-resume”。在该文件夹内创建两个文件: - index.html(主页面文件) - style.css(样式文件) 4. 图片资源(可选):准备一张个人头像照片(建议尺寸200x200像素,命名为avatar.jpg),放在“my-resume”文件夹内。如果没有照片,可以使用占位图,教程中会提供替代方案。 5. 字体图标库(可选):本教程会使用Font Awesome图标库来美化联系方式图标,你需要在HTML中引入其CDN链接(后续步骤会说明)。 分步操作步骤 1. 编写HTML基础骨架 打开index.html文件,输入以下代码构建HTML5文档基础结构。这是每个网页的起点,包含文档类型声明、语言设置、头部信息和页面主体。 ```html 个人简历 - 张三 ``` - 注意:将标签中的“张三”替换为你的真实姓名。 - <meta charset="UTF-8">确保中文正常显示。 - <meta name="viewport">使页面在移动设备上正确缩放。 - 两个<link>标签分别引入自定义样式和图标库,顺序不可颠倒。 2. 构建头部区域(个人简介与头像) 在<body>标签内,添加一个<header>元素,用于展示头像、姓名、简短职位描述和联系方式。这是简历的“门面”,需要清晰醒目。 ```html <header class="header"> <div class="header-content"> <!-- 头像:如果图片不存在,可以替换为文字占位 --> <img src="avatar.jpg" alt="个人头像" class="avatar" onerror="this.style.display='none'"> <h1 class="name">张三</h1> <p class="title">全栈开发工程师 | 3年经验</p> <div class="contact-info"> <span><i class="fas fa-phone"></i> 138-0000-0000</span> <span><i class="fas fa-envelope"></i> zhangsan@email.com</span> <span><i class="fas fa-map-marker-alt"></i> 北京市朝阳区</span> </div> <div class="social-links"> <a href="https://github.com/yourname" target="_blank"><i class="fab fa-github"></i></a> <a href="https://linkedin.com/in/yourname" target="_blank"><i class="fab fa-linkedin"></i></a> <a href="https://yourblog.com" target="_blank"><i class="fas fa-blog"></i></a> </div> </div> </header> ``` - 头像图片路径请根据实际情况修改。如果不想使用图片,可以删除<img>标签,或使用一个带首字母的圆形div替代(后续CSS会提供样式)。 - 联系方式中的电话、邮箱、地址请替换为你自己的真实信息。 - 社交链接的href属性改为你的个人主页地址,如果某个平台你没有账号,可以删除对应的<a>标签。 3. 编写主体内容区域(技能、经历、教育) 在<header>之后,添加<main>元素,包含三个核心部分:技能、工作经历、教育背景。每个部分使用<section>包裹,并设置对应的class用于样式控制。 ```html <main class="main-content"> <!-- 技能部分 --> <section class="section skills"> <h2 class="section-title"><i class="fas fa-cogs"></i> 专业技能</h2> <div class="skills-list"> <div class="skill-item"> <span class="skill-name">HTML/CSS</span> <div class="skill-bar"><div class="skill-level" style="width:90%"></div></div> </div> <div class="skill-item"> <span class="skill-name">JavaScript</span> <div class="skill-bar"><div class="skill-level" style="width:85%"></div></div> </div> <div class="skill-item"> <span class="skill-name">React</span> <div class="skill-bar"><div class="skill-level" style="width:75%"></div></div> </div> <div class="skill-item"> <span class="skill-name">Node.js</span> <div class="skill-bar"><div class="skill-level" style="width:70%"></div></div> </div> <div class="skill-item"> <span class="skill-name">Python</span> <div class="skill-bar"><div class="skill-level" style="width:60%"></div></div> </div> </div> </section> <!-- 工作经历部分 --> <section class="section experience"> <h2 class="section-title"><i class="fas fa-briefcase"></i> 工作经历</h2> <div class="experience-item"> <h3>高级前端工程师 - 某某科技有限公司</h3> <p class="date">2021.07 - 至今</p> <ul> <li>负责公司核心产品的前端架构设计与开发,使用React+TypeScript重构了3个主要模块,页面加载速度提升40%。</li> <li>带领3人小组完成移动端H5活动页面开发,实现日活用户增长20%。</li> <li>制定前端代码规范并引入ESLint+Prettier,减少代码缺陷率30%。</li> </ul> </div> <div class="experience-item"> <h3>前端开发实习生 - 某某网络公司</h3> <p class="date">2020.06 - 2021.06</p> <ul> <li>参与公司官网与后台管理系统的前端开发,使用Vue.js完成5个业务模块。</li> <li>独立完成响应式布局适配,确保页面在主流浏览器及移动设备上正常显示。</li> <li>编写单元测试用例,覆盖率达到85%。</li> </ul> </div> </section> <!-- 教育背景部分 --> <section class="section education"> <h2 class="section-title"><i class="fas fa-graduation-cap"></i> 教育背景</h2> <div class="education-item"> <h3>计算机科学与技术 本科 - 某某大学</h3> <p class="date">2017.09 - 2021.06</p> <p>主修课程:数据结构、操作系统、计算机网络、Web开发技术。GPA:3.8/4.0,获得校级优秀毕业生称号。</p> </div> </section> </main> ``` - 技能条中的style="width:90%"表示该技能的掌握程度,你可以根据实际情况调整百分比。 - 工作经历和教育背景中的内容请替换为你自己的真实经历。如果经历较少,可以适当缩减条目数量。 - 每个<section>内部使用了<h2>作为标题,并配有一个图标,让结构更清晰。 4. 添加页脚信息 在<main>之后,添加一个<footer>元素,包含版权声明和最后更新日期。这虽然不是简历的核心,但能体现专业性。 ```html <footer class="footer"> <p>© 2025 张三. 最后更新:2025年3月</p> <p>本简历页面使用纯HTML+CSS构建,开源在 <a href="https://github.com/yourname/resume" target="_blank">GitHub</a></p> </footer> ``` - 将“张三”和年份替换为你的姓名和当前年份。 - GitHub链接可以指向你的简历仓库,如果没有,可以删除该段落。 5. 编写CSS样式(全局与头部) 现在打开style.css文件,开始编写样式。首先重置浏览器默认边距,并设置全局字体和背景。 ```css /* 全局重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f6f9; color: #333; line-height: 1.6; padding: 20px; } /* 头部区域样式 */ .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-align: center; padding: 40px 20px; border-radius: 12px; margin-bottom: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .header-content { max-width: 800px; margin: 0 auto; } .avatar { width: 120px; height: 120px; border-radius: 50%; border: 4px solid white; object-fit: cover; margin-bottom: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); } .name { font-size: 2.2rem; margin-bottom: 5px; letter-spacing: 1px; } .title { font-size: 1.1rem; opacity: 0.9; margin-bottom: 20px; } .contact-info { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-bottom: 15px; font-size: 0.95rem; } .contact-info span i { margin-right: 8px; } .social-links { display: flex; justify-content: center; gap: 20px; } .social-links a { color: white; font-size: 1.5rem; transition: transform 0.3s, opacity 0.3s; } .social-links a:hover { transform: scale(1.2); opacity: 0.8; } ``` - 背景渐变色可以根据个人喜好调整(例如改为蓝色系或绿色系)。 - 头像如果不想使用图片,可以将.avatar的样式改为使用背景色和文字显示首字母(后续会提供替代方案)。 6. 编写主体内容与技能条样式 继续在style.css中添加主体区域、技能条、经历和教育部分的样式。 ```css /* 主体内容区域 */ .main-content { max-width: 900px; margin: 0 auto; } .section { background: white; padding: 30px 35px; border-radius: 12px; margin-bottom: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); } .section-title { font-size: 1.5rem; margin-bottom: 20px; color: #2c3e50; border-bottom: 3px solid #667eea; padding-bottom: 10px; display: inline-block; } .section-title i { margin-right: 10px; color: #667eea; } /* 技能条样式 */ .skills-list { display: flex; flex-direction: column; gap: 15px; } .skill-item { display: flex; align-items: center; gap: 15px; } .skill-name { width: 100px; font-weight: 600; color: #555; } .skill-bar { flex: 1; height: 12px; background-color: #e0e0e0; border-radius: 6px; overflow: hidden; } .skill-level { height: 100%; background: linear-gradient(90deg, #667eea, #764ba2); border-radius: 6px; transition: width 1s ease-in-out; } /* 工作经历和教育样式 */ .experience-item, .education-item { margin-bottom: 25px; } .experience-item:last-child, .education-item:last-child { margin-bottom: 0; } .experience-item h3, .education-item h3 { font-size: 1.15rem; color: #2c3e50; margin-bottom: 5px; } .date { font-size: 0.9rem; color: #888; margin-bottom: 10px; } .experience-item ul { list-style-type: disc; padding-left: 20px; } .experience-item li { margin-bottom: 8px; line-height: 1.5; } .education-item p { color: #555; } ``` - 技能条使用渐变背景,看起来更现代。宽度百分比对应你在HTML中设置的style属性。 - 每个section之间的间距通过margin-bottom控制,保持视觉呼吸感。 7. 编写页脚样式与响应式设计 最后,添加页脚样式,并利用媒体查询让页面在手机等小屏幕上也能良好显示。 ```css /* 页脚样式 */ .footer { text-align: center; padding: 20px; color: #888; font-size: 0.9rem; margin-top: 10px; } .footer a { color: #667eea; text-decoration: none; } .footer a:hover { text-decoration: underline; } /* 响应式设计:针对屏幕宽度小于768px的设备 */ @media (max-width: 768px) { body { padding: 10px; } .header { padding: 30px 15px; } .name { font-size: 1.8rem; } .contact-info { flex-direction: column; gap: 10px; } .section { padding: 20px 15px; } .skill-item { flex-direction: column; align-items: flex-start; } .skill-name { width: auto; margin-bottom: 5px; } .social-links { gap: 15px; } } /* 针对超小屏幕(手机竖屏)进一步优化 */ @media (max-width: 480px) { .avatar { width: 80px; height: 80px; } .name { font-size: 1.5rem; } .title { font-size: 1rem; } .section-title { font-size: 1.2rem; } } ``` - 媒体查询中的断点768px和480px是常见设备宽度,你可以根据实际需求调整。 - 在小屏幕上,联系方式由水平排列改为垂直排列,技能条由水平布局改为垂直布局,避免内容挤压。 8. 测试与微调 保存所有文件后,用浏览器打开index.html。你应该看到如下效果: - 头部:渐变背景,圆形头像,姓名,职位,联系方式图标,社交链接图标。 - 主体:白色卡片背景的技能条、工作经历列表、教育背景。 - 页脚:版权信息和GitHub链接。 如果头像图片无法显示(例如路径错误或没有图片),可以在CSS中为.avatar添加一个后备样式。例如,在.avatar规则中添加以下代码,让头像区域显示一个带首字母的圆形: ```css .avatar { /* 保留原有样式 */ background-color: #764ba2; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: white; font-weight: bold; } ``` 然后在HTML中,如果图片加载失败,可以添加一个<span>作为后备文字。修改头像部分的HTML为: ```html <div class="avatar" style="background-image: url('avatar.jpg'); background-size: cover; background-position: center;"> <!-- 如果图片加载失败,显示首字母 --> <span style="display: none;">张</span> </div> ``` 但更简单的方法是直接使用一个<div>代替<img>,并设置背景图片。如果你希望完全使用文字头像,可以直接用以下HTML替换原有头像代码: ```html <div class="avatar text-avatar">张</div> ``` 然后在CSS中添加: ```css .text-avatar { background-color: #764ba2; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: white; font-weight: bold; } ``` 请根据你的喜好选择图片或文字头像。 常见问题 1. 页面在手机上显示错乱怎么办? - 确保你已经在HTML的<head>中正确添加了<meta name="viewport" content="width=device-width, initial-scale=1.0">。 - 检查CSS中的媒体查询是否生效,可以尝试调整断点数值(例如将768px改为600px)。 - 如果某个元素溢出屏幕,可以给该元素添加overflow-x: hidden或调整padding/margin。 2. 技能条的宽度没有动画效果? - 本教程中的技能条宽度是静态的,如果你希望页面加载时有动画,可以在CSS中为.skill-level添加一个动画关键帧,或者使用JavaScript动态设置宽度。本教程保持简单,所以没有添加动画。如果你需要,可以在.skill-level中增加transition: width 1s ease-in-out,并在页面加载后通过JS修改宽度。 3. 字体图标不显示? - 检查Font Awesome的CDN链接是否正确,并且网络可以访问该CDN。如果无法访问,可以替换为其他图标库(如Bootstrap Icons)或使用Unicode符号代替。例如,电话图标可以用📞代替,邮箱用✉️。 - 确保在HTML中正确使用了<i>标签的class,例如<i class="fas fa-phone"></i>。 4. 背景图片或头像不显示? - 检查图片路径是否正确。如果是相对路径,确保图片文件与index.html在同一目录下,或者路径正确(例如images/avatar.jpg)。 - 如果使用绝对路径(以http开头),确保链接有效。 - 如果使用本地图片,建议将图片放在项目文件夹内,并使用相对路径。 5. 如何修改颜色主题? - 本教程使用紫色渐变作为主色调。你可以修改.header的background属性和.skill-level的background属性中的颜色值。例如改为蓝色系:#3498db和#2980b9,或者绿色系:#2ecc71和#27ae60。 - 同时修改.section-title的border-bottom颜色和i标签的颜色,保持整体统一。 收尾总结 通过以上八个步骤,你已经成功创建了一个完整的个人简历单页网站。这个页面包含了清晰的个人信息展示、技能可视化、工作经历和教育背景,并且适配了桌面和移动设备。你可以在本地浏览器中直接打开查看效果,也可以将整个“my-resume”文件夹上传到GitHub Pages、Netlify或任何静态托管平台,生成一个公开的在线简历链接,方便分享给招聘方。 为了进一步提升简历的吸引力,你可以考虑以下扩展方向: - 添加项目作品展示区域,使用卡片网格布局展示你的项目截图和链接。 - 引入JavaScript实现平滑滚动、技能条动画或暗色模式切换。 - 使用CSS Grid或Flexbox调整布局,使其更符合你的审美。 - 替换为更专业的字体(如Google Fonts中的Roboto或Inter)。 现在,打开你的文本编辑器,按照教程一步步操作,你将拥有一个属于自己的在线简历页面。如果在实践过程中遇到任何问题,可以回顾上述常见问题部分,或尝试在浏览器开发者工具中调试样式。祝你求职顺利!</article><div class="container related-box"><h3>相关文章推荐</h3><div class="related-list"><div class="related-item"><a href="/article-7879.html">网络推广预算不高?试试这几个低成本获客渠道</a></div><div class="related-item"><a href="/article-7878.html">建站前问清这5个问题,网站建设不再多花冤枉钱</a></div><div class="related-item"><a href="/article-7877.html">程序定制开发前,这份需求清单能帮你省下三成预算</a></div><div class="related-item"><a href="/article-7876.html">中小型公司做程序定制前先搞清这5个费用细节</a></div></div></div></section> <footer class="footer"><div class="container"><div class="footer-grid"><div><a class="brand" href="/"><img src="/uploads/logo_1779546526logo公司_看图王.png" alt="重庆挣它一个亿信息技术有限公司"></a><p>立渝州,致千里;以科技为基,以创新为刃。重庆挣它一个亿信息技术有限公司,深耕互联网服务领域,是一家专注于数字化解决方案的综合型科技企业。自成立以来,公司立足重庆、辐射全国,秉持 “技术为本、价值为纲、客户为尊” 的核心理念,以 “赋能企业数...</p></div><div><h4>核心服务</h4><a href="/#services">网站建设</a><a href="/#services">小程序开发</a><a href="/#services">软件定制</a></div><div><h4>增长能力</h4><a href="/#services">SEO优化</a><a href="/#services">系统集成</a><a href="/#services">数字化方案</a></div><div><h4>联系我们</h4><p>195-2999-8188</p><p>重庆市荣昌区昌州街道<br>迎宾大道南段22号8-2</p><p>周一至周日 9:00-18:00</p></div></div><div class="copy"><span>© <span data-year></span> 重庆挣它一个亿信息技术有限公司</span><span><a href="https://beian.miit.gov.cn/" target="_blank" style="display:inline;color:inherit">渝ICP备2023004267号-12</a></span></div></div></footer><script src="/assets/js/main.js"></script></body></html>