# 实战项目与进阶-第14章-14.1-项目一：个人简历页（基础）
## 一、项目需求分析
### 1.1 功能需求
- 个人信息展示（姓名、联系方式、头像）
- 教育经历、工作经历、技能列表
- 项目经验展示
- 响应式布局（适配移动端和桌面端）
### 1.2 技术栈要求
- HTML5语义化标签
- CSS3基础样式（盒模型、浮动、定位）
- Flexbox布局
- 媒体查询响应式设计
## 二、实现步骤
### 2.1 页面结构设计
```html
个人简历
工作经历
-
XX科技有限公司 前端开发工程师
2020.07-至今
- 负责公司官网前端页面开发与维护
- 使用HTML5+CSS3实现响应式布局
- 优化页面加载速度，提升用户体验
专业技能
HTML5/CSS3
JavaScript
Flexbox/Grid
响应式设计
```
### 2.2 CSS样式实现
```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 语义化结构
- 使用`
`、``、``、`
