实现个人介绍页面
效果图：
步骤 1：搭建 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></head><body> <!-- 1. 页面主标题 --> <h1>我的个人介绍</h1> <!-- 2. 个人信息区域：头像 + 文字 --> <div class="info-section"> <!-- 头像：用免费占位图，后续可替换 --> <img src="https://picsum.photos/200/200" alt="我的头像" class="avatar"> <!-- 文字介绍 --> <div class="text-intro"> <h2>张三</h2> <p> 职业：前端开发初学者</p> <p> 所在地：北京市</p> <p> 个人简介：我正在学习前端开发，熟悉HTML、CSS基础，喜欢通过代码实现有趣的页面。</p> <p>✨ 兴趣爱好：编程、阅读、户外运动</p> </div> </div> <!-- 3. 联系方式表单区域 --> <div class="form-section"> <h2>联系我</h2> <form action="#" method="POST"> <div class="form-group"> <label for="name">你的姓名：</label> <input type="text" id="name" name="name" placeholder="请输入你的姓名" required> </div> <div class="form-group"> <label for="email">你的邮箱：</label> <input type="email" id="email" name="email" placeholder="请输入你的邮箱" required> </div> <div class="form-group"> <label for="message">留言内容：</label> <textarea id="message" name="message" placeholder="请输入你想对我说的话" required></textarea> </div> <button type="submit" class="submit-btn">提交留言</button> </form> </div></body></html>步骤 1 讲解
- HTML 文档声明：<!DOCTYPE html> 告诉浏览器这是 HTML5 文档，是所有 HTML 页面的开头。
- <head> 区域：lang="zh-CN"：指定页面语言为中文，利于搜索引擎识别；meta viewport：移动端适配核心，保证手机上页面宽度和屏幕一致，不会缩放。
- <body> 核心结构：用 div 加类名（如 .info-section、.form-section）划分模块，方便后续用 CSS 样式控制；表单部分：required：输入框必填，浏览器会自动验证；type="email"：邮箱输入框，自动验证格式；placeholder：输入框提示文字，提升用户体验。
步骤 1 效果
保存文件后用浏览器打开，能看到：
- 标题、头像（方形）、文字介绍（堆叠）、表单（无样式，输入框占满屏幕），结构完整但样式简陋。
步骤 2：添加全局基础样式（统一页面风格）
目标
修复浏览器默认样式，设置页面全局字体、背景色、居中效果，让页面整体更整洁。
代码实现
在 <head> 标签内的 <title> 下方，添加 <style> 标签，写入以下样式：
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的个人介绍</title> <!-- 新增style标签，写CSS样式 --> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "微软雅黑", Arial, sans-serif; background-color: #f8f9fa; line-height: 1.6; color: #333; max-width: 800px; margin: 0 auto; padding: 20px; } h1 { text-align: center; color: #2c3e50; margin-bottom: 30px; padding-bottom: 10px; border-bottom: 2px solid #3498db; } </style></head>步骤 2 讲解
- * 通配符选择器：选中所有元素，重置默认的 margin 和 padding（不同浏览器默认样式不同，统一重置避免差异）；
- box-sizing: border-box：前端必学！设置后，元素的宽度 = 内容 + 内边距 + 边框，不会因为加了内边距 / 边框导致宽度超出父容器；
- body 样式：max-width + margin: 0 auto：实现页面居中，大屏下最多 800px 宽，小屏下自适应；line-height: 1.6：行高是字体大小的 1.6 倍，文字不会挤在一起，阅读更舒适。
步骤 2 效果
页面背景变成浅灰色，整体居中，标题居中且有蓝色下划线，文字字体更美观，没有默认的杂乱边距。
步骤 3：美化个人信息区域（头像 + 文字）
目标
让头像变成圆形，和文字并排显示，优化文字介绍的样式。
代码实现
在步骤 2 的 <style> 标签内，继续添加以下样式：
.info-section { display: flex; align-items: center; gap: 30px; margin-bottom: 40px; flex-wrap: wrap; justify-content: center; }.avatar { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; border: 4px solid #3498db; }.text-intro h2 { color: #3498db; margin-bottom: 10px;}.text-intro p { margin-bottom: 8px; font-size: 16px;}步骤 3 讲解
- Flex 布局核心：display: flex：让 .info-section 内的头像和文字横向排列；align-items: center：让头像和文字在垂直方向居中（不会出现头像高、文字偏下的情况）；flex-wrap: wrap：关键的响应式设置！当屏幕宽度不够（比如手机），头像和文字会自动换行，不会挤在一起。
- 圆形头像：border-radius: 50% 是实现圆形的核心，前提是宽高相等；
- object-fit: cover：如果图片比例和设置的宽高不一致，会裁剪图片（保留中间部分），不会拉伸变形。
步骤 3 效果
头像变成圆形带蓝色边框，和文字并排显示；文字介绍的标题是蓝色，段落间距适中，手机端打开会自动换行，头像在上，文字在下。
步骤 4：美化表单区域（交互 + 样式）
目标
给表单加白色背景和阴影，优化输入框、按钮样式，增加交互反馈（比如输入框聚焦、按钮悬浮）。
代码实现
在 <style> 标签内继续添加以下样式：
.form-section { background-color: white; padding: 25px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }.form-section h2 { color: #2c3e50; margin-bottom: 20px; text-align: center;}.form-group { margin-bottom: 15px; }.form-group label { display: block; margin-bottom: 5px; font-weight: bold; }.form-group input,.form-group textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; font-family: inherit; }.form-group input:focus,.form-group textarea:focus { outline: none; border-color: #3498db; box-shadow: 0 0 5px rgba(52, 152, 219, 0.3); }.form-group textarea { min-height: 120px; resize: vertical; }.submit-btn { width: 100%; padding: 12px; background-color: #3498db; color: white; border: none; border-radius: 4px; font-size: 16px; font-weight: bold; cursor: pointer; transition: background-color 0.3s; }.submit-btn:hover { background-color: #2980b9; }步骤 4 讲解
- 表单容器样式：background: white + box-shadow 让表单区域和背景区分开，有立体感；
- 输入框样式：width: 100%：铺满表单容器，不用手动计算宽度；:focus 伪类：输入框被选中时，边框变蓝色 + 轻微阴影，提示用户当前激活的输入框，提升交互体验；
- 按钮交互：cursor: pointer：鼠标移上去变成手型，提示可点击；transition：让按钮背景色变化有 0.3 秒的过渡，不是突然变色，更丝滑；:hover 伪类：鼠标悬浮时背景色加深，反馈清晰。
步骤 4 效果
表单区域是白色背景带阴影，输入框有圆角和聚焦效果，按钮蓝色且悬浮变色，整体交互体验和视觉效果都达标。
总结
- 实现个人介绍页面的核心逻辑是：先搭 HTML 结构（分模块）→ 重置全局样式 → 美化各模块 → 增加交互反馈，循序渐进；
- 本次实战的核心知识点：box-sizing: border-box、Flex 布局（display: flex）、响应式适配（flex-wrap: wrap）、伪类（:focus/:hover）；
- 每一步写完都要保存并打开浏览器预览，能直观看到效果变化，更容易理解代码的作用。
你可以按照这 4 个步骤，一行行写代码，每完成一步就验证效果，这样能彻底掌握每个样式和标签的作用，比直接复制完整代码收获更多～
