2015年网页美化与布局电子教案08单元8　网页整体的美化与布局.docVIP

HTML5+CSS3网页美化与布局 单元8　网页整体的美化与布局 PAGE 2 PAGE 3 单元8　网页整体的美化与布局 使用HTML+CSS进行网页布局，能够真正做到Web标准所要求的网页内容与表现相分离，CSS代码可以更好地控制元素定位，使用外边距、边框、颜色等属性可以设置格式，从而使网站的维护更加方便和快捷。网页整体的布局结构通常有两列式、三列式和多列式等多种形式。 【知识预览】 1．CSS定位属性（Positioning） CSS定位(Positioning)属性允许对元素进行定位，CSS为定位和浮动提供了一些属性，利用这些属性，可以建立多列式布局，也可以将布局的一部分与另一部分重叠。 （1）CSS定位机制 CSS有三种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在HTML中的位置决定。 （2）CSS position属性 通过使用 \o CSS position 属性 position属性，我们可以选择4种不同类型的定位，这会影响元素框生成的方式。position属性值的含义如表8-1所示。 表8-1　position属性值的含义 position属性值 使用说明 static 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中 relative 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留 absolute 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框 fixed 元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身 （3）CSS相对定位 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 （4）CSS绝对定位 设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 （5）CSS浮动 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 CSS中，我们使用float属性实现元素的浮动。 （6）行框和清理 浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。 2．网页布局的基本模型 CSS中有三种基本的定位机制：流动模型（flow）、浮动模型（float）和层模型（layer) （1）流动模型 流动模型是HTML默认布局模型，默认状态下（position属性没有定义为absolute或fixed，float属性也没有定义为left或right）的HTML网页元素都是根据流动模型来布局网页内容的。所有网页元素都以流动布局模型作为默认布局方式，流动布局模型的优势在于元素之间不存在错位、覆盖等问题，布局简单，符合人们的浏览习惯。但是不能只用单纯的流动布局模型设计出更加艺术化的网页页面效果。 （2）浮动模型 浮动是一种非常先进的布局方式，能够改变页面中对象的前后流动顺序。浮动的框可以左右移动，直到它的外边缘碰到包含框或另一个浮动框的边缘。 浮动属性float是CSS布局中一个非常重要的属性，该属性的取值决定了元素是否浮动以及如何浮动，none表示元素不浮动，left表示元素左浮动，right表示元素右浮动。 任何网页元素默认状况是不能够浮动的，但都可以使用float属性定义为浮动，块状元素div、p、table和内联元素span、strong、img都可以被定义为浮动。 （3）层布局模型 绝对定位元素遵循层布局模型，网页元素的相互层叠是层布局的一个基本特征，而在流动布局和浮动布局中是无法实现这种层叠效果的。在CSS中可以通过z-index属性来确定定位元素的层叠位置，z-index属性值大的元素位于z-index属性值小的元素之上。如果两个元素的z-index属性值相同，则依据它们在网页文档的声明顺序层叠。 3．使用CSS的定位属性控制元素的位置 通过设置CSS的定位属性可以控制元素的定位方式，定位属性（position）的选项主要有：static（静态）、relative（相对）、absolute（绝对）、fixed（固定）。 （1）static static是元素的默认定位方式