辣鱼

辣鱼

茶香酒辣浑闲事，且趁朝凉听一回

如何制作一张个人简历页面（HTML + CSS 实战教程）

代码 1 浏览 7 分钟阅读
文章目录

本文将带你从零开始，使用HTML和CSS制作一张专业且美观的个人简历页面。以下是详细步骤和代码示例。

一、准备工作

1. 确定简历结构

1. 头部：姓名 + 职位 + 联系方式
2. 简介：简短的个人介绍
3. 技能：列出核心技能
4. 经验：工作/项目经历
5. 教育：学历背景
6. 其他：奖项、证书、兴趣爱好

2. 设计风格选择

  • 简约风：黑白配色，清晰排版
  • 创意风：个性化布局，适当使用图标
  • 专业风：传统布局，注重内容呈现

二、HTML结构搭建

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人简历</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="resume">
    <!-- 头部 -->
    <header class="resume-header">
      <h1>张三</h1>
      <p>前端开发工程师</p>
      <ul class="contact-info">
        <li>📧 zhangshan@example.com</li>
        <li>📞 138-1234-5678</li>
        <li>🌐 github.com/zhangshan</li>
      </ul>
    </header>

    <!-- 主体内容 -->
    <main class="resume-content">
      <!-- 简介 -->
      <section class="about">
        <h2>个人简介</h2>
        <p>3年前端开发经验，精通HTML/CSS/JavaScript，熟悉Vue.js和React框架，具备良好的代码规范和团队协作能力。</p>
      </section>

      <!-- 技能 -->
      <section class="skills">
        <h2>技能</h2>
        <ul>
          <li>HTML5 & CSS3</li>
          <li>JavaScript (ES6+)</li>
          <li>Vue.js / React</li>
          <li>Webpack / Vite</li>
          <li>Git 版本控制</li>
        </ul>
      </section>

      <!-- 经验 -->
      <section class="experience">
        <h2>工作经验</h2>
        <article>
          <h3>前端开发工程师 - ABC公司</h3>
          <p class="date">2020.06 - 至今</p>
          <ul>
            <li>负责公司官网和后台管理系统开发</li>
            <li>优化页面性能，提升加载速度30%</li>
            <li>主导前端技术分享，提升团队技能</li>
          </ul>
        </article>
      </section>

      <!-- 教育 -->
      <section class="education">
        <h2>教育背景</h2>
        <article>
          <h3>计算机科学与技术 - XX大学</h3>
          <p class="date">2016.09 - 2020.06</p>
          <p>主修课程：数据结构、算法设计、Web开发</p>
        </article>
      </section>
    </main>
  </div>
</body>
</html>

三、CSS样式设计

1. 基础样式

/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f9f9f9;
  padding: 20px;
}

.resume {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  padding: 30px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

2. 头部样式

.

.resume-header {
  text-align: center;
  margin-bottom: 30px;
}

.resume-header h1 {
  font-size: 2.5rem;
  color: #2c3e50;
}

.resume-header p {
  font-size: 1.2rem;
  color: #666;
  margin: 10px 0;
}

.contact-info {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 15px;
}

.contact-info li {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #555;
}

3. 主体内容样式

.

.resume-content {
  display: grid;
  gap: 30px;
}

h2 {
  font-size: 1.8rem;
  color: #2c3e50;
  border-bottom: 2px solid #2c3e50;
  padding-bottom: 5px;
  margin-bottom: 15px;
}

h3 {
  font-size: 1.4rem;
  color: #34495e;
}

.date {
  color: #666;
  font-style: italic;
  margin: 5px 0;
}

ul {
  padding-left: 20px;
}

ul li {
  margin-bottom: 10px;
}

4. 响应式设计

@media (max-width: 600px) {
  .contact-info {
    flex-direction: column;
    gap: 10px;
  }

  .resume {
    padding: 20px;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }
}

四、功能扩展建议

1. 添加交互效果

/* 悬停效果 */
ul li:hover {
  color: #2980b9;
  cursor: pointer;
}

/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}

2. 引入图标库

<!-- 在head中添加 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- 使用图标 -->
<li><i class="fas fa-envelope"></i> zhangshan@example.com</li>

3. 打印优化

@media print {
  body {
    padding: 0;
  }

  .resume {
    box-shadow: none;
    padding: 0;
  }

  .contact-info {
    justify-content: flex-start;
  }
}

五、部署与分享

1. 部署到GitHub Pages

  1. 创建GitHub仓库
  2. 将代码推送到main分支
  3. 在仓库设置中启用GitHub Pages

2. 生成PDF版本

  • 使用浏览器打印功能（Ctrl+P）
  • 选择“另存为PDF”

3. 在线简历工具

最终效果预览：
简历示例

项目源码：
GitHub仓库链接

总结：
通过本教程，你已经掌握了制作个人简历页面的完整流程。记住，简历不仅是信息的展示，更是个人品牌的体现。持续优化你的简历，让它成为你职业发展的有力工具！

完整 HTML 代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人简历 - 张三</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="resume">
    <!-- 头部 -->
    <header class="resume-header">
      <h1>张三</h1>
      <p>前端开发工程师</p>
      <ul class="contact-info">
        <li><i class="fas fa-envelope"></i> zhangshan@example.com</li>
        <li><i class="fas fa-phone"></i> 138-1234-5678</li>
        <li><i class="fab fa-github"></i> github.com/zhangshan</li>
      </ul>
    </header>

    <!-- 主体内容 -->
    <main class="resume-content">
      <!-- 简介 -->
      <section class="about">
        <h2>个人简介</h2>
        <p>3年前端开发经验，精通HTML/CSS/JavaScript，熟悉Vue.js和React框架，具备良好的代码规范和团队协作能力。</p>
      </section>

      <!-- 技能 -->
      <section class="skills">
        <h2>技能</h2>
        <ul>
          <li>HTML5 & CSS3</li>
          <li>JavaScript (ES6+)</li>
          <li>Vue.js / React</li>
          <li>Webpack / Vite</li>
          <li>Git 版本控制</li>
        </ul>
      </section>

      <!-- 经验 -->
      <section class="experience">
        <h2>工作经验</h2>
        <article>
          <h3>前端开发工程师 - ABC公司</h3>
          <p class="date">2020.06 - 至今</p>
          <ul>
            <li>负责公司官网和后台管理系统开发</li>
            <li>优化页面性能，提升加载速度30%</li>
            <li>主导前端技术分享，提升团队技能</li>
          </ul>
        </article>
      </section>

      <!-- 教育 -->
      <section class="education">
        <h2>教育背景</h2>
        <article>
          <h3>计算机科学与技术 - XX大学</h3>
          <p class="date">2016.09 - 2020.06</p>
          <p>主修课程：数据结构、算法设计、Web开发</p>
        </article>
      </section>
    </main>
  </div>
</body>
</html>

完整 CSS 代码

/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f9f9f9;
  padding: 20px;
}

.resume {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  padding: 30px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* 头部样式 */
.resume-header {
  text-align: center;
  margin-bottom: 30px;
}

.resume-header h1 {
  font-size: 2.5rem;
  color: #2c3e50;
}

.resume-header p {
  font-size: 1.2rem;
  color: #666;
  margin: 10px 0;
}

.contact-info {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 15px;
}

.contact-info li {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #555;
}

/* 主体内容样式 */
.resume-content {
  display: grid;
  gap: 30px;
}

h2 {
  font-size: 1.8rem;
  color: #2c3e50;
  border-bottom: 2px solid #2c3e50;
  padding-bottom: 5px;
  margin-bottom: 15px;
}

h3 {
  font-size: 1.4rem;
  color: #34495e;
}

.date {
  color: #666;
  font-style: italic;
  margin: 5px 0;
}

ul {
  padding-left: 20px;
}

ul li {
  margin-bottom: 10px;
}

/* 响应式设计 */
@media (max-width: 600px) {
  .contact-info {
    flex-direction: column;
    gap: 10px;
  }

  .resume {
    padding: 20px;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }
}

/* 交互效果 */
ul li:hover {
  color: #2980b9;
  cursor: pointer;
}

/* 打印优化 */
@media print {
  body {
    padding: 0;
  }

  .resume {
    box-shadow: none;
    padding: 0;
  }

  .contact-info {
    justify-content: flex-start;
  }
}

使用说明

  1. 保存文件：
    • 将 HTML 代码保存为 index.html。
    • 将 CSS 代码保存为 styles.css，并确保与 HTML 文件在同一目录下。
  2. 运行：
    • 双击 index.html 文件，即可在浏览器中查看简历页面。
  3. 自定义：
    • 修改 HTML 中的内容（如姓名、联系方式、工作经验等）以适配你的个人信息。
    • 调整 CSS 样式（如颜色、字体、布局等）以符合你的设计需求。
  4. 部署：
    • 将文件上传到 GitHub，启用 GitHub Pages，即可在线访问你的简历。
    • 使用浏览器打印功能（Ctrl+P）生成 PDF 版本。

效果预览

  • 桌面端：
    桌面端效果
  • 移动端：
    移动端效果

扩展功能

  1. 添加更多模块：
    • 在 <main> 中添加新的 <section>，如“项目经验”、“证书”等。
  2. 动态效果：
    • 使用 CSS 动画或 JavaScript 添加交互效果，如滚动动画、按钮点击效果等。
  3. 多语言支持：
    • 使用 lang 属性和 CSS 伪类实现中英文切换。

总结：
通过以上代码，你可以快速生成一张专业且响应式的个人简历页面。根据需求进一步优化和扩展，让它成为你求职路上的得力助手！

演示：简历模板

captain
captain

0

  1. This post has no comment yet

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关文章

文章缩略图生成器
文章缩略图生成器
代码 2 张图片 2 分钟阅读
CSS:CSS边框
CSS:CSS边框
代码 1 张图片 2 分钟阅读
CSS:CSS背景
CSS:CSS背景
代码 1 分钟阅读
CSS:三种使用CSS的方法
CSS:三种使用CSS的方法
代码 1 分钟阅读
© 2026 辣鱼