本教材以“大学生社团服务平台”为贯穿式实战项目，立足“AI 赋能、项目驱动、德技并修”的编写理念，将人工智能辅助开发能力与 Web 前端核心技能有机融合，着力培养学习者在数字化岗位中的“人机协同”开发能力，为前端开发课程提供一套紧跟产业升级、对接岗位标准、支撑教学改革的新型教材解决方案。

本教材适用于高等职业院校、应用型本科院校及中等职业学校相关专业 Web 前端开发课程教学，建议总学时 64 学时（理论 24 学时 / 实践 40 学时）。也可供零基础自学人员、前端开发 新人参考使用。

周 琼 尹光銮 陈娟霞 主编

项目一 前端开发筑基实战 .............................................. 1

任务 1 前端开发认知与 AI 协同开发环境构建 ............................. 2

任务 2 HTML5 语义化标签与文档结构标签 ............................. 11

任务 3 HTML 核心元素场景化应用实战 ............................. 24

项目二 前端样式规范实战 ............................. 49

任务 1 CSS3 基础认知与引入方式 ............................. 50

任务 2 CSS3 选择器 ............................. 57

任务 3 综合实战：设计“大学生社团服务平台——首页”的效果 ............................. 76

项目三 前端开发固基实战 ............................. 88

任务 1 盒子模型与基础布局实战 ............................. 89

任务 2 传统布局 float ............................. 93

任务 3 现代布局 Flex ............................. 110

任务 4 综合实战：平台首页布局整合 ............................. 115

项目四 前端样式赋能实战 ............................. 119

任务 1 CSS3 基础质感特效实战 ............................. 120

任务 2 CSS3 动画与变形实战 ............................. 127

项目五 前端响应适配实战 ............................. 146

任务 响应式网页设计 ............................. 147

项目六 前端交互赋能实战 ............................. 167

任务 JavaScript 交互赋能实战 ............................. 168

项目七 前端交互进阶实战 ............................. 208

任务 jQuery 交互进阶实战 ............................. 209

参考文献 ............................. 255