logo
logo
Home / 中国vs巴西世界杯 / WEB入门.七 CSS布局模型

- By test - In 中国vs巴西世界杯

WEB入门.七 CSS布局模型

学习内容

标准文档流 流动模型（flow model）浮动模型（float model）CSS基本布局能力目标

理解标准文档流使用流动模型实现页面布局 使用浮动模型实现页面布局掌握常用CSS布局本章简介

上一章节讲解了盒子模型以及页面元素定位，理解了绝对定位、相对定位、包含块三者之间的关系以及应用场合。例如：绝对定位的页面元素会脱离标准文档流，通过指定的坐标位置进行定位；相对定位则不脱离标准文档流，只是相对于元素原有的位置进行偏移，不挤压其他页面元素。设计师可以通过定位盒子来完成基本的页面布局设计。但是盒子模型在大型的门户网站页面设计中只能处理版块之间的关系，不能够适应复杂的页面排版需要，例如布局不能随页面大小自适应等。本章将介绍另外两种布局模型——流动模型和浮动模型。流动模型可以利用网页标准文档流的顺序自动布局，浮动模型可以设置元素的浮动方向。本章将介绍如何在盒子模型的基础上，使用盒子模型来设计出适应多种行业应用的复杂页面布局，如网易、淘宝等门户网站的页面布局。

核心技能部分

3.1 标准文档流在Web 系统中，浏览器扮演着客户端的角色，可以读取从服务器端传输出来的数据。在接收过程中，浏览器按读取的先后顺序解析数据。浏览器的标准文档流可以保证客户端从服务器端所读取的页面元素排列一致，使文档元素接原始设计的顺序显示。

文档流是浏览器解析网页中的一个重要概念，是浏览器通往服务器端的一个管道；浏览器从文档流中读取数据，并按照先后顺序进行解析。

3.1 流动模型3.1.1 流动模型概述流动模型的概念来源于水的流动原理。在显示网页内容时，元素按照从左至右、自上而下的顺序动态分布，如需改变它在网页中的位置，只能通过修改网页结构中元素排列的先后顺序和分布位置来实现。同时，流动模型中的每个元素都是可以改变的，在某个元素前插入一个新元素时，该元素本身及其后元素的位置将自然地向后顺序推移。

流动布局模型是默认状态下网页的布局模型。在没有具体定义position：absolute；或position：fixed；属性以及没有定义浮动float：left；或 float：right；元素的情况下，网页将默认呈现流动布局模型。

块状元素会在其所处的包含元素内按照自上而下的顺序垂直延伸分布，因为默认状态下的块状元素宽度为 100%。实际上，块状元素都会以行的形式占据位置，不管这个元素所包含的内容有多少，也不管把元素的宽度设置多窄。

3.1

CSS代码：

XHTML代码片段：

Box1

Box2

标题元素

段落元素

New Roman"'>系统中，浏览器扮演着客户端的角色，可以读取从服务器端传输出来的数据。在接收过程中，浏览器按读取的先后顺序解析数据。浏览器的标准文档流可以保证客户端从服务器端所读取的页面元素排列一致，使文档元素接原始设计的顺序显示。文档流是浏览器解析网页中的一个重要概念，是浏览器通往服务器端的一个管道；浏览器从文档流中读取数据，并按照先后顺序进行解析。

行内元素会在所处的包含元素内由左向右水平分布。有人将这种分布方式称为文本流，源于文本由左向右地自然流动，它在本质上与 HTTP传输方式和浏览器的解析机制密切相关。文本超出一行时会自动换行显示，然后继续由左向右按顺序依次流动，以此类推。

3.2

CSS代码：

XHTML代码片段：

国际新闻

体育新闻

百度

3.1.1 相对定位流动当定义元素为相对定位即设置属性position:relative; 时，元素也将遵循流动模型的规则；随HTML文档流从左至右、自上而下流动。相对定位的元素不会脱离标准文档流，同时对其它同级元素不会产生任何影响。

3.3

CSS代码：

XHTML代码片段：

block1

block2

这里需要注意的是，当相对定位元素偏移后，它的原位置区域保持不变，其他元素也不会通过流动填充该元素偏移前的位置。所谓的相对，仅指元素本身位置，对其他元素不会产生任何影响。因此，采用相对定位的元素被定义偏移位置后，不会挤占其他元素的位置，但能覆盖其他元素。

3.3

3.1 浮动模型3.1.1 为什么需要浮动模型WEB入门.七 CSS布局模型_java3.4

无标题文档

当前日期

搜索栏

“网站LOGO” 块与“当前日期”块、“搜索栏”块将分别独占一行显示，并没有实现如图3.1.5所期望的效果。究其原因是由于

属于块状元素，块状元素具有独占一行显示的特点。那么，如何实现如图3.1.5所示的三个div块状元素在一行显示呢？那就是浮动模型的魅力。在三个div的CSS样式中添加“float：left”即可实现。

3.5

CSS代码片段：

.logo{

width:30%;

background-color:#0FC;

float:left;/*添加浮动属性*/

}

.today{

width:30%;

background-color:#CCC;

float:left;

}

.search{

width:35%;

background-color:#CF9;

float:left;

}

3.1.1 什么是浮动模型浮动是 CSS 的一个用于定位属性。印刷布局中，文本按照需要围绕图片排版，这种布局方式一般被称为“文字环绕”，如图 3.1.8所示。

图3.1.8 印刷布局格式—文字环绕

在网页设计中，应用 CSS 中 float属性的页面元素相当于印刷布局中被文字环绕的图片，浮动图片仍然是文档流的一部分。这与使用绝对定位的页面元素相比有明显不同。绝对定位的页面元素被完全从文档流中移除，图片出现在文字的上方，其元素不会影响其他元素。浮动定位的元素仍留在文档流中。设置元素浮动的语法：

#container{

float:value;

}

float属性有四个可用的值：

left和right：浮动元素到各自的方向

none：默认的，元素不浮动

inherit：从父级元素获取 float值

3.1.2 浮动模型的特征1. 任何定义为float的元素会自动地被设置为块状元素显示，相当于定义了display:block;声明。可以设置其width 和 height属性，即使是行内元素。块状元素设置浮动后则失去“独占一行”的特征。

3.6

CSS代码片段：

XHTML代码片段：

行内元素流动显示

行内元素浮动显示

在浏览器中的运行结果如图 3.1.9所示。

图3.1.9 浮动模型特征

当第2个span元素被定义为浮动之后，该元素自动以块状显示，因此为span元素定义的宽和高属性值有效。而第1个元素由于是行内元素且没有浮动显示，所以定义的宽和高无效。

2. 浮动模型与流动模型不冲突。当元素被定义为浮动布局时，在垂直方向上它与未被定义为浮动时的位置一样；但在水平方向上，它将最大程度地靠近包含元素边缘。

3. 与普通元素相同，浮动元素始终在包含元素之内游离，也不会破坏元素的包含关系。

3.7

CSS代码片段：

XHTML代码片段：

行内元素流动显示

行内元素浮动显示

在浏览器中的运行结果如图 3.1.10所示。

图3.1.10 浮动模型的特征

3.1.3 浮动塌陷使用浮动(float)的一个比较疑惑的事情在于它们如何影响与之有包含关系的父级元素。若父级元素只包含浮动元素，则其高度塌陷为零。若父级元素不包含任何的可见背景，则该问题难以被发现，如图 1.3.11所示。

3.8

CSS代码片段：

XHTML代码片段：

Son1

Son2

在浏览器中的运行结果如图 3.1.11所示。

图3.1.11 浮动塌陷

3.1.4 浮动清除浮动的自由性给布局带来很多麻烦，浮动塌陷是最典型的问题。为解决这一系列问题，CSS 提供了以下几种清除浮动的方式：

1. clear属性

该属性在一定程度上控制浮动布局中的混乱现象。属性取值包括：

left：清除左边的浮动对象，清除后，当前元素显示在浮动对象下方。

right：清除右边的浮动对象，清除后，当前元素显示在浮动对象下方。

both：清除左右两边的浮动对象，无论哪边存在浮动对象，当前元素均显示在浮动对象下方。

none：默认值，允许两边有浮动对象，当前元素、浮动元素不会换行显示。

#container{

clear =value ;

}

3.9

CSS代码片段：

XHTML代码片段：

DIV1

DIV2

DIV3

在浏览器中的运行结果如图 3.1.12所示。

图 3.1.12 clear 的应用

2. 空div

该方法是一个空的 div 标签。也可以使用其他标签如 p 标签。但 div 是最常用的，它不存在浏览器默认样式，也没有特殊功能，对其他元素没有任何影响。

在浏览器中的运行结果如图 1.3.11 所示。

3.10

CSS代码片段：

XHTML代码片段：

水调歌头

    【宋】苏轼
明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒, 起舞弄清影，何似在人间。

    转朱阁，抵绮户，照无眠。不应有恨，何事偏向别时圆。人有悲欢离合，月有阴晴圆缺，此事古难全。 但愿人长久，千里共婵娟。

在浏览器中的运行结果如图 3.1.13所示。

图3.1.13 空div的应用

3. overflow属性

若父元素的 overflow属性设置为 auto 或 hidden，则父元素会以包含浮动扩展。该方法有良好的语义性，原因是它不需要额外元素。

3.11

CSS代码片段：

XHTML代码片段：

在浏览器中的运行结果如图 3.1.14所示。

图3.1.14 overflow属性

3.2 CSS基本布局3.2.1 单行单列布局单行单列是最简单的布局类型（图 3.1.15），它可以通过流动布局、浮动布局实现，其 XHTML结构代码如下：

单行单列

图3.1.15 单行单列

（1） 使用层布局模型绝对定位，实现单列固定宽度。

3.12

（2） 使用流动或浮动布局实现单列宽度自适应。

3.13

（3） 使用流动布局模型实现单列居中。

3.14

3.2.2 单行两列布局该类型较为常用 (图 3.1.16)，如博客页面通常采用该类型。单行两列可通过浮动布局或层布局实现，其XHTML结构代码如下；

左列

右列

图3.1.16 单行两列

（1） 浮动布局实现

设置固定宽度，左列浮于容器的左侧，右列浮于容器右侧，其CSS布局代码如下。

3.15

用百分比也可以定义列自适应宽度，但需要注意浮动错行的问题：两列宽度总和不得超出包含块的宽度，且需预留一定的空隙。若左右两列之和需为 100%，则不应设置margin和border值，保留默认值为 0px。

3.16

示例3.18第 2 列亦可被定义为向左浮动，在挨近首列的右边浮动显示。有时在实际布局中需固定单列宽度，另一列宽度自适应，此时仅需固定浮动列的宽度，而定义另一列为自适应流动环绕分布。

图3.1.17 单行两列

3.17

（2） 层布局实现

采用绝对定位，并将左右列固定在左右两边。

3.18

此处省略#contain的定义

#contain #content_left {/*左列*/

background-color:red;

position:absolute;

left:0px;

top:0px;

width:20%;

}

#contain #content_right {/*右列*/

background-color:blue;

position:absolute;

right:0px;

top:0px;

width:80%;

}

若页面宽度固定且居中显示，则在包含块中可从添加相对定位属性。

#content{

position:relative;/*相对定位，使其成为绝对定位元素的包含块*/

margin:10pxauto;/* 居中显示*/

width:800px;/*宽度固定*/

overflow:auto;

border:1pxsolid red;

}

图3.1.17

3.2.3 单行三列布局单行三列是最常见的布局类型，它可以使网站内容更加丰富，是一般网站常用的布局类型。当然，三列布局也相对复杂。它可以使用浮动或层布局实现，且有多种实现方式。

（1） 自适应宽度的嵌套浮动布局

3.19

CSS代码片段：

XHTML代码片段：

第1列

第2列

第3列

在浏览器中的运行效果如图3.1.19所示。

图3.1.19 自适应宽度

（2） 并列浮动布局

该类型为固定宽度布局。

3.20

CSS代码片段：

XHTML代码片段：

第1列

第2列

在浏览器中的运行效果如图 3.1.20所示。

图3.1.20 并列浮动布局

（3） 并列层布局

该布局类型可以被定义为自适应宽度层布局，将左右列设置为绝对定位，固定其宽度和位置，并将中间列设置为自适应流动布局。

3.21

CSS代码片段：

XHTML代码片段：

第1列

第2列

在浏览器中的运行效果如图3.1.21所示。

图3.1.21 并列层布局

三列布局样式比较多，可根据页面需要适当调整布局形式。例如，可以将三列均采取绝对定位，固定左右列宽度，中间列根据内容自适应。需要注意的是，在页面整体布局中需要尽量少地使用绝对定位，因其高度是固定的，不能够根据页面实现自适应高度。

3.3 案例分析——单行单列设计XHTML页面实现图文混排CSS列表效果，效果如图 3.1.22所示。

图3.1.22 图文混排

最顶部是栏目名称“当当网”与栏目导航“母婴用品推荐 特惠商品”，栏目名称使用标题元素h3 表示，栏目导航可使用 ul + li 的无序列表。下部的两个链接区域形式相同，左侧被设置为图片链接，右侧为文章列表元素。将左侧的图片与文字链接看作一个段落，用 p标签表示，右侧文章列表使用ul+ li无序列表。

其页面设计步骤如下：

1. 搭建页面结构

将所有元素置入 id名称为 list_dangdang层中，便于控制整体布局；在其内部建立三个层，分别为：list_title、1_showcase、1_boon。第一个标题层应用的类选择器为 list_title，下面的两个内容层应用的类选择器为 list_unit。

2. 向框架中添加页面内容

在 list_title层，置人h3 元素作为栏目名称，建立 ul 列表放置栏目导航；将下面的两个内容层(list_unit)内分别置入段落标签 p，并加入链接图片与文字；另建立一个ul列表以放置文章列表。最后，在每个内容后放置一个clear类的层用来清除浮动。

XHTML 的页面代码如下：

当当网

母婴用品推荐

母婴用品推荐

divCSS教程

特惠商品

3. 编写 CSS布局样式代码

可以写在一个单独的CSS文件中，然后再引入。

3.4 窗口框架简介3.4.1 什么是框架如果页面可以分为几个部分，各个部分之间是相互独立的页面，却又互相有关联。用

户在浏览这种页面的时候，当对其中某一个部分进行操作，如浏览、下载的时候，其他页

面会保持不变，这样的页面就被称为框架结构的页面，也称为多窗口页面。

实际上框架对象本身也一类窗口，它继承了窗口对象的所有特征，并拥有所有的属性

和方法。

使用框架最主要的目的就是创建链接的结构，最常见的框架结构就是网站的导航条作

为一个单独的框架窗口，当用户查看具体的内容时，导航条窗口保持不变，这就为用户的

浏览提供了方便。

3.4.2 框架的基本结构框架主要包含两个部分，一个是框架集，另一个就是具体的框架文件。

框架集就是用来定义这一 HTML 文件为框架模式，并设定视窗如何分割的文件。通俗

一点地说，框架集就是存放框架结构的文件，也是访问框架文件的入口文件。如果网页由

左右二个框架组成，那么除了左右二个网页文件之外，还有一个总的框架集文件。

框架是页面中定义的每一个显示区域，也可以说一个窗口就可以称为一个框架。框架

页面中最基本的内容就是框架集文件，它是整个框架页面的导航文件，其基本语法如下；

框架页面的标题

……

从上面的语法结构中可以看到，在使用框架的页面中，主体标记被框架标记

所代替。而对于框架页面中包含的每一个框架，都是通过标记来定义的。

3.4.3 设置框架集的基本属性框架页面的结构也是在框架集文件中定义的，一般情况下，根据框架的分割方式来分

类，主要包含三种框架结构，分别是：

n 水平分割窗口

n 垂直分割窗口

n 嵌套分割窗口

下面对框架集的结构和一些基本属性进行详细的说明。

3.4.4 水平分割窗口——rows水平分割窗口是将页面沿水平方向切割，也就是将页面分成上下排列的多个窗口。

语法：

……

说明：在该语法中，rows 中可以取多个值，每个值表示一个框架窗口的水平宽度，它

的单位可以是像素，也可以是占浏览器的百分比。但是要注意的是，一般设定了几个 rows

的值，就需要有几个框架，也就是需要有相应数量的参数。

实例代码：

水平分割窗口的效果

运行代码看到页面被分割成上下两个窗口，效果如图 3.1.23 所示。当浏览器大小变化的

时候，框架也会随之等比例缩放。

图3.1.23

3.4.5 垂直分割窗口——cols垂直分割窗口就是将页面沿垂直方向分割成多个窗口，也就是将页面分成左右排列的

多个窗口。

语法：

说明：在该语法中，cols 中可以取多个值，每个值表示一个框架窗口的水平宽度，它

的单位可以是像素，也可以是占浏览器的百分比。与水平分割窗口向同，一般设定了几个

cols 的值，就需要有几个框架，也就是有几个参数。

实例代码：

垂直分割窗口的效果

运行代码看到页面被分割成宽度相同的左右两个窗口，效果如图 3.1.24 所示。当浏览器

大小变化的时候，框架也会随之等比例缩放。

如图 3.1.24

3.4.6 嵌套分割窗口嵌套分割窗口就是在一个页面中，既有水平分割的框架，又有垂直分割的框架。

语法：

… …

… …

当然，也可以先进行垂直分割，再进行水平分割。其语法如下：

… …

…

这两种结构的原理与注意事项和另外两种结构相同，主要是需要注意窗口大小的设置

与窗口个数的统一。

实例代码：

嵌套分割窗口的效果

由代码中可以看出，首先将页面进行水平分割成上下两个窗口，而下面的框架又被垂

直分割成 3 个窗口。因此下面的框架标记被框架集标记代替。运行程序的效果如图

3.1.25 所示。

如图 3.1.25

3.4.7 设置边框——frameborder由前面的几个实例可以看出，在默认情况下，框架窗口的四周有一条边框线，通过

frameborder 参数可以调整边框线的显示情况。

语法：

或者

说明：frameborder 的取值只能为 0 或 1。如果取值为 0，那么边框线将会被隐藏；如

果取值为 1，边框线将会显示。在 frameset 中设置将会对整个框架有效，在 frame 中设置则

只对当前这个框架有效。

实例代码：

设置框架窗口的边框显示效果

运行这段代码，可以看到页面中的部分边框被隐藏，如图 3.1.26 所示。当鼠标移动到窗

口中间的时候会变成n，按下鼠标会看到隐藏的边框，如图 3.1.27 所示。

如图 3.1.26 如图 3.1.27

3.4.8 框架的边框宽度——framespacing框架的边框宽度在默认情况下是 1 像素，通过参数 framespacing 可以调整其大小。

语法：

说明：边框宽度就是在页面中各个边框之间的线条宽度，以像素为单位。而这一参数

只能对框架集使用，对单个框架无效。

实例代码：

设置框架的边框宽度

运行这段程序的效果如图 3.1.28 所示。

如图 3.1.28

3.4.9 框架的边框颜色——bordercolor使用参数bordercolor 可以设置框架集的边框颜色。

语法：

说明：该参数同样只对整个框架集有效，对于单个框架无效。

设置框架的边框颜色

="#9900FF">

运行这段代码，看到两个框架集设置了不同的边框颜色，效果如图 3.1.29 所示。

如图 3.1.29 所示

3.4.10 设置窗口属性在框架结构的页面中，每一个框架窗口都有一个显示页面，这个页面称为框架页面。

框架页面的属性设置都在标记里进行。

3.4.11页面源文件——src框架结构中的各个页面都是一个单独的文字，而这些文件是通过 src 参数进行设置的。

语法：

说明：页面文件是框架页面的具体内容的所在，对于没有设置源文件的框架，只是空

白页面，是没有任何作用的。页面的源文件可以是正常的 HTML 文件，也可以是一个图片

或者其他的文件。

为了说明框架的参数效果，首先设置一个框架页面的内容，代码如下：

段落的缩进效果

相传，两千五百年前，春秋时期的大音乐家俞伯牙，曾学琴于程廉先生，三年不成。后来他沿

着孔子的足迹登游泰山，

观东海日出，看云雾变化，

闻松风长啸，听水涛咆哮，

拜大自然为师，琴艺大有长进，

写出了著名的古琴曲高山和

流水。

将这一文件命名为"src01.html"，将其保存在框架集文件的同一目录下，然后再设置

框架集文件的代码，如下：

设置页面源文件

运行这段代码，效果如图 3.1.30 所示。

如图 3.1.30 所示

3.4.12 页面名称——name页面名称是为了便于页面的查找和链接所提供的一个属性。框架的页面名称中不允许

包含特殊字符、连字符-、空格等，必须是单个的一个单词或者字母组合。

语法：

实例代码：

设置页面名称

这段代码分别为上下两个框架页面命名为"pic"和"text"，允许代码时并不会显示框

架名，因此不会影响框架的显示效果。

3.4.13 调整窗口的尺寸——noresize由图 3.1.30 中可以看出，当鼠用鼠标拖动框架的边框的时候，框架窗口的尺寸就会随之

变化。如果希望框架窗口的大小保持不变，可以设置 noresize 参数。

语法：

说明：在frame 标记中添加"noresize"参数，就表示框架窗口的尺寸不能改变。

实例代码：

禁止改变框架窗口的尺寸

运行这段代码后，将鼠标放置在框架边框上的时候，光标不会变为双箭头形状2，也

无法拖动框架的边框，如图 3.1.31 所示。

如图 3.1.31 所示

3.4.14 边框与页面内容的水平边距——marginwidth框架页面与HTML 中的表格一样，也可以设置边框与页面内容的水平边距。

语法：

说明：水平边距设置页面的左右边缘与框架边框的距离，单位是像素。

首先创建一个 src02.html 页面，代码如下：

设置水平边距


美丽的江南小镇


穿镇而过的狭窄河道，一座座雕刻精致的石桥，傍河而筑的民居，民居楼板底下就是水，石阶

的埠头从楼板下一级级伸出来，女人正在埠头上浣洗，而离他们只有几尺远的乌蓬船上正升起一缕白白的 炊烟，炊烟穿过桥洞飘到对岸，对岸河边有又低又宽的石栏，可坐可躺，几位老人满脸宁静地坐在那里看 着过往船只。比之于沈从文笔下的湘西河边由吊脚楼组成的小镇，江南小镇少了那种浑朴奇险，多了一点 畅达平稳。它们的前边没有险滩，后边没有荒漠，因此虽然幽僻却谈不上什么气势；它们大多很有一些年 代了，但始终比较滋润的生活方式并没有让它们保留下多少废墟和遗迹，因此也听不出多少历史的浩叹； 它们当然有过升沉荣辱，但实在也未曾摆出过太堂皇的场面，因此也不容易产生类似于朱雀桥、乌衣巷的 沧桑之慨。总之，它们的历史路程和现实风貌都显得平实而耐久，狭窄而悠久，就像经纬着它们的条条石 板街道。

创建框架页面集代码如下：

设置水平边距

运行这段代码，可以看到右侧的框架页面中，文本内容与框架的边框之间设置了很大

的空间，从而显得宽松很多，如图 3.1.32 所示。

如图 3.1.32 所示

3.4.15边框与页面内容的垂直边距——marginheight与水平边距类似，通过 marginheight 参数可以设置边框与页面的垂直边距。

语法：

说明：垂直边距用来设置页面的上下边缘与框架边框的距离，单位是像素。

实例代码：

设置垂直边距

marginheight="90">

运行这段代码，可以看到右侧的框架页面中，文本内容与框架的上下边框之间设置了

很大的空间，如图 3.1.33 所示。

如图 3.1.33 所示

3.4.16设置框架滚动条显示——scrolling在默认情况下，当页面的内容超出浏览器窗口的大小时，页面会自动添加滚动条以方

便用户浏览。但是有时候用户希望不显示滚动条，这可以通过设置 scrolling 参数来实现。

语法：

说明：scrolling 参数在这里只能取 Yes、No 或 Auto 三个值中的一个。其中，Yes 表示

一直显示滚动条，而 No 则表示无论什么情况都不显示滚动条；Auto 是系统的默认值，它

是根据具体内容来调整的，也就是当页面长度超出浏览器窗口的范围就会自动显示滚动条。

实例代码：

设置垂直边距

scrolling="No">

运行这段代码，看到如图 3.1.33 的效果。与图 3.1.34 相对比，可以看出设置 scrolling

为 Yes 的时候，即使页面内容远远小于浏览器的大小，也会显示滚动条；而当 scrolling 设

置为 No 的时候，即使内容超出了浏览器的范围，也没有显示滚动条。

如图 3.1.34

3.4.17 不支持框架标记——noframes对于一些低版本的浏览器来说，如果不支持框架结构就无法打开框架页面，但这样还

不够，因为它并不清楚为什么打不开页面。通过 noframes 参数可以设置一些内容（包括文

字或图片）来告诉浏览者其浏览器无法打开框架页面。

语法：

框架页面的标题

… …

… …

说明：在该语法中，标记之间的部分就是在不支持框架的浏览器

中所要显示的内容。它可以与标记一样添加内容。

实例代码：

设置水平边距

对不起，您的浏览器不支持框架页面，因此无法显示此页面！

允许这段代码后，当用户的浏览器不支持框架结构的时候，就是直接显示

标记内如图 3.1.35 所示的页面内容。

如图3.1.35

3.4.18 浮动框架动框架是一种较为特殊的框架，它是在浏览器窗口中嵌套子窗口，也就是整个页面

并不是框架页面，但是却包含一个框架窗口。在框架窗口内显示相应的页面内容。

语法：

说明：与普通框架结构类似，浮动框架也可以设置很多参数，见表 10-1 所示。

表3-1 浮动框架的参数设置

浮动框架可以设置的参数

参数的含义

Src

浮动框架页面的源文件地址

width

浮动框架在页面中显示的宽度

height

浮动框架在页面中显示的高度

align

浮动框架页面在浏览器中的对齐方式，可以为左对齐、右对齐或居中对齐

name

设定框架页面的名称

marginwidth

设置页面与边框的水平间距

marginheight

设置页面与边框的垂直间距

scrolling

设定浮动框架页面内是否显示滚动条

frameborder

设定浮动框架的边框

从表 10-1 中可以看出，很多普通框架页面的属性在浮动框架页面中同样适用，例如

name、scrolling 等，而在普通框架中只对框架集有效的一些参数在这里同样可以设置，如

frameborder 等，此外浮动框架页面还可以设置大小和对齐方式。而对于浮动框架来说，框

架边框的宽度和颜色是无法设置的。也就是与普通框架相比，浮动框架中不包含

framespacing 和 bordercolor 参数。

本节将主要通过设置框架页面的参数和不设置进行对比，从而清晰地说明各个参数的

功能。为了达到这一目的，需要进行如下的准备工作。

创建两个普通的 HTML 页面，其中一个作为浮动框架的载体，命名为 float.html。另一

个作为浮动框架页面的源文件，命名为 source.html。

float.html 文件的源代码：

未添加浮动框架的页面

在这一个页面中将会添加一个浮动框架页面

source.html 文件的源代码：

浮动框架的页面内容

经典影片：魂断蓝桥

《魂断蓝桥》作为电影史上三大凄美不朽爱情影片之一，是一部荡气回肠的爱情经典之作，内

容虽有些传奇化，但文艺气息浓厚，具有甚高的催泪效果。

《魂断蓝桥》（又名《滑铁卢桥》）是一部风靡全球近半个世纪的美国爱情故事片，也是西方

电影在东方获得成功的经典。

剧情介绍：

一次偶然的机会，芭蕾舞女演员玛亚在滑铁卢桥邂逅了高级军官罗伊。由于战争的原因，两人

决定马上结婚，但就在婚礼即将举行的前一天晚上，罗伊接到命令，部队当晚开拔。玛亚无意中看到了罗 伊的名字在阵亡名单中。此时罗伊的母亲来看她，尽管这位贵夫人非常和蔼可亲，但此时的玛亚已情绪混 乱、言语无礼、不知所云。为了维持生活，玛亚和她的好友都沦为街头应招女郎。罗伊并没有死，他回来 了。玛亚的遭遇使她无法面对与罗伊的婚姻及罗伊家族的显赫地位。她来到滑铁卢桥，毫无畏惧地向一辆辆飞驰的军车走去。

完成了两个页面文件之后，就开始设置浮动框架页面的内容。

3.4.19 必需参数：页面源文件——src浮动框架中最基本的参数就是 src，它用来设置浮动框架页面的源文件地址，也是浮动

框架页面必需的参数。因为只有设置了源文件的内容，浮动框架才有意义。

语法：

下面将文件source.html 作为浮动框架页面的源文件插入到 HTML 文件 float.html 中，

实例代码如下：

添加浮动框架的页面

在这一个页面中将会添加一个浮动框架页面

运行程序，效果如图 3.1.36 所示。

图 3.1.36 在页面中添加浮动框架页面

下面介绍在浮动框架页面中可以设置一些框架页面不能设置的参数，称为浮动框架特 有参数，主要包括框架的页面大小以及对齐方式。

3.4.20 特有属性：大小——width和height在普通框架结构中，由于框架就是整个浏览器窗口，因此不需要设置其大小。但是在

浮动框架中，是插入到普通 HTML 页面中的，可以调整整个框架的大小。

语法：

说明：在该语法中，页面的宽度和高度值都以像素为单位。

下面在float.html 文件的基础上设置浮动框架页面的大小，实例代码如下：

设置框架页面的大小

在这一个页面中将会添加一个浮动框架页面

运行这段代码的效果如图 3.1.36 所示，与图 3.1.37 相对比，可以看到页面中的框架大

小被调整得更加协调。

如图 3.1.37

3.4.21特有属性：对齐方式——align除了设置框架大小的参数之外，设置框架的对齐方式也是浮动框架页面所特有的参数。

语法：

说明：在该语法中，对齐方式用来设置浮动框架页面相对于浏览器窗口的水平位置。

它可以取的值包括左对齐 left、右对齐 right 和居中 center。

下面在float.html 文件的基础上设置浮动框架页面的对齐方式，实例代码如下：

设置对齐方式

在这一个页面中将会添加一个浮动框架页面

运行这段代码的效果如图 3.1.37所示，与图 3.1.38 相对比，可以看到页面中的框架位

置被调整，由原来的左侧变成了居中对齐。

图 3.1.38 设置对齐方式

3.4.22 共有参数设置这里讲解普通框架页面和浮动框架页面所共有的一些参数称为浮动框架的基本属性，

主要包括 src、name、marginwidth、marginheight 和 scrolling。由于这些参数的设置方法与

普通框架类似，因此下面通过一个实例简单介绍一下即可。对于具体的参数可以参照 10.3

节的内容。

语法：

说明：在这里，这些参数的取值范围与普通框架相同，因此不再重复。只通过下面的

实例说明这些属性的设置效果。

实例代码：

设置框架的共有参数

在这一个页面中将会添加一个浮动框架页面

运行这段代码，对比图 3.1.38，可以看到框架页面的内容与边框增加了一定的空间，而

且在页面中虽然无法显示全部的内容，但是并没有出现滚动条，如图 3.1.39 所示。

图 3.1.39 设置框架页面的公有参数

3.4.23 其他参数——frameborder在浮动框架页面，还有另外一个特殊的参数可以设置，即框架边框显示属性

frameborder。在普通框架中，该参数既对整个框架集有效，也对单个框架有效。同样地，

在浮动框架中也可以设置这一参数。

语法：

说明：在这里，这些参数的取值范围与普通框架相同。其中 frameborder 只能取 0 或 1，

0 表示不显示边框，1 为默认取值，表示显示边框；framespacing 中设定的边框宽度以像素

为单位；代码颜色是 16 位颜色码。下面只通过一个实例说明这些属性的设置效果。

实例代码：

设置框架页面的边框

在这一个页面中将会添加一个浮动框架页面

运行这段代码，对比图 3.1.39，可以看到浮动框架的页面边框不见了，如图 3.1.40 所示。

图 3.1.40 设置框架页面的边框

3.4.24 框架与链接大部分情况下，在页面中添加框架是为了更好地对页面内容进行导航。因此常常是通

过框架进行链接不同的内容。对于框架页面来说，设置页面的链接需要使用 target 参数，

这一参数的取值不同于它在普通 HTML 页面中的取值，下面进行具体的介绍。

3.4.25 设置普通框架结构的链接普通的框架结构之间通过 target 参数互相链接起来。一般情况下，一个页面中会有一

个框架窗口作为导航页面，里面添加了对另外一个框架的内容的链接设置，而这些链接则

是通过 target 实现的。

下面通过一个具体的实例来讲解关于框架之间的链接方法。

首先需要设定一个框架集文件，用于确定框架页面的整体布局，这里将文件命名

19layout.html。

19layout.html 的实例代码如下：

框架页面的整体结构

此处按照常见网站的上下结构进行布局，将页面上面的框架窗口设置为 150 像素高，

下面的窗口则分割剩下的部分。在该文件中，设置了上面的框架窗口页面为导航页面，命

名为 navig，同时设置其默认打开的页面名为 navig.html 文件。同时还设置该页面窗口不显

示滚动条，而且不允许调整窗口大小。在该文件中还设置下面的框架窗口为内容页面，命

名为 content，设置默认打开的页面名为 content-1.html。

下面就介绍这两个文件的具体编码。其中，navig.html 文件将放置在框架的上方，作为

页面的导航页，其代码如下：

导航页面



白蛇传

              

梅妻鹤子

              

菊花仙子

在这个文件代码中，target 的值是设置将要显示页面内容的框架名称，此处设置为

content，说明设置的这三个内容页面将在 content 框架窗口中显示。

content-1.html 文件是默认的内容页面，其代码如下：

内容页面

白蛇传

      清明时分，西湖岸边花红柳绿，断桥上面游人如梭，真是

一幅春光明媚的美丽画面。突然，从西湖底悄悄升上来两个如花似玉的姑娘，怎么回事？人怎么会从水里 出来呢？原来，她们是两条修炼成了人形的蛇精，虽然如此，但她们并无害人之心，只因羡慕世间的多彩 人生，才一个化名叫白素贞，一个化名叫小青，来到西湖边游玩。

      偏偏老天爷忽然发起脾气来，霎时间下起了倾盆大雨，白

素贞和小青被淋得无处藏身，正发愁呢，突然只觉头顶多了一把伞，转身一看，只见一位温文尔雅、白净

秀气的年轻书生撑着伞在为她们遮雨。白素贞和这小书生四目相交，都不约而同地红了红脸，相互产生了 爱慕之情。小青看在眼里，忙说："多谢！请问客官尊姓大名。"那小书生道："我叫许仙，就住在这断 桥边。"白素贞和小青也赶忙作了自我介绍。从此，他们三人常常见面，白素贞和许仙的感情越来越好， 过了不久，他们就结为夫妻，并开了一间"保和堂"药店，小日子过得可美了！

      由于"保和堂"治好了很多很多疑难病症，而且给穷人看

病配药还分文不收，所以药店的生意越来越红火，远近来找白素贞治病的人越来越多，人们将白素贞亲切 地称为白娘子。可是，"保和堂"的兴隆、许仙和白娘子的幸福生活却惹恼了一个人，谁呢？那就是金山寺的法海和尚。因为人们的病都被白娘子治好了，到金山寺烧香求菩萨的人就少多了，香火不旺，法海和 尚自然就高兴不起来了。这天，他又来到"保和堂"前，看到白娘子正在给人治病，不禁心内妒火中烧，再定睛一瞧，哎呀！原来这白娘子不是凡人，而是条白蛇变的！

      法海虽有点小法术，但他的心术却不正。看出了白娘子的

身份后，他就想拆散许仙白娘子夫妇、搞垮"保和堂"。于是，他偷偷把许仙叫到寺中，对他说："你娘 子是蛇精变的，你快点和她分手吧，不然，她会吃掉你的！"许仙一听，非常气愤，他想：我娘子心地善 良，对我的情意比海还深。就算她是蛇精，也不会害我，何况她如今已有了身孕，我怎能离弃她呢！法海 见许仙不上他的当，恼羞成怒，便把许仙关在了寺里。
       在"保和堂"里，白娘子正焦急地等待许仙回来。一天、

两天，左等、右等，白娘子心急如焚。终于打听到原来许仙被金山寺的法海和尚给"留"住了，白娘子赶紧带着小青来到金山寺，苦苦哀求，请法海放回许仙。法海见了白娘子，一阵冷笑，说道："大胆妖蛇， 我劝你还是快点离开人间，否则别怪我不客气了！"白娘子见法海拒不放人，无奈，只得拔下头上的金钗， 迎风一摇，掀起滔滔大浪，向金山寺直逼过去。法海眼见水漫金山寺，连忙脱下袈裟，变成一道长堤，拦 在寺门外。大水涨一尺，长堤就高一尺，大水涨一丈，长堤就高一丈，任凭波浪再大，也漫不过去。再加 上白娘子有孕在身，实在斗不过法海，后来，法海使出欺诈的手法，将白娘子收进金钵，压在了雷峰塔下， 把许仙和白娘子这对恩爱夫妻活生生地拆散了。

      小青逃离金山寺后，数十载深山练功，最终打败了法海，

将他逼进了螃蟹腹中，救出了白娘子，从此，她和许仙以及他们的孩子幸福地生活在一起，再也不分离了。

完成这几个文件之后，打开框架集页面，效果如图 3.1.41 所示。

用同样的方法添加另外两个内容页面，分别命名为"content-2.html"和"content-3.html"，

具体的代码见配套光盘相对应的文件夹内，这里不再过多介绍。

图 3.1.41 框架页面首页效果

单击页面中的栏目名称"梅妻鹤子"，会在框架的下方页面中显示 content-2.html 文件

的内容，如图 3.1.42 所示。

图 3.1.42 链接到content-2 页面

单击页面中的栏目名称"菊花仙子"，会在框架的下方页面中显示 content-3.html 文件

的内容，如图 3.1.43 所示。这就说明，在框架集中实现了各个窗口页面之间的链接。

图 3.1.43 链接到 content-3 页面

3.4.26 浮动框架与链接在浮动框架中同样也可以制作页面之间的链接，其方法与普通框架类似，下面依然通

过实例来说明。

浮动框架所在的主页面命名为 20float.html，代码如下：

浮动框架窗口的链接



白蛇传

              

梅妻鹤子

              

菊花仙子



运行这段代码，可以看到如图 3.1.44所示的效果。

图 3.1.44 浮动框架窗口的主页面

WEB入门.七 CSS布局模型_java_02单击其中的链接文字"菊花仙子"，可以在下面的浮动框架页面中打开 content-3.html

文件的内容，如图 3.1.45 所示。由此可见，实例中成功实现了浮动框架窗口的链接。

图 3.1.45 链接 content-3.html 文件的效果

WEB入门.七 CSS布局模型_java_03任务实训部分

实训任务1：搭建QQ相册结构训练技能点

Ø 使用overflow属性扩展盒子大小

Ø 使用float属性实现浮动定位

需求说明

搭建页面布局结构，结构关系如图3.2.1所示。

图3.2.1 页面布局

WEB入门.七 CSS布局模型_java_04实现步骤

（1） 使用单行单列布局设计。

（2） 使用DIV定义一个相册盒子（info）。

（3） 在info盒子中添加2个盒子分别用作图片浏览和图片导航。

（4） 使用float属性设置图片浏览区和图片导航区的浮动方向。

关键代码

搭建相册框架

body{

margin:5px;

padding:0px;

font-size:12px;

line-height:1.7;

font-family:Verdana,"宋体";

overflow:hidden; /*隐藏超出的部分*/

background-color:#9CF;

}

div{

border:1px solid 000;

}

#info{

width:800px;

background: #FFF;

margin:20px auto;

text-align:center;

border:1px solid #000;

height:565px;

margin-top:20px;

}

h3{

margin:20px 0px 0px 0px;

color:#CC0000;

font-size:12px;

}

ul,li{

list-style:none;

margin:0px;

padding:0px;

}

a:active,a:hover{

cursor:pointer; /*设置鼠标的样式*/

}

/*图片浏览区*/

#zs{

border:1px solid #000;

height:500px;

overflow:hidden;

text-align:left;

float:left;

width:600px;

position:relative;

margin-left:5px;

}

/*图片导航区*/

#nav{

border:1px solid #000;

margin-left:5px;

width:180px;

height:500px;

overflow:auto;

padding:0px;

text-align:left;

float:left;

}

我的相册

实训任务2：制作QQ相册浏览区训练技能点

Ø 使用margin属性设置补丁大小

Ø 使用display属性改变span为块状显示

Ø 使用border属性设置边框大小

Ø 使用overflow属性隐藏超出相框的内容

需求说明

制作图片浏览区，显示原始图片，如图3.2.2所示。

WEB入门.七 CSS布局模型_java_05图3.2.2 图片浏览区

实现步骤

（1） 在图片浏览区盒子zs中添加以下内容。

（2） 添加浏览区的样式规则。

实训任务3：制作QQ相册导航区训练技能点

Ø float属性的用法

Ø display属性的用法

Ø 使用border属性设置边框大小

Ø 超链接和锚点的用法

需求说明

制作图片导航区，显示原始图片，效果如图3.2.3所示。

图3.2.3 导航区

WEB入门.七 CSS布局模型_java_06实现步骤

（1） 使用float:left实现图片导航区停靠在浏览区右侧。

（2） 使用display:block;设置超链接块状显示。

（3） 使用类选择器定义超链接的大小、边框以及每个导航链接的背景。

（4） 设置超链接href属性，链接到相应的锚点，实现图片浏览。

关键代码

CSS代码片段：

.b1{

background:url(Image/11.jpg);

background-repeat:no-repeat;

}

.b2{

background:url(Image/22.jpg);

background-repeat:no-repeat;

}

.b3{

background:url(Image/33.jpg);

background-repeat:no-repeat;

}

.b4{

background:url(Image/44.jpg);

background-repeat:no-repeat;

}

.b5{

background:url(Image/55.jpg);

background-repeat:no-repeat;

}

.z{

width:160px;

height:150px;

display:block;

border:1pxsolid #FFFFFF;

margin:6px0 4px 10px;

color:#FFF;

}

XHTML代码片段：

实训任务4：相册导航区放在浏览区下方需求说明

在前一阶段基础上，将图片导航区放至图片浏览区底部，效果如图3.2.4所示。

图3.2.4 导航区放底部

WEB入门.七 CSS布局模型_java_07提示：

（1） 定义类选择器.clear{clear:both;}。

（2） 在图片浏览区和图片导航区中间添加一个空div标签，实现浮动清除，并解决浮动塌陷问题。

（3） 定义图片导航区上边框：border-top:3px doublegray。

本章总结

（1）本章主要讲解流动模型和浮动模型，以及浮动模型里面的浮动塌陷。

（2）在布局模型中框架布局至关重要。本章把框架的所有属性逐个详细介绍，读者必须详细阅读。

（3）通过本章学习，读者应该对布局做全面了解。这对我们学习起到至关重要的作用。

巩固练习

一、选择题

1、以下选项中，哪些属于页面布局模型（）。

A. 层模型

B. 盒子模型

C. 流动模型

D. 浮动模型

2.以下选项哪些可以实现清除浮动的方式（）。

A. 空div

B. hover伪类选择器

C. clear属性

D. overflow属性

3.以下关于流动模型说法正确的是（）。

A. 流动模型是基于标准文档流的模型

B. 流动模型是布局设计的默认模型

C. 相对定位元素会脱离标准文档流

D. 绝对定位元素始终停留在文档流中

4.以下哪种元素定位方式会脱离标准文档流（）。

A. 绝对定位

B. 相对定位

C. 浮动定位

D. 静态定位

5.以下哪种布局模型会导致元素塌陷（）。

A. 浮动模型

B. 层模型

C. 盒子模型

D. 流动模型

二、操作题

完成当当网图书简介版面设计，效果如3.3.1所示。

图3.3.1 图书简介

WEB入门.七 CSS布局模型_java_08提示：

（1）页面布局框架代码：

（2）content是整个布局页面；top是水平线以上部分；left是图书封面；right是图书简介。