🎯 课程目标
完成本课程后，你将能够：
- 综合运用 HTML、CSS、JavaScript
- 使用 AI 工具创建完整的网页项目
- 掌握响应式网页设计基础
- 完成一个可展示的个人简历页面
📋 项目需求
个人简历页面功能：
- 个人信息区（姓名、头像、职业标题）
- 个人简介
- 工作经历
- 教育背景
- 技能展示
- 联系方式
💬 第一步：向 AI 描述需求
"请帮我创建一个个人简历网页，要求：
## 页面结构
1. 顶部 Header：姓名、职业标题、个人照片
2. 关于我：个人简介段落
3. 工作经验：2-3 个工作经历条目
4. 教育背景：学历信息
5. 技能展示：使用标签形式展示 5-6 个技能
6. 联系方式：邮箱、电话、社交链接
## 设计要求
- 简洁专业的设计风格
- 使用蓝色主题配色
- 响应式布局，适配手机和电脑
- 带有平滑的悬停效果"
📁 项目文件结构
resume/
├── index.html
├── style.css
└── script.js
🎨 第二步：查看和调整
AI 生成代码后，在浏览器中打开检查效果。如果需要调整：
常见调整 Prompt
"把主色调从蓝色改成绿色"
"把技能展示改成横向排列"
"添加一个返回顶部的按钮"
"增加各个区块之间的间距"
✅ 完整代码示例
HTML 结构
<div class="resume">
<header class="header">
<img src="avatar.jpg" alt="头像" class="avatar">
<h1>张三</h1>
<p class="title">全栈开发工程师</p>
</header>
<section class="section">
<h2>关于我</h2>
<p>我是一名充满热情的全栈开发工程师...</p>
</section>
<!-- 更多内容 -->
</div>
🎯 课后练习
完成以下挑战：
- 使用 AI 创建个人简历页面
- 修改成你的真实信息
- 调整配色和样式直到满意
- 添加至少 3 个自定义内容
- （进阶）添加打印样式