Web前端开发任务驱动式教程（HTML5+CSS3+JavaScript）（第2版）（微课版） 教案 第11讲次 任务12 元素的定位

教案序号：11授课日期课时数4章节名称任务12元素的定位教学内容重点静态定位、相对定位、绝对定位、固定定位。难点绝对定位的使用。教学目的与要求掌握元素的定位方式：静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）。了解不同定位模式的应用场合。教学方法与手段教师采用任务驱动法，使用教学PPT辅助授课。教师操作演示，学生实训练习。学生课前课后均可通过“浙江省高等学校在线开放课程共享平台”的配套微课学习。作业及思考题完成课堂上未完成的习题，通过网络平台上交作业。通过回帖的方式回答课上留下的思考题。预习下一节内容。

讲授内容课堂组织第一学时（任务12元素的定位12.1元素的定位模式与边偏移、12.2静态定位、12.3相对定位）实操任务目标发布实战演练——制作旅游景点推荐网banner图11-SEQ图\*ARABIC\r11“旅游景点推荐网”banner强化训练——制作个人博客首页图11-SEQ图\*ARABIC2“个人博客首页”网页知识准备元素的定位可以精确定义一个元素的准确位置（1）定位模式：position属性static：静态定位relative：相对定位absolute：绝对定位fixed：固定定位（2）边偏移：left：左侧偏移量right：右侧偏移量top：顶端偏移量bottom：底部偏移量静态定位（static）静态定位（static）：网页元素默认的定位方式，元素按照标准流进行布局。不能通过设置边偏移属性left、right、top、bottom值来改变元素的位置。相对定位（relative）相对定位（relative）：网页元素相对于其在原文档流的位置进行定位，当元素设置为相对定位“position:relative;”，该元素就会相对于其自身的默认位置进行偏移，但是它在文档流中的位置仍然保留。子任务：图11-SEQ图\*ARABIC3元素相对定位后的效果第二学时（任务12元素的定位12.4绝对定位、12.5固定定位、12.6z-index层叠等级属性）知识准备绝对定位绝对定位（absolute）：将元素相对于距离其最近的、已经定位（相对、绝对或固定定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。当元素设置为绝对定位“position:absolute;”，该元素就会相对于其父元素或body根元素进行偏移，脱离文档流，它在文档流中的位置将被其他元素占据。子任务：图11-SEQ图\*ARABIC4元素绝对定位后的效果图11-SEQ图\*ARABIC5按照“子绝父相”原则对元素进行绝对定位固定定位固定定位（fixed）：相对于浏览器窗口进行定位。元素设置为固定定位之后，就会脱离原来的文档流进行定位，原有的位置将被其他元素占据。无论浏览器窗口大小如何改变，浏览器滚动条如何拖动，固定定位的元素都将显示在浏览器的固定位置。z-index层叠等级属性z-index层叠等级属性：定义叠加元素的堆叠顺序，其值可以取正整数、0、负整数，默认值为0，取值越大，定位元素的位置就越靠上。图11-SEQ图\*ARABIC6元素叠加现象第三学时实战演练——制作旅游景点推荐网banner案例描述：设计并制作旅游景点推荐网banner，网页效果如下图11-7所示。当鼠标移动到每个导航选项上时，超链接的样式将会发生变化，效果如图11-8所示。图11-SEQ图\*ARABIC7“旅游景点推荐网”banner图11-SEQ图\*ARABIC8鼠标指针移至没个导航选项时超链接的样式图11-SEQ图\*ARABIC9“旅游景点推荐网”banner网页布局第四学时强化训练——制作个人博客首页案例描述：设计并制作个人博客首页，网页效果如下。图11-SEQ图\*ARABIC10“个人博客首页”网页图11-SEQ图\*ARABIC11“个人博客首页”网页布局课后实训案例描述：设计新闻列表页面，效果如图所示。图11-SEQ图\*AR