阶段二：界面构建与样式精通

本阶段将深入讲解 RmlUi 的布局系统和高级样式技术，帮助你创建复杂、美观的界面。

---

📖 本章内容

1. 布局系统 - Flexbox 深度应用、Grid 布局
2. 高级样式 - 伪类、选择器高级用法
3. 内置控件 - 表单控件完全指南
4. 模板系统 - 模板定义和复用
5. 资源管理 - 字体、图片、精灵图
6. 响应式设计 - 媒体查询、多分辨率适配

---

🎯 学习目标

完成本阶段后，你将能够：

• ✅ 使用 Flexbox 创建复杂的响应式布局
• ✅ 掌握高级 CSS 选择器和伪类
• ✅ 熟练使用所有内置控件
• ✅ 利用模板系统提高代码复用性
• ✅ 有效管理字体、图片等资源
• ✅ 创建适配不同屏幕尺寸的界面

---

📝 实践任务

任务 1：重构游戏菜单

使用 Flexbox 重构阶段一的菜单，实现：

• 完美垂直居中
• 按钮间距均匀
• 添加背景图片

任务 2：创建物品栏界面

设计一个网格状的物品栏：

• 使用 Flexbox 或 Grid 布局
• 每个物品槽有边框和背景
• 支持悬停效果

任务 3：创建响应式设置页面

创建一个设置页面：

• 在小屏幕上单列布局
• 在大屏幕上双列布局
• 使用媒体查询切换

任务 4：使用模板创建对话框

创建可复用的对话框模板：

• 标题、内容、按钮区域
• 可配置按钮数量和文本
• 在多个场景中复用

---

📚 参考资源

• RCSS 属性索引
• Flexbox 指南
• 媒体查询

---

让我们开始 布局系统 的深入学习！

---

✅ 完成检查

完成本阶段所有章节后，请确认：

• 阅读 布局系统
• 阅读 高级样式
• 阅读 内置控件
• 阅读 模板系统
• 阅读 资源管理
• 阅读 响应式设计
• 完成至少 2 个实践任务

完成阶段二后，继续前往 阶段三：交互与数据。