网页布局与浮动属性应用详解.pptx

浮动第七章

回顾与作业点评如何把一个span转变成一个块级元素？如何设置一个添加了超链接的图片没有边框？如何设置一个div在它父容器中居中显示？使用无序列表制作导航菜单经常会有内边距，该如何清除内边距？提问2/30

预习检查设置了浮动的元素还在标准文档流中吗？使用float属性设置页面元素浮动时，属性值left和right有什么区别？使用clear属性扩展盒子高度与使用overflow属性扩展盒子高度有什么区别？提问3/30

本章任务制作北大青鸟网站导航制作视频宣传片列表制作视频宣传片播放页面制作当当网最新上架图书列表页面4/30

本章目标会使用float属性定位网页元素会使用float属性结合无序列表制作横向导航会使用float属性创建横向多列布局会使用clear属性清除浮动会使用overflow进行溢出处理5/30

常见网页布局网站导航主体内容网站版权网站导航左侧链接右侧内容网站版权6/301-3-1布局1-2-1布局

网页中浮动的应用横向导航菜单商品列表7/30

浮动float属性演示示例1：浮动示例原始代码属性值说明left元素向左浮动right元素向右浮动none默认值。元素不浮动，并会显示在其文本中出现的位置……bodydivid=fatherdivclass=layer01imgsrc=image/photo-1.jpgalt=日用品//divdi