《网页设计与制作（活页式）》 课件 项目7 布局网页.pptx

网页设计与制作项目七布局网页N

知识目标理解元素的浮动属性掌握元素的各种定位方法掌握常用的DIV+CSS布局方式

7.1.1元素的浮动任务7.1布局常用属性默认情况下，网页中的块元素会以标准流的方式进行排列，即将块元素从上到下一一罗列，但在网页实际排版时，有时需要将块元素进行水平排列，这就需要为元素设置浮动属性。所谓元素的浮动是指设置了浮动属性的元素会脱离标准流的控制，移动到指定位置。在CSS中，通过float属性来设置左浮动或右浮动，其语法格式如下：选择器{float：left|right|none；}设为left或right，使浮动的元素可以向左或向右移动，直到它的外边缘碰到父元素或另一个浮动元素的边框为止。若不设置float属性，则float属性值默认为none，即不浮动。

7.1.1元素的浮动任务7.1布局常用属性实例1-1未添加float属性两个盒子都没有添加float属性时，盒子自上而下排列。

7.1.1元素的浮动任务7.1布局常用属性实例1-2未添加float属性给两个盒子添加float属性

7.1.1元素的浮动任务7.1布局常用属性实例2-1未添加float属性

7.1.1元素的浮动任务7.1布局常用属性实例2-2添加float属性的页面

7.1.1元素的浮动任务7.1布局常用属性

7.1.1元素的浮动任务7.1布局常用属性若要段落的文字按原文档流的方式显示，即不受前面浮动元素的影响，则需要清除浮动。在CSS中，使用clear属性清除浮动，其语法格式如下：选择器{clear:left|right|both;}其中，值为left时，清除左侧浮动的影响；值为right时，清除右侧浮动的影响；值为both时，同时清除左右两侧浮动的影响。常用的属性值是both。

7.1.1元素的浮动任务7.1布局常用属性实例2-3清除浮动影响

7.1.1元素的浮动任务7.1布局常用属性实例2-3清除浮动影响需要注意的是，clear属性只能清除元素左右两侧浮动的影响，而在制作网页时，经常会遇到一些特殊的浮动影响。例如，对子元素设置浮动时，如果不对其父元素定义高度，那么子元素的浮动会对父元素产生影响

7.1.1元素的浮动任务7.1布局常用属性实例3子元素浮动对父元素的影响

7.1.1元素的浮动任务7.1布局常用属性实例3子元素浮动对父元素的影响

7.1.1元素的浮动任务7.1布局常用属性实例3-1子元素浮动对父元素的影响

7.1.1元素的浮动任务7.1布局常用属性实例3-1子元素浮动对父元素的影响子元素和父元素为嵌套关系，不存在左右位置，所以使用clear属性并不能清除子元素浮动对父元素的影响。需要使用overflow属性清除浮动，从而使父元素适应子元素的高，进而显示所设置的颜色

7.1.2元素的定位任务7.1布局常用属性元素设置浮动属性后，可以使元素灵活地排列，但却无法对元素的位置进行精确控制。使用元素的定位等相关属性可以对元素进行精确定位。

7.1.2元素的定位任务7.1布局常用属性1.元素的定位属性（1）定位方式在CSS中，position属性用于定义元素的定位方式，其常用语法格式如下：选择器{position:static|relative|absolute;}

7.1.2元素的定位任务7.1布局常用属性position属性值的含义及解释

7.1.2元素的定位任务7.1布局常用属性1.元素的定位属性（2）确定元素位置position属性仅仅用于定义元素以哪种方式定位，并不能确定元素的具体位置。在CSS中，通过left、right、top、bottom四个属性来精确定位元素的位置。

7.1.2元素的定位任务7.1布局常用属性元素精确定位的属性值及含义

7.1.2元素的定位任务7.1布局常用属性2.静态定位静态定位（static）是元素的默认定位方式，指各个元素按照标准流（包括浮动方式）进行定位。在静态定位状态下，无法通过left、right、top、bottom四个属性来改变元素位置。

7.1.2元素的定位任务7.1布局常用属性实例4静态定位

7.1.2元素的定位任务7.1布局常用属性3.相对定位采用相对定位（relative）的元素会相对于自身原本的位置，通过偏移指定的距离到达新的位置。其中，水平方向的偏移量由left或right属性指定，竖直方向的偏移量由top和bottom属性指定。

7.1.2元素的定位任务7.1布局常用属性实例5相对定位

7.1.2元素的定位任务7.1布局常用属性4.绝对定位绝对定位（absolute）是将元素依据最近（相对或绝对）定位的父元素进行定位，若所有父元素都没有定位，则依据body元素（浏览器窗口）进行定位。

7.1.2元