从零搭建个人简历网站（HTML + CSS + JavaScript 实战）
一、创建项目结构
在电脑上新建一个项目文件夹：
mkdir resume-site cd resume-site
项目结构如下：
resume-site/ │-- index.html │-- style.css │-- script.js │-- images/
二、编写首页结构
创建 index.html 文件：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>个人简历 - 张三</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <div class="container"> <h1>张三</h1> <p>前端开发工程师 | Web Developer</p> </div> </header> <section class="profile"> <img src="images/profile.jpg" alt="个人头像" class="avatar"> <h2>个人简介</h2> <p>热爱前端开发，熟悉 HTML、CSS、JavaScript 及 Vue 技术栈，追求代码的优雅与高效。</p> </section> <section class="skills"> <h2>专业技能</h2> <div class="skill-list"> <div class="skill"> <h3>HTML5 / CSS3</h3> <div class="bar"><div class="fill" style="width:90%"></div></div> </div> <div class="skill"> <h3>JavaScript / ES6+</h3> <div class="bar"><div class="fill" style="width:85%"></div></div> </div> <div class="skill"> <h3>Vue.js / React</h3> <div class="bar"><div class="fill" style="width:80%"></div></div> </div> <div class="skill"> <h3>Node.js</h3> <div class="bar"><div class="fill" style="width:70%"></div></div> </div> </div> </section> <section class="experience"> <h2>工作经历</h2> <div class="job"> <h3>前端开发工程师 - ABC科技有限公司</h3> <p>2022 年 6 月 - 2025 年 5 月</p> <ul> <li>参与企业官网和后台系统开发，使用 Vue3 + ElementPlus。</li> <li>优化网页加载速度，提升 Lighthouse 性能评分至 95 分以上。</li> <li>编写组件库并维护前端文档。</li> </ul> </div> <div class="job"> <h3>Web实习生 - XYZ信息技术</h3> <p>2021 年 7 月 - 2022 年 5 月</p> <ul> <li>负责公司活动页面的制作与动画交互实现。</li> <li>协助后端接口联调，提升前后端协作效率。</li> </ul> </div> </section> <section class="projects"> <h2>项目作品</h2> <div class="project-grid"> <div class="project-card"> <h3>博客系统</h3> <p>使用 Node.js + MongoDB 实现用户登录、文章管理与评论系统。</p> </div> <div class="project-card"> <h3>企业展示网站</h3> <p>采用原生 HTML + CSS + JS，响应式设计，适配移动端访问。</p> </div> <div class="project-card"> <h3>天气查询小程序</h3> <p>调用 API 实现实时天气查询与城市定位功能。</p> </div> </div> </section> <section class="contact"> <h2>联系方式</h2> <p>📧 邮箱：example@email.com</p> <p>📞 电话：188-0000-0000</p> <p>📍 地址：北京市朝阳区</p> <form id="contactForm"> <input type="text" id="name" placeholder="姓名" required> <input type="email" id="email" placeholder="邮箱" required> <textarea id="message" placeholder="留言内容" required></textarea> <button type="submit">发送留言</button> </form> <p id="formResponse"></p> </section> <footer> <p>© 2025 张三 | 个人简历网站</p> </footer> <script src="script.js"></script> </body> </html>
三、编写样式文件 style.css
body { margin: 0; font-family: "Microsoft YaHei", sans-serif; background-color: #f5f6f7; color: #333; } header { background-color: #0078d7; color: white; text-align: center; padding: 40px 0; } .profile { text-align: center; padding: 50px 20px; } .avatar { width: 120px; height: 120px; border-radius: 50%; border: 3px solid #0078d7; } .skills { background-color: #ffffff; padding: 50px 20px; } .skills h2, .experience h2, .projects h2, .contact h2 { text-align: center; color: #0078d7; } .skill-list { width: 80%; margin: 0 auto; } .skill { margin: 20px 0; } .bar { background-color: #ddd; height: 8px; border-radius: 4px; } .fill { background-color: #0078d7; height: 8px; border-radius: 4px; } .experience, .projects, .contact { padding: 50px 20px; } .job { margin-bottom: 30px; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .job h3 { margin-bottom: 5px; } .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 30px; } .project-card { background-color: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); transition: transform 0.2s; } .project-card:hover { transform: translateY(-5px); } .contact form { width: 80%; max-width: 400px; margin: 30px auto; display: flex; flex-direction: column; } .contact input, .contact textarea { margin: 8px 0; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } .contact button { background-color: #0078d7; color: white; border: none; padding: 12px; border-radius: 5px; cursor: pointer; } footer { background-color: #0078d7; color: white; text-align: center; padding: 20px; margin-top: 50px; } @media (max-width: 768px) { .project-grid { grid-template-columns: 1fr; } .skill-list { width: 95%; } }
四、实现交互脚本 script.js
document.getElementById("contactForm").addEventListener("submit", (e) => { e.preventDefault(); const name = document.getElementById("name").value; const email = document.getElementById("email").value; const msg = document.getElementById("message").value; document.getElementById("formResponse").textContent = `感谢 ${name} 的留言，我们会通过 ${email} 与您联系！`; e.target.reset(); }); // 动态加载动画效果 window.addEventListener("scroll", () => { document.querySelectorAll(".fill").forEach(bar => { const rect = bar.getBoundingClientRect(); if (rect.top < window.innerHeight - 50) { bar.style.transition = "width 1s ease"; } }); });
五、项目运行
打开 index.html 文件即可在浏览器查看网站。
你可以通过 VS Code 的 “Live Server” 插件快速启动一个本地服务器，实现实时预览效果。
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
2
0- 0
已为社区贡献2条内容
所有评论(0)