任务五 用浮动定位制作图文混排页面学习指导.docxVIP

任务五 用浮动定位制作图文混排页面学习指导 任务五页面 | 素材下载 | 电子教程51、知识目标与要求 （1）掌握float样式的属性； （2）掌握浮动定位的基本理念 2、技能目标与要求 （1）掌握浮动定位的制作技巧； （2）掌握图文混排页面的制作技巧； 3、方法能力目标与要求 （1）掌握浮动定位的运用； 4、职业素养目标与要求 （1）培养严谨、细致、负责任的工作态度； （2）培养主动参与、团队协作的集体意识；（3）培养科学文明、积极向上的传媒道德 任务描述 浮动float是非常重要的定位网页元素的手段。通过float可以实现网页块元素同一行排列，在网页布局中经常用到。本任务通过float属性实现图文环绕混排。文字环绕图片的方式在实际页面中的应用非常广，再配合内容、背景等多种手段达到各种绚丽的效果。效果图如图5-1所示。 制作思路 此任务利用float属性进行布局。浮动的原则是：待浮动的元素在上，当元素向左或向右浮动后，下边的元素将同上面的元素处在同一排，并占据上边元素原来的位置，实现浮动。如果图片在上文字在下则浮动后可实现图文混排；如果上下两部分都是块状元素（如DIV或者图片），则浮动后两个块并排。 本任务是不定宽度的页面，分别将两个图片浮动在右边，第一个图与下方的Banner是块与块的关系，浮动后两个块并排；第二个图与文字图文混排。首字“德”放大，向左浮动，实现文字环绕。注意在文字环绕时，不能设置行间距line-height，二者有冲突。 ?