任务概述

使用div+CSS进行网页布局，实际上是使用CSS排版网页元素，这是一种很新的排版理念，完全有别于传统的排版习惯。根据页面期望的结构，使用div标签与CSS样式配合进行页面布局，使这些div标签完成布局，设定的div标签作为容器，再包裹相应的内容元素。这种方式就能有效地进行内容与样式的分离，并且页面的布局不再受标签元素的默认样式过多的影响。使用display属性改变元素特性进行网页元素的排版，使用浮动排版网页元素，并且根据网页布局需要对浮动进行清除，通过多角度分析父元素高度塌陷的原因。希望同学们遇到困难或问题要认真分析，提升解决的问题。最后讲解display和float排版各自的优缺点，使大家能合理地在不同场合用不同的布局方式。

“新云课堂”项目的开发中，要解决通用头部的左右布局，“成长之路”的水平排列等效果也需要用到浮动布局的方式来实现。

素质目标

培养学生团队合作精神。

培养学生主动学习的能力和独立思考、分析问题、解决问题的能力。

知识目标

了解display的4种状态

了解浮动的特点

了解如何清除浮动

了解浮动导致崩塌的解决方法及其优缺点

技能目标

熟练使用浮动的方式进行元素水平两端布局或者水平排列布局

熟练解决由于浮动导致的结构崩塌问题。