实战项目与进阶-第14章-14.1-项目一：个人简历页（基础）

一、项目需求分析

1.1 功能需求

• 个人信息展示（姓名、联系方式、头像）
• 教育经历、工作经历、技能列表
• 项目经验展示
• 响应式布局（适配移动端和桌面端）

1.2 技术栈要求

• HTML5语义化标签
• CSS3基础样式（盒模型、浮动、定位）
• Flexbox布局
• 媒体查询响应式设计

二、实现步骤

2.1 页面结构设计

<title>个人简历</title>

  <header class="header">
    <div class="avatar">
      <img src="/images/avatar.jpg" alt="个人头像">
    </div>
    <h1 class="name">张明</h1>
    <p class="title">前端开发工程师</p>
    <div class="contact">

<p><i class="icon-phone"></i> 13800138000</p>

<p><i class="icon-email"></i> zhangming@example.com</p>
    </div>
  </header>

  <main class="container">
    <section class="education">

<h2>教育经历</h2>

<ul>

<li>

<h3>XX大学 计算机科学与技术</h3>

<p>2016.09-2020.06 | 本科 | 学士学位</p>
        </li>
      </ul>
    </section>

    <section class="experience">

<h2>工作经历</h2>

<ul>

<li>

<h3>XX科技有限公司 前端开发工程师</h3>

<p>2020.07-至今</p>
          <ul class="duties">

<li>负责公司官网前端页面开发与维护</li>

<li>使用HTML5+CSS3实现响应式布局</li>

<li>优化页面加载速度，提升用户体验</li>
          </ul>
        </li>
      </ul>
    </section>

    <section class="skills">

<h2>专业技能</h2>
      <div class="skills-container">
        <div class="skill-item">HTML5/CSS3</div>
        <div class="skill-item">JavaScript</div>
        <div class="skill-item">Flexbox/Grid</div>
        <div class="skill-item">响应式设计</div>
      </div>
    </section>
  </main>

  <footer class="footer">

<p>© 2023 张明的个人简历 | 联系邮箱：zhangming@example.com</p>
  </footer>

2.2 CSS样式实现

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

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

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

.avatar img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid white;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.name {
  margin: 15px 0 5px;
  font-size: 28px;
  color: #2c3e50;
}

.title {
  color: #7f8c8d;
  font-weight: normal;
  margin-bottom: 15px;
}

.contact {
  background-color: #f8f9fa;
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
}

.contact p {
  margin: 5px 0;
  font-size: 14px;
}

/* 主容器样式 */
.container {
  max-width: 900px;
  margin: 0 auto;
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0,0,0,0.05);
}

section {
  margin-bottom: 30px;
}

section h2 {
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
  margin-bottom: 15px;
  color: #2980b9;
}

ul {
  list-style-position: inside;
}

li {
  margin-bottom: 10px;
}

/* 技能容器样式 */
.skills-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.skill-item {
  background-color: #3498db;
  color: white;
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 14px;
}

/* 页脚样式 */
.footer {
  text-align: center;
  margin-top: 30px;
  color: #7f8c8d;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .container {
    padding: 15px;
  }

  .name {
    font-size: 24px;
  }

  .avatar img {
    width: 120px;
    height: 120px;
  }
}

三、关键技术点解析

3.1 语义化结构

• 使用`
  `、`

  `、`

  `、`
• 合理划分内容区块，提升页面可访问性和SEO友好性

3.2 Flexbox布局应用

• 技能标签使用Flexbox实现自动换行：

.skills-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

3.3 响应式设计实现

• 使用媒体查询适配移动设备：

@media (max-width: 768px) {
  .container {
    padding: 15px;
  }
  /* 其他适配样式 */
}

3.4 视觉美化技巧

• 头像圆形显示：border-radius: 50%
• 阴影效果增强层次感：box-shadow: 0 0 10px rgba(0,0,0,0.1)
• 技能标签圆角设计：border-radius: 20px

四、效果预览与优化建议

4.1 效果预览

• 桌面端：三栏布局，信息清晰分隔
• 移动端：单列布局，优化触控体验

4.2 优化建议

1. 添加平滑滚动效果：

html {
  scroll-behavior: smooth;
}

1. 增加打印样式优化：

@media print {
  body {
    background-color: white;
    box-shadow: none;
  }
  .footer {
    display: none;
  }
}

1. 引入图标库丰富视觉效果：

五、自测题

1. 如何使用HTML5语义化标签优化简历页面结构？
2. Flexbox布局中flex-wrap: wrap的作用是什么？
3. 媒体查询的断点设置原则是什么？本项目使用了哪个断点值？
4. 如何优化简历页在打印时的显示效果？

六、项目扩展

• 进阶挑战：添加暗黑模式切换功能
• 技术栈升级：使用CSS变量统一管理颜色方案
• 交互增强：添加技能评分进度条动画