项目5 制作公司招聘页（浮动与定位）教案18

附件教案课程名称：授课教师：适用专业：教学单位：信息工程学院编制时间：2026年2月天津滨海汽车工程职业学院授课教案首页授课班级：课程名称课程类型□理论☑理论+实践□实训总学时64授课地点周次9授课学时2教学目标（一）知识目标理解定位的核心概念，掌握定位的组成（定位模式+边偏移）。掌握四种定位模式的语法：静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）。熟练掌握相对定位和绝对定位的核心特性、定位基准及适用场景。理解“子绝父相”的定位组合模式，掌握其实现逻辑和应用场景。（二）技能目标能为元素设置相对定位，实现基于自身原位置的微调（如hover时轻微位移）。能运用“子绝父相”模式，实现子元素相对于父元素的精准定位（如标签、图标定位）。能区分相对定位与绝对定位的差异，根据布局需求选择合适的定位模式。能结合浮动和定位技术，实现复杂的布局效果（如浮动布局中的精准定位元素）。（三）素质目标建立“精准控制元素位置”的布局思维，理解定位与浮动的互补关系。培养空间想象能力，能精准判断定位元素的基准和最终位置。养成逻辑推理能力，能根据“定位模式+边偏移”反推元素位置，或根据目标位置推导代码实现。树立代码优化意识，理解“子绝父相”模式的优势，避免定位的滥用。教学重点定位的组成：定位模式（position）和边偏移（top/bottom/left/right）的配合使用。相对定位的特性：不脱离标准流、保留原位置、基于自身原位置偏移。绝对定位的特性：脱离标准流、不保留原位置、基于最近已定位祖先元素偏移（无则基于视口）。“子绝父相”模式的实现逻辑：父元素设相对定位（作为基准），子元素设绝对定位（精准偏移）。教学难点理解绝对定位的定位基准：区分“有定位祖先元素”和“无定位祖先元素”的定位差异。掌握“子绝父相”模式的应用场景，避免父元素未设置定位导致子元素定位错乱。区分相对定位与绝对定位的核心差异（是否脱标、定位基准、是否保留原位置）。结合定位与浮动，实现复杂布局时的元素层级和位置控制。教材及教参《AI+网页前端开发企业级项目教程》版本978-7-5606-7987-1信息化资源PPT课件、学习通教学环节安排教学设计1.理实结合：以模块化任务为核心，知识点对应实操场景，避免纯理论讲解。2.三维目标：明确知识、技能、素质目标，自然融入思政元素。3.分层适配：设计基础、提高、拓展内容，适配不同学生水平。4.闭环反馈：遵循“讲解-实操-纠错-总结-复盘”逻辑，强化知识吸收。教学实施要求1.讲练结合：实操占比≥60%，以案例演示+自主实操为主。2.规范把控：强调语义化HTML、模块化CSS，注重代码细节与注释。3.问题导向：聚焦高频错误，精准突破教学难点。4.过程评价：结合课堂表现、作业质量、实操成果综合评价。教学后记课后练习完成教材对应习题拓展提高无教学反思教学内容与教学过程注释（一）巩固复习（5分钟）提问回顾上一课时核心知识点：浮动带来的布局问题、四种清除浮动方法、“父级标准流+子级浮动”的布局模式。实操小提问：“如何在一个浮动的卡片中，为右上角添加一个‘热门’标签？”，引导学生思考定位技术的必要性。强调：浮动用于实现水平排列，定位用于实现元素的精准位置控制，二者互补，是前端布局的核心技术组合。（二）新课导入（5分钟）展示企业招聘页的“热门职位”标签、侧边栏咨询模块，指出这些元素均通过定位实现精准位置控制，提问学生：“这些元素如何精准固定在目标位置？为什么不会被其他元素影响？”展示两个对比效果：一个是未使用定位的元素无法精准对齐，一个是使用定位后元素精准定位，引出定位技术的核心价值——“精准控制元素位置”。引出课题：本节课将学习定位的核心概念、相对定位与绝对定位，掌握“子绝父相”的核心布局模式，实现元素的精准定位，明确本课时的三维教学目标。（三）新课讲授（65分钟）本环节采用“概念拆解+特性对比+案例实操”的模式，先讲解定位基础，再逐一突破相对/绝对定位，最后通过“子绝父相”实操巩固核心应用。模块1：定位基础概念（10分钟）定位定义：讲解定位是CSS布局中用于精准控制元素位置的技术，通过“定位模式+边偏移”实现元素在页面中的任意位置摆放。定位的组成：定位模式（position）：决定元素的定位方式，取值为static（静态）、relative（相对）、absolute（绝对）、fixed（固定）。边偏移（top/bottom/left/right）：决定元素的具体位置，取值为像素或百分比，仅对非静态定位元素生效。静态定位（static）：讲解其为默认定位模式，元素遵循标准流排列，边偏移属性无效，无需显式设置。实操1：创建一个<div>，设置position:static和top:20px，观察元素位置无变化，验证静态定位的特性。模块2：相对定位（relative）（15分钟）语法：position:relative;，配合边偏移（如top:10px;left:20px）。核心特性：不脱离标准流：保留原文档流中的占位空间，不影响其他元素布局。定位基准：基于元素自身在标准流中的原位置进行偏移。边偏移生效：top/bottom控制垂直方向，left/right控制水平方向。案例演示：创建3个标准流<div>，为中间元素设置相对定位和top:-10px;left:20px，观察其相对于原位置偏移，且原位置保留的效果。适用场景：元素微调（如hover时轻微上浮）、作为绝对定位的父级基准。实操2：实现按钮hover效果，鼠标悬停时按钮相对原位置上移3px、右移3px，配合过渡效果实现平滑动画。模块3：绝对定位（absolute）（20分钟）语法：position:absolute;，配合边偏移（如top:50%;left:50%;transform:translate(-50%,-50%)）。核心特性：脱离标准流：不保留原位置，其他元素会填充其原位置。定位基准：优先基于最近的非static定位祖先元素（relative/absolute/fixed）偏移；无则基于浏览器视口（body）偏移。具有行内块特性：未设置宽高时，宽度由内容决定，可直接设置宽高。案例演示：演示1（无定位祖先）：创建绝对定位元素，设置top:20px;left:20px，观察其基于视口定位的效果。演示2（有定位祖先）：创建父元素并设置position:relative，子元素设置绝对定位，观察子元素基于父元素定位的效果，引出“子绝父相”。实操3：实现“卡片+标签”布局，父卡片设相对定位，子标签设绝对定位，定位在卡片右上角，实现“热门”标签效果。模块4：“子绝父相”核心模式（20分钟）模式定义：父元素设置相对定位（relative），子元素设置绝对定位（absolute），子元素基于父元素进行精准定位，是前端开发中最常用的定位组合。核心逻辑：父元素相对定位：不脱离标准流，保留布局位置，同时成为子元素的定位基准。子元素绝对定位：脱离标准流，可在父元素范围内任意定位，不影响其他元素。进阶实操：实现企业招聘页“职位标签”布局：步骤1：创建职位卡片（父元素），设置position:relative、宽380px、高100px、边框阴影。步骤2：创建“急聘”标签（子元素），设置position:absolute、top:0、right:0、背景色红色、文字白色、padding5px。步骤3：添加职位名称和地点（标准流元素），观察标签精准定位在卡片右上角，不影响其他内容布局。小组练习：2人一组，实现“图片+文字遮罩”布局，父元素为图片容器（相对定位），子元素为半透明文字遮罩（绝对定位，底部对齐），巩固“子绝父相”应用。（四）课程思政（10分钟）互补协同的技术思维：浮动用于水平排列，定位用于精准定位，二者互补实现复杂布局，体现了“协同合作”的重要性。让学生理解技术之间没有绝对的优劣，只有互补的价值，在学习中要建立全局思维，灵活搭配使用不同技术。精准定位的工匠精神：定位技术要求精准控制元素的位置，边偏移的数值、定位基准的选择，都需要严谨的计算和判断，体现了“工匠精神”。让学生在开发中养成精益求精的态度，不满足于“大概对齐”，追求“精准无误”的布局效果。逻辑推理的重要性：“子绝父相”模式需要先确定父元素定位，再设置子元素偏移，逻辑链条清晰。让学生体会逻辑推理在前端开发中的核心作用，遇到布局问题时，先梳理逻辑，再编写代码，避免盲目尝试。场景适配的灵活思维：相对定位适用于微调，绝对定位适用于精准定位，不同场景选择不同技术，体现了“灵活适配”的思维。让学生在学习中养成场景化思维，根据实际需求选择合适的技术方案，不生搬硬套。总结与作业1.课堂总结梳理本课时核心知识点：定位的组成（定位模式+边偏移）、相对定位的特性与应用、绝对定位的特性与定位基准、“子绝父相”核心模式。强调重点：相对定位不脱标、基于自身偏移；绝对定位脱标、基于最近定位祖先偏移；“子绝父相”是精准定位的核心方案。梳理易错点：绝对定位未设置父元素定位导致基准错误、边偏移属性在静态定位中无效、相对定位偏移后原位置保留导致的布局误解。2.作业布置基础题：使用“子绝父相”模式，实现“新闻卡片”布局，父卡片宽400px、高200px，子元素包含标题（顶部居中）、“推荐”