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代碼：

#block1{width:500px; height:30px;background-color:#CCCC00;}

#block2{width:500px; height:30px;background-color:#CCCCFF;}

</style>

XHTML代碼片段：

<body>

</body>

New Roman"'>系統中，瀏覽器扮演着客戶端的角色，可以讀取從服務器端傳輸出來的數據。在接收過程中，瀏覽器按讀取的先後順序解析數據。瀏覽器的標準文檔流可以保證客戶端從服務器端所讀取的頁面元素排列一致，使文檔元素接原始設計的順序顯示。文檔流是瀏覽器解析網頁中的一個重要概念，是瀏覽器通往服務器端的一個管道；瀏覽器從文檔流中讀取數據，並按照先後順序進行解析。

行內元素會在所處的包含元素內由左向右水平分佈。有人將這種分佈方式稱爲文本流，源於文本由左向右地自然流動，它在本質上與 HTTP傳輸方式和瀏覽器的解析機制密切相關。文本超出一行時會自動換行顯示，然後繼續由左向右按順序依次流動，以此類推。

3.2

CSS代碼：

#inlineStyle1{

background-color:#CCCC00;

}

#inlineStyle2{

background-color:#CCCCff;

}

</style>

XHTML代碼片段：

<body>

</body>

3.1.1 相對定位流動

當定義元素爲相對定位即設置屬性position:relative; 時，元素也將遵循流動模型的規則；隨HTML文檔流從左至右、自上而下流動。相對定位的元素不會脫離標準文檔流，同時對其它同級元素不會產生任何影響。

3.3

CSS代碼：

#container{

border:1pxsolid gray;

width:500px;

height:100px;

}

#block1{

position:relative;

left:50px;

top:10px;

background-color:#CCCC00;

}

#block2{

background-color:#CCCCff;

}

</style>

XHTML代碼片段：

<body>

<div id="block1">block1</div>

<div id="block2">block2</div>

</div>

</body>

這裏需要注意的是，當相對定位元素偏移後，它的原位置區域保持不變，其他元素也不會通過流動填充該元素偏移前的位置。所謂的相對，僅指元素本身位置，對其他元素不會產生任何影響。因此，採用相對定位的元素被定義偏移位置後，不會擠佔其他元素的位置，但能覆蓋其他元素。

3.3

3.1 浮動模型

3.1.1 爲什麼需要浮動模型

3.4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>無標題文檔</title>

div{

border: 1px solid #039;

text-align:center;/*文字居中對齊*/

}

#header{

width:100%;

height:80px;

}

.logo{

width:30%;/*設置logo所佔的寬度*/

background-color:#0FC;

}

.today{

width:30%;/*設置today所佔的寬度*/

background-color:#CCC;

}

.search{

width:35%;/*設置search所佔的寬度*/

background-color:#CF9;

}

</style>

</head>

<body>

<divid="header">

<div class="logo">網站LOGO</div>

<divclass="search">搜索欄</div>

</div>

</body>

</html>

“網站LOGO” 塊與“當前日期”塊、“搜索欄”塊將分別獨佔一行顯示，並沒有實現如圖3.1.5所期望的效果。究其原因是由於<div>屬於塊狀元素，塊狀元素具有獨佔一行顯示的特點。那麼，如何實現如圖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代碼片段：

span{ /*定義行內元素span的顯示屬性*/

width:200px;

height:100px;

border:solid1px red;

}

#inline img{/*定義行內元素的圖片顯示屬性*/

width:100px;

height:100px;

}

#float{ /*爲第二個行內元素span定義浮動顯示*/

float:right;

}

</style>

XHTML代碼片段：

<body>

<span id="inline">行內元素流動顯示

<imgsrc="pic1.jpg"/>

</span>

<span id="float">行內元素浮動顯示</span>

</body>

在瀏覽器中的運行結果如圖 3.1.9所示。

圖3.1.9 浮動模型特徵

當第2個span元素被定義爲浮動之後，該元素自動以塊狀顯示，因此爲span元素定義的寬和高屬性值有效。而第1個元素由於是行內元素且沒有浮動顯示，所以定義的寬和高無效。

2. 浮動模型與流動模型不衝突。當元素被定義爲浮動佈局時，在垂直方向上它與未被定義爲浮動時的位置一樣；但在水平方向上，它將最大程度地靠近包含元素邊緣。

3. 與普通元素相同，浮動元素始終在包含元素之內遊離，也不會破壞元素的包含關係。

3.7

CSS代碼片段：

span{ /*定義行內元素span的顯示屬性*/

width:200px;

height:100px;

border:solid1px red;

}

#inline img{/*定義行內元素的圖片顯示屬性*/

width:100px;

height:100px;

}

#float{ /*爲第二個行內元素span定義浮動顯示*/

float:right;

}

#contain{/*定義包含元素屬性*/

width:300px;

height:160px;

padding:50px;/*定義包含元素的內邊距爲50像素*/

border:4pxdouble #999;

}

</style>

XHTML代碼片段：

<body>

<spanid="inline">行內元素流動顯示

</span>

<spanid="float">行內元素浮動顯示</span>

</div>

</body>

在瀏覽器中的運行結果如圖 3.1.10所示。

圖3.1.10 浮動模型的特徵

3.1.3 浮動塌陷

使用浮動(float)的一個比較疑惑的事情在於它們如何影響與之有包含關係的父級元素。若父級元素只包含浮動元素，則其高度塌陷爲零。若父級元素不包含任何的可見背景，則該問題難以被發現，如圖 1.3.11所示。

3.8

CSS代碼片段：

#father{

border:10px solid darkblue;

background-color:lightblue;

width:500px;

padding:5px;

}

#son_1{

border:1pxsolid darkgreen;

background:lightgreen;

width:200px;

height:200px;

float:left;

}

#son_2{

border:1pxsolid darkred;

background:pink;

width:200px;

height:200px;

float:right;

}

</style>

XHTML代碼片段：

<body>

<divid="father">

<divid="son_1">Son1</div>

</div>

</body>

在瀏覽器中的運行結果如圖 3.1.11所示。

圖3.1.11 浮動塌陷

3.1.4 浮動清除

浮動的自由性給佈局帶來很多麻煩，浮動塌陷是最典型的問題。爲解決這一系列問題，CSS 提供了以下幾種清除浮動的方式：

1. clear屬性

該屬性在一定程度上控制浮動佈局中的混亂現象。屬性取值包括：

left：清除左邊的浮動對象，清除後，當前元素顯示在浮動對象下方。

right：清除右邊的浮動對象，清除後，當前元素顯示在浮動對象下方。

both：清除左右兩邊的浮動對象，無論哪邊存在浮動對象，當前元素均顯示在浮動對象下方。

none：默認值，允許兩邊有浮動對象，當前元素、浮動元素不會換行顯示。

#container{

clear =value ;

}

3.9

CSS代碼片段：

div{

width:100px;

height:100px;

border:3px#00F solid;

}

#container{

width:350px;

height:250px;

border:5px#F00 solid;

padding:5px;

position:relative;

float:left;

}

#div1 {

float:left;

position:relative;

}

#div2 {

float:left;

clear:left;

}

#div3 {

float:right;

position:relative;

}

</style>

XHTML代碼片段：

<body>

<divid="div1">DIV1</div>

<divid="div2">DIV2</div>

<divid="div3">DIV3</div>

</div>

</body>

在瀏覽器中的運行結果如圖 3.1.12所示。

圖 3.1.12 clear 的應用

2. 空div

該方法是一個空的 div 標籤。也可以使用其他標籤如 p 標籤。但 div 是最常用的，它不存在瀏覽器默認樣式，也沒有特殊功能，對其他元素沒有任何影響。

在瀏覽器中的運行結果如圖 1.3.11 所示。

3.10

CSS代碼片段：

#nav{

border:5pxsolid red;

width:600px;

padding:10px;

}

a.menu{

display:block;

width:100px;

height:20px;

border:1pxsolid #000000;

text-align:center;

padding-top:10px;

float:left;

}

div#content{

margin:5px;

border:6pxdouble gray;

text-align:left;

width:500px;

float:left;

}

#clear{clear:both;}

</style>

XHTML代碼片段：

<body>

<ahref="#" class="menu">首頁</a>

<ahref="#" class="menu">日誌</a>

<ahref="#" class="menu">相冊</a>

<ahref="#" class="menu">留言</a>

<ahref="#" class="menu">關於</a>

<divid="clear"></div>

</div>

<p>    【宋】蘇軾<br>明月幾時有？把酒問青天。不知天上宮闕，今夕是何年。我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒, 起舞弄清影，何似在人間。</p>

<p>    轉朱閣，抵綺戶，照無眠。不應有恨，何事偏向別時圓。人有悲歡離合，月有陰晴圓缺，此事古難全。但願人長久，千里共嬋娟。</p>

</div>

</body>

在瀏覽器中的運行結果如圖 3.1.13所示。

圖3.1.13 空div的應用

3. overflow屬性

若父元素的 overflow屬性設置爲 auto 或 hidden，則父元素會以包含浮動擴展。該方法有良好的語義性，原因是它不需要額外元素。

3.11

CSS代碼片段：

#father{

border:5px solid darkblue;

background-color:lightblue;

width:600px;

overflow:hidden;/*overflow屬性的hidden值可以清除，auto值也可以清除*/

}

#son_1{

border:1pxsolid darkgreen;

background:lightgreen;

width:200px;

height:200px;

float:right;

}

#son_2{

border:1pxsolid #000;

background:pink;

width:200px;

height:200px;

float:left;

}

</style>

XHTML代碼片段：

<body>

<divid="father">

<divid="son_1"></div>

<divid="son_2"></div>

</div>

</body>

在瀏覽器中的運行結果如圖 3.1.14所示。

圖3.1.14 overflow屬性

3.2 CSS基本佈局

3.2.1 單行單列布局

單行單列是最簡單的佈局類型（圖 3.1.15），它可以通過流動佈局、浮動佈局實現，其 XHTML結構代碼如下：

圖3.1.15 單行單列

（1）使用層佈局模型絕對定位，實現單列固定寬度。

3.12

#content {

width:800px;

height:auto;

position:absolute;

left:100px;

top:50px;

border:1pxsolid #000;

}

</style>

（2）使用流動或浮動佈局實現單列寬度自適應。

3.13

#content {

border:solid1px black;

width:80%;

float:left;

}

</style>

（3）使用流動佈局模型實現單列居中。

3.14

#content{

width:800px;

margin:10pxauto;

text-align:center;

border:1pxsolid #F00;

}

</style>

3.2.2 單行兩列布局

該類型較爲常用 (圖 3.1.16)，如博客頁面通常採用該類型。單行兩列可通過浮動佈局或層佈局實現，其XHTML結構代碼如下；

<divid="content-left">左列</div>

<divid="content-right">右列</div>

</div>

圖3.1.16 單行兩列

（1）浮動佈局實現

設置固定寬度，左列浮於容器的左側，右列浮於容器右側，其CSS佈局代碼如下。

3.15

#content{

margin:10pxauto;

width:774px;

border:3pxsolid #00F;

overflow:auto;

}

#content #content_left{/*左列*/

background-color:#CCCC00;

float: left; /*向左浮動*/

width: 174px; /*固定寬度*/

height: 50px;/*設置高度*/

}

#content #content_right{/*右列*/

background-color:#096;

float: right; /*向右浮動*/

width: 600px; /*固定寬度*/

height: 50px;/*設置高度*/

}

</style>

用百分比也可以定義列自適應寬度，但需要注意浮動錯行的問題：兩列寬度總和不得超出包含塊的寬度，且需預留一定的空隙。若左右兩列之和需爲 100%，則不應設置margin和border值，保留默認值爲 0px。

3.16

#content{

margin:10pxauto;

width:100%;

overflow:auto;

border:1pxsolid red;

}

#content #content_left{/*左列*/

background-color:#CCCC00;

float:left; /*向左浮動*/

width:40%; /*百分比寬度*/

height:50px;/*設置高度*/

}

#content #content_right{/*右列*/

background-color:#096;

float:right; /*向右浮動*/

width: 60%; /*百分比寬度*/

height:50px;/*設置高度*/

}

</style>

示例3.18第 2 列亦可被定義爲向左浮動，在挨近首列的右邊浮動顯示。有時在實際佈局中需固定單列寬度，另一列寬度自適應，此時僅需固定浮動列的寬度，而定義另一列爲自適應流動環繞分佈。

圖3.1.17 單行兩列

3.17

#content{

margin:10pxauto;

width:100%;

overflow:auto;

border:1pxsolid red;

}

#content #content_left{/*左列*/

background-color:#CCCC00;

float: left; /*向左浮動*/

width: 200px; /*固定寬度*/

height: 50px;/*設置高度*/

}

#content #content_right{/*右列*/

background-color:#096;

float: left; /*向右浮動*/

height: 50px;/*設置高度*/

}

</style>

（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%;

}

</style>

若頁面寬度固定且居中顯示，則在包含塊中可從添加相對定位屬性。

#content{

position:relative;/*相對定位，使其成爲絕對定位元素的包含塊*/

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

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

overflow:auto;

border:1pxsolid red;

}

圖3.1.17

3.2.3 單行三列布局

單行三列是最常見的佈局類型，它可以使網站內容更加豐富，是一般網站常用的佈局類型。當然，三列布局也相對複雜。它可以使用浮動或層佈局實現，且有多種實現方式。

（1）自適應寬度的嵌套浮動佈局

3.19

CSS代碼片段：

#content{/*定義包含塊屬性*/

width:100%;

height:auto;/*實現非IE瀏覽器自適應高度*/

}

#column{/*定義左側兩列的子包含塊*/

float:left;

width:60%;

}

#left,#middle,#right{height:40px;}

#left{/*定義左側列寬度*/

float:left;

width:30%;

background-color:#CCCCCC;

}

#middle{/*定義中間列寬度*/

float:right;

width:30%;

}

#right{/*<定義右側列寬度>*/

float:right;

width:40%;

background-color:#CCCCCC;

}

.clear{/*定義浮動清除*/

clear:both

}

</style>

XHTML代碼片段：

<body>

<divid="content">

<divid="column">

</div>

<divid="right">第3列</div>

<divclass="clear"></div>

</div>

</body>

在瀏覽器中的運行效果如圖3.1.19所示。

圖3.1.19 自適應寬度

（2）並列浮動佈局

該類型爲固定寬度佈局。

3.20

CSS代碼片段：

body{/*<定義頁面顯示屬性>*/

margin:0px;

padding-left:180px; /*定義左側補丁爲第1列寬度大小，用來裝第1列欄目*/

padding-right:240px; /*定義右側補丁爲第3列寬度大小，用來裝第3列欄目*/

min-width:480px; /*定義瀏覽器中最小窗口寬度，該值爲第2列、第3列寬度之和*/

}

div{

border:1pxsolid gray;

height:40px;

}

#left { /*定義左列顯示屬性*/

width:180px;

float:left;

margin-left:-180px;/*該偏移寬度爲左列寬度，注意取值爲負*/

}

#middle {/*<定義中間列顯示屬性>*/

width:240px;

float:left;

}

#right {/*定義右列顯示屬性*/

width:240px;

float:left;

margin-right:-100%;/*該偏移寬度爲自身寬度，注意取值爲負*/

}

</style>

XHTML代碼片段：

<body>

</body>

在瀏覽器中的運行效果如圖 3.1.20所示。

圖3.1.20 並列浮動佈局

（3）並列層佈局

該佈局類型可以被定義爲自適應寬度層佈局，將左右列設置爲絕對定位，固定其寬度和位置，並將中間列設置爲自適應流動佈局。

3.21

CSS代碼片段：

body {/*<清除頁面邊距空隙>*/

padding:0;

margin:0;

}

div{

height:40px;

}

#left { /*<定義左列顯示屬性>*/

position:absolute; /*絕對定位*/

top:0px;/*左上固定顯示>*/

left:0px;/*左上固定顯示>*/

width:120px;

background-color:#CCCCCC;

}

#center {/*<定義中間列顯示屬性>*/

padding-left:120px; /*留出左補白顯示左列內容，值要與左列寬度一致*/

padding-right:140px; /*留出右補白顯示右列內容，值要與右列寬度一致*/

}

#right {/*<定義右列顯示屬性>*/

position: absolute; /*絕對定位*/

top:0px;/*右上固定顯示>*/

right:0px; /*右上固定顯示>*/

width:140px;

background-color:#CCCCCC;

}

</style>

XHTML代碼片段：

<body>

</body>

在瀏覽器中的運行效果如圖3.1.21所示。

圖3.1.21 並列層佈局

三列布局樣式比較多，可根據頁面需要適當調整佈局形式。例如，可以將三列均採取絕對定位，固定左右列寬度，中間列根據內容自適應。需要注意的是，在頁面整體佈局中需要儘量少地使用絕對定位，因其高度是固定的，不能夠根據頁面實現自適應高度。

3.3 案例分析——單行單列

設計XHTML頁面實現圖文混排CSS列表效果，效果如圖 3.1.22所示。

圖3.1.22 圖文混排

最頂部是欄目名稱“噹噹網”與欄目導航“母嬰用品推薦特惠商品”，欄目名稱使用標題元素h3 表示，欄目導航可使用 ul + li 的無序列表。下部的兩個鏈接區域形式相同，左側被設置爲圖片鏈接，右側爲文章列表元素。將左側的圖片與文字鏈接看作一個段落，用 p標籤表示，右側文章列表使用ul+ li無序列表。

其頁面設計步驟如下：

1. 搭建頁面結構

<divclass="list_title"></div>

<divclass="list_unit" id="1_boon"></div>

</div>

將所有元素置入 id名稱爲 list_dangdang層中，便於控制整體佈局；在其內部建立三個層，分別爲：list_title、1_showcase、1_boon。第一個標題層應用的類選擇器爲 list_title，下面的兩個內容層應用的類選擇器爲 list_unit。

2. 向框架中添加頁面內容

在 list_title層，置人h3 元素作爲欄目名稱，建立 ul 列表放置欄目導航；將下面的兩個內容層(list_unit)內分別置入段落標籤 p，並加入鏈接圖片與文字；另建立一個ul列表以放置文章列表。最後，在每個內容後放置一個clear類的層用來清除浮動。

XHTML 的頁面代碼如下：

<divclass="list_title">

<ul>

<li><ahref="#" title="母嬰用品推薦">母嬰用品推薦</a></li>

</ul>

</div>

<divclass="list_unit" id="l_showcase">

<p>

<ahref="#"><img src="images/1.jpg" alt="母嬰用品推薦" width="200"height="200"></a>

<span><ahref="#">母嬰用品推薦</a></span> </p>

<ul>

<li>·<a href="#">雅培智護金裝兒童喜康力奶粉4...</a></li>

<li>·<a href="#">多美滋金裝多學1加幼兒配方奶...</a></li>

<li>·<a href="#">惠氏S-26金裝幼兒樂配方奶粉（...</a></li>

<li>·<a href="#">多美滋金裝多學1加幼兒配方奶...</a></li>

<li>·<a href="#">惠氏S-26金裝幼兒樂配方奶粉（...</a></li>

<li>·<a href="#">托馬斯和朋友動畫故事樂園(全...</a></li>

</ul>

</div>

<divclass="list_unit" id="l_boon">

<p>

<ahref="#"><img src="images/2.jpg" alt="divCSS教程" width="200"height="200"></a>

<ul>

<li>·<a href="#">香港小Q豆兒童T恤短袖雙兜泡…</a></li>

<li>·<a href="#">女童彈力牛仔短褲29碼</a></li>

<li>·<a href="#">香港小Q豆兒童T恤貼布刺繡小… </a></li>

<li>·<a href="#">天鵝絨灰色女童長褲8碼</a></li>

<li>·<a href="#">藏藍色純棉彩條圓領衫128CM </a></li>

<li>·<a href="#">男童藍色長袖圓領衫3Y</a></li>

</ul>

</div>

<divclass="clear"></div>

</div>

3. 編寫 CSS佈局樣式代碼

可以寫在一個單獨的CSS文件中，然後再引入。

3.4 窗口框架簡介

3.4.1 什麼是框架

如果頁面可以分爲幾個部分，各個部分之間是相互獨立的頁面，卻又互相有關聯。用

戶在瀏覽這種頁面的時候，當對其中某一個部分進行操作，如瀏覽、下載的時候，其他頁

面會保持不變，這樣的頁面就被稱爲框架結構的頁面，也稱爲多窗口頁面。

實際上框架對象本身也一類窗口，它繼承了窗口對象的所有特徵，並擁有所有的屬性

和方法。

使用框架最主要的目的就是創建鏈接的結構，最常見的框架結構就是網站的導航條作

爲一個單獨的框架窗口，當用戶查看具體的內容時，導航條窗口保持不變，這就爲用戶的

瀏覽提供了方便。

3.4.2 框架的基本結構

框架主要包含兩個部分，一個是框架集，另一個就是具體的框架文件。

框架集就是用來定義這一 HTML 文件爲框架模式，並設定視窗如何分割的文件。通俗

一點地說，框架集就是存放框架結構的文件，也是訪問框架文件的入口文件。如果網頁由

左右二個框架組成，那麼除了左右二個網頁文件之外，還有一個總的框架集文件。

框架是頁面中定義的每一個顯示區域，也可以說一個窗口就可以稱爲一個框架。框架

頁面中最基本的內容就是框架集文件，它是整個框架頁面的導航文件，其基本語法如下；

<html>

<head>

<title>框架頁面的標題</title>

</head>

<frame>

……

</frameset>

</html>

從上面的語法結構中可以看到，在使用框架的頁面中，<body>主體標記被框架標記

<frameset>所代替。而對於框架頁面中包含的每一個框架，都是通過<frame>標記來定義的。

3.4.3 設置框架集的基本屬性

框架頁面的結構也是在框架集文件中定義的，一般情況下，根據框架的分割方式來分

類，主要包含三種框架結構，分別是：

n 水平分割窗口

n 垂直分割窗口

n 嵌套分割窗口

下面對框架集的結構和一些基本屬性進行詳細的說明。

3.4.4 水平分割窗口——rows

水平分割窗口是將頁面沿水平方向切割，也就是將頁面分成上下排列的多個窗口。

語法：

<frame>

……

</frameset>

說明：在該語法中，rows 中可以取多個值，每個值表示一個框架窗口的水平寬度，它

的單位可以是像素，也可以是佔瀏覽器的百分比。但是要注意的是，一般設定了幾個 rows

的值，就需要有幾個框架，也就是需要有相應數量的<frame>參數。

實例代碼：

<html>

<head>

<title>水平分割窗口的效果</title>

</head>

<frame>

</frameset>

</html>

運行代碼看到頁面被分割成上下兩個窗口，效果如圖 3.1.23 所示。當瀏覽器大小變化的

時候，框架也會隨之等比例縮放。

圖3.1.23

3.4.5 垂直分割窗口——cols

垂直分割窗口就是將頁面沿垂直方向分割成多個窗口，也就是將頁面分成左右排列的

多個窗口。

語法：

<frame>

</frameset>

說明：在該語法中，cols 中可以取多個值，每個值表示一個框架窗口的水平寬度，它

的單位可以是像素，也可以是佔瀏覽器的百分比。與水平分割窗口向同，一般設定了幾個

cols 的值，就需要有幾個框架，也就是有幾個<frame>參數。

實例代碼：

<html>

<head>

<title>垂直分割窗口的效果</title>

</head>

<frame>

</frameset>

</html>

運行代碼看到頁面被分割成寬度相同的左右兩個窗口，效果如圖 3.1.24 所示。當瀏覽器

大小變化的時候，框架也會隨之等比例縮放。

如圖 3.1.24

3.4.6 嵌套分割窗口

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

語法：

<frame>

<framesetcols="框架窗口的寬度,框架窗口的寬度,…">

<frame>

… …

</frameset>

<frame>

… …

</frameset>

當然，也可以先進行垂直分割，再進行水平分割。其語法如下：

<frame>

<frame>

… …

</frameset>

<frame>

…

</frameset>

這兩種結構的原理與注意事項和另外兩種結構相同，主要是需要注意窗口大小的設置

與窗口個數的統一。

實例代碼：

<html>

<head>

<title>嵌套分割窗口的效果</title>

</head>

<frame>

<frame>

</frameset>

</html>

由代碼中可以看出，首先將頁面進行水平分割成上下兩個窗口，而下面的框架又被垂

直分割成 3 個窗口。因此下面的框架標記<frame>被框架集標記代替。運行程序的效果如圖

3.1.25 所示。

如圖 3.1.25

3.4.7 設置邊框——frameborder

由前面的幾個實例可以看出，在默認情況下，框架窗口的四周有一條邊框線，通過

frameborder 參數可以調整邊框線的顯示情況。

語法：

或者<frameframeborder="是否顯示">

說明：frameborder 的取值只能爲 0 或 1。如果取值爲 0，那麼邊框線將會被隱藏；如

果取值爲 1，邊框線將會顯示。在 frameset 中設置將會對整個框架有效，在 frame 中設置則

只對當前這個框架有效。

實例代碼：

<html>

<head>

<title>設置框架窗口的邊框顯示效果</title>

</head>

<frame>

</frameset>

</frameset>

</html>

運行這段代碼，可以看到頁面中的部分邊框被隱藏，如圖 3.1.26 所示。當鼠標移動到窗

口中間的時候會變成n，按下鼠標會看到隱藏的邊框，如圖 3.1.27 所示。

如圖 3.1.26 如圖 3.1.27

3.4.8 框架的邊框寬度——framespacing

框架的邊框寬度在默認情況下是 1 像素，通過參數 framespacing 可以調整其大小。

語法：<framesetframespacing="邊框寬度">

說明：邊框寬度就是在頁面中各個邊框之間的線條寬度，以像素爲單位。而這一參數

只能對框架集使用，對單個框架無效。

實例代碼：

<html>

<head>

<title>設置框架的邊框寬度</title>

</head>

<frame>

<frame>

</frameset>

</html>

運行這段程序的效果如圖 3.1.28 所示。

如圖 3.1.28

3.4.9 框架的邊框顏色——bordercolor

使用參數bordercolor 可以設置框架集的邊框顏色。

語法：<framesetbordercolor="顏色代碼">

說明：該參數同樣只對整個框架集有效，對於單個框架無效。

<html>

<head>

<title>設置框架的邊框顏色</title>

</head>

<frame>

<frameset cols="20%,55%,25%" framespacing="30"bordercolor

="#9900FF">

<frame>

</frameset>

</html>

運行這段代碼，看到兩個框架集設置了不同的邊框顏色，效果如圖 3.1.29 所示。

如圖 3.1.29 所示

3.4.10 設置窗口屬性

在框架結構的頁面中，每一個框架窗口都有一個顯示頁面，這個頁面稱爲框架頁面。

框架頁面的屬性設置都在<frame>標記裏進行。

3.4.11頁面源文件——src

框架結構中的各個頁面都是一個單獨的文字，而這些文件是通過 src 參數進行設置的。

語法：<framesrc="頁面源文件地址">

說明：頁面文件是框架頁面的具體內容的所在，對於沒有設置源文件的框架，只是空

白頁面，是沒有任何作用的。頁面的源文件可以是正常的 HTML 文件，也可以是一個圖片

或者其他的文件。

爲了說明框架的參數效果，首先設置一個框架頁面的內容，代碼如下：

<html>

<head>

<title>段落的縮進效果</title>

</head>

<body>

相傳，兩千五百年前，春秋時期的大音樂家俞伯牙，曾學琴於程廉先生，三年不成。後來他沿

着孔子的足跡登遊泰山，

<blockquote>觀東海日出，看雲霧變化，</blockquote>

<blockquote><blockquote>聞松風長嘯，聽水濤咆哮，</blockquote></blockquote>

<blockquote><blockquote><blockquote>拜大自然爲師，琴藝大有長進，

</blockquote></blockquote></blockquote>

<blockquote><blockquote><blockquote><blockquote>寫出了著名的古琴曲高山和

流水。</blockquote></blockquote></blockquote></blockquote>

</body>

</html>

將這一文件命名爲"src01.html"，將其保存在框架集文件的同一目錄下，然後再設置

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

<html>

<head>

<title>設置頁面源文件</title>

</head>

</frameset>

</html>

運行這段代碼，效果如圖 3.1.30 所示。

如圖 3.1.30 所示

3.4.12 頁面名稱——name

頁面名稱是爲了便於頁面的查找和鏈接所提供的一個屬性。框架的頁面名稱中不允許

包含特殊字符、連字符-、空格等，必須是單個的一個單詞或者字母組合。

語法：<framesrc="頁面文件地址" name="頁面名稱">

實例代碼：

<html>

<head>

<title>設置頁面名稱</title>

</head>

</frameset>

</html>

這段代碼分別爲上下兩個框架頁面命名爲"pic"和"text"，允許代碼時並不會顯示框

架名，因此不會影響框架的顯示效果。

3.4.13 調整窗口的尺寸——noresize

由圖 3.1.30 中可以看出，當鼠用鼠標拖動框架的邊框的時候，框架窗口的尺寸就會隨之

變化。如果希望框架窗口的大小保持不變，可以設置 noresize 參數。

語法：<framesrc="頁面文件地址" noresize>

說明：在frame 標記中添加"noresize"參數，就表示框架窗口的尺寸不能改變。

實例代碼：

<html>

<head>

<title>禁止改變框架窗口的尺寸</title>

</head>

</frameset>

</html>

運行這段代碼後，將鼠標放置在框架邊框上的時候，光標不會變爲雙箭頭形狀2，也

無法拖動框架的邊框，如圖 3.1.31 所示。

如圖 3.1.31 所示

3.4.14 邊框與頁面內容的水平邊距——marginwidth

框架頁面與HTML 中的表格一樣，也可以設置邊框與頁面內容的水平邊距。

語法：<framesrc="頁面文件地址" marginwidth="水平邊距">

說明：水平邊距設置頁面的左右邊緣與框架邊框的距離，單位是像素。

首先創建一個 src02.html 頁面，代碼如下：

<html>

<head>

<title>設置水平邊距</title>

</head>

<body>

<br>

<h3><font color="#009933">美麗的江南小鎮</font></h3>

<hr>

穿鎮而過的狹窄河道，一座座雕刻精緻的石橋，傍河而築的民居，民居樓板底下就是水，石階

的埠頭從樓板下一級級伸出來，女人正在埠頭上浣洗，而離他們只有幾尺遠的烏蓬船上正升起一縷白白的炊煙，炊煙穿過橋洞飄到對岸，對岸河邊有又低又寬的石欄，可坐可躺，幾位老人滿臉寧靜地坐在那裏看着過往船隻。比之於沈從文筆下的湘西河邊由吊腳樓組成的小鎮，江南小鎮少了那種渾樸奇險，多了一點暢達平穩。它們的前邊沒有險灘，後邊沒有荒漠，因此雖然幽僻卻談不上什麼氣勢；它們大多很有一些年代了，但始終比較滋潤的生活方式並沒有讓它們保留下多少廢墟和遺蹟，因此也聽不出多少歷史的浩嘆；它們當然有過升沉榮辱，但實在也未曾擺出過太堂皇的場面，因此也不容易產生類似於朱雀橋、烏衣巷的滄桑之慨。總之，它們的歷史路程和現實風貌都顯得平實而耐久，狹窄而悠久，就像經緯着它們的條條石板街道。

</font>

</body>

</html>

創建框架頁面集代碼如下：

<html>

<head>

<title>設置水平邊距</title>

</head>

</frameset>

</html>

運行這段代碼，可以看到右側的框架頁面中，文本內容與框架的邊框之間設置了很大

的空間，從而顯得寬鬆很多，如圖 3.1.32 所示。

如圖 3.1.32 所示

3.4.15邊框與頁面內容的垂直邊距——marginheight

與水平邊距類似，通過 marginheight 參數可以設置邊框與頁面的垂直邊距。

語法：<framesrc="頁面文件地址" marginheight="垂直邊距">

說明：垂直邊距用來設置頁面的上下邊緣與框架邊框的距離，單位是像素。

實例代碼：

<html>

<head>

<title>設置垂直邊距</title>

</head>

<frame src="src02.html"name="text" marginwidth="70"

marginheight="90">

</frameset>

</html>

運行這段代碼，可以看到右側的框架頁面中，文本內容與框架的上下邊框之間設置了

很大的空間，如圖 3.1.33 所示。

如圖 3.1.33 所示

3.4.16設置框架滾動條顯示——scrolling

在默認情況下，當頁面的內容超出瀏覽器窗口的大小時，頁面會自動添加滾動條以方

便用戶瀏覽。但是有時候用戶希望不顯示滾動條，這可以通過設置 scrolling 參數來實現。

語法：<framesrc="頁面源文件"scrolling="是否顯示滾動條">

說明：scrolling 參數在這裏只能取 Yes、No 或 Auto 三個值中的一個。其中，Yes 表示

一直顯示滾動條，而 No 則表示無論什麼情況都不顯示滾動條；Auto 是系統的默認值，它

是根據具體內容來調整的，也就是當頁面長度超出瀏覽器窗口的範圍就會自動顯示滾動條。

實例代碼：

<html>

<head>

<title>設置垂直邊距</title>

</head>

<frame src="src02.html"name="text" marginwidth="70" marginheight="90"

scrolling="No">

</frameset>

</html>

運行這段代碼，看到如圖 3.1.33 的效果。與圖 3.1.34 相對比，可以看出設置 scrolling

爲 Yes 的時候，即使頁面內容遠遠小於瀏覽器的大小，也會顯示滾動條；而當 scrolling 設

置爲 No 的時候，即使內容超出了瀏覽器的範圍，也沒有顯示滾動條。

如圖 3.1.34

3.4.17 不支持框架標記——noframes

對於一些低版本的瀏覽器來說，如果不支持框架結構就無法打開框架頁面，但這樣還

不夠，因爲它並不清楚爲什麼打不開頁面。通過 noframes 參數可以設置一些內容（包括文

字或圖片）來告訴瀏覽者其瀏覽器無法打開框架頁面。

語法：

<html>

<head>

<title>框架頁面的標題</title>

</head>

<frame>

… …

… …

</noframe>

</frameset>

</html>

說明：在該語法中，<noframe></noframe>標記之間的部分就是在不支持框架的瀏覽器

中所要顯示的內容。它可以與<body>標記一樣添加內容。

實例代碼：

<html>

<head>

<title>設置水平邊距</title>

</head>

<p>對不起，您的瀏覽器不支持框架頁面，因此無法顯示此頁面！</p>

</center>

</noframe>

</frameset>

</html>

允許這段代碼後，當用戶的瀏覽器不支持框架結構的時候，就是直接顯示<noframe>

標記內如圖 3.1.35 所示的頁面內容。

如圖3.1.35

3.4.18 浮動框架

動框架是一種較爲特殊的框架，它是在瀏覽器窗口中嵌套子窗口，也就是整個頁面

並不是框架頁面，但是卻包含一個框架窗口。在框架窗口內顯示相應的頁面內容。

語法：

</iframe>

說明：與普通框架結構類似，浮動框架也可以設置很多參數，見表 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 文件的源代碼：

<html>

<head>

<title>未添加浮動框架的頁面</title>

</head>

<body>

<font size="5" color="#CC0000">在這一個頁面中將會添加一個浮動框架頁面

</font>

</body>

</html>

source.html 文件的源代碼：

<html>

<head>

<title>浮動框架的頁面內容</title>

</head>

<body>

《魂斷藍橋》作爲電影史上三大悽美不朽愛情影片之一，是一部蕩氣迴腸的愛情經典之作，內

容雖有些傳奇化，但文藝氣息濃厚，具有甚高的催淚效果。<br>

《魂斷藍橋》（又名《滑鐵盧橋》）是一部風靡全球近半個世紀的美國愛情故事片，也是西方

電影在東方獲得成功的經典。<br>

<hr>

劇情介紹：<br>

一次偶然的機會，芭蕾舞女演員瑪亞在滑鐵盧橋邂逅了高級軍官羅伊。由於戰爭的原因，兩人

決定馬上結婚，但就在婚禮即將舉行的前一天晚上，羅伊接到命令，部隊當晚開拔。瑪亞無意中看到了羅伊的名字在陣亡名單中。此時羅伊的母親來看她，儘管這位貴夫人非常和藹可親，但此時的瑪亞已情緒混亂、言語無禮、不知所云。爲了維持生活，瑪亞和她的好友都淪爲街頭應招女郎。羅伊並沒有死，他回來了。瑪亞的遭遇使她無法面對與羅伊的婚姻及羅伊家族的顯赫地位。她來到滑鐵盧橋，毫無畏懼地向一輛輛飛馳的軍車走去。

</body>

</html>

完成了兩個頁面文件之後，就開始設置浮動框架頁面的內容。

3.4.19 必需參數：頁面源文件——src

浮動框架中最基本的參數就是 src，它用來設置浮動框架頁面的源文件地址，也是浮動

框架頁面必需的參數。因爲只有設置了源文件的內容，浮動框架纔有意義。

語法：<iframesrc="頁面源文件">

下面將文件source.html 作爲浮動框架頁面的源文件插入到 HTML 文件 float.html 中，

實例代碼如下：

<html>

<head>

<title>添加浮動框架的頁面</title>

</head>

<body>

<font size="5" color="#CC0000">在這一個頁面中將會添加一個浮動框架頁面

</font>

</iframe>

</body>

</html>

運行程序，效果如圖 3.1.36 所示。

圖 3.1.36 在頁面中添加浮動框架頁面

下面介紹在浮動框架頁面中可以設置一些框架頁面不能設置的參數，稱爲浮動框架特有參數，主要包括框架的頁面大小以及對齊方式。

3.4.20 特有屬性：大小——width和height

在普通框架結構中，由於框架就是整個瀏覽器窗口，因此不需要設置其大小。但是在

浮動框架中，是插入到普通 HTML 頁面中的，可以調整整個框架的大小。

語法：<iframesrc= src="浮動框架頁面源文件" width="頁面寬度" height="頁面高度">

說明：在該語法中，頁面的寬度和高度值都以像素爲單位。

下面在float.html 文件的基礎上設置浮動框架頁面的大小，實例代碼如下：

<html>

<head>

<title>設置框架頁面的大小</title>

</head>

<body>

<font size="5" color="#CC0000">在這一個頁面中將會添加一個浮動框架頁面

</iframe>

</body>

</html>

運行這段代碼的效果如圖 3.1.36 所示，與圖 3.1.37 相對比，可以看到頁面中的框架大

小被調整得更加協調。

如圖 3.1.37

3.4.21特有屬性：對齊方式——align

除了設置框架大小的參數之外，設置框架的對齊方式也是浮動框架頁面所特有的參數。

語法：<iframesrc= src="浮動框架頁面源文件" align="對齊方式">

說明：在該語法中，對齊方式用來設置浮動框架頁面相對於瀏覽器窗口的水平位置。

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

下面在float.html 文件的基礎上設置浮動框架頁面的對齊方式，實例代碼如下：

<html>

<head>

<title>設置對齊方式</title>

</head>

<body>

<font size="5" color="#CC0000">在這一個頁面中將會添加一個浮動框架頁面

</font>

</iframe>

</body>

</html>

運行這段代碼的效果如圖 3.1.37所示，與圖 3.1.38 相對比，可以看到頁面中的框架位

置被調整，由原來的左側變成了居中對齊。

圖 3.1.38 設置對齊方式

3.4.22 共有參數設置

這裏講解普通框架頁面和浮動框架頁面所共有的一些參數稱爲浮動框架的基本屬性，

主要包括 src、name、marginwidth、marginheight 和 scrolling。由於這些參數的設置方法與

普通框架類似，因此下面通過一個實例簡單介紹一下即可。對於具體的參數可以參照 10.3

節的內容。

語法：

水平距離"marginheight="邊框與頁面的垂直距離" scrolling="是否顯示滾動條">

</iframe>

說明：在這裏，這些參數的取值範圍與普通框架相同，因此不再重複。只通過下面的

實例說明這些屬性的設置效果。

實例代碼：

<html>

<head>

<title>設置框架的共有參數</title>

</head>

<body>

<font size="5" color="#CC0000">在這一個頁面中將會添加一個浮動框架頁面

</font>

name="public" marginwidth="60 "marginheight="40" scrolling="No">

</iframe>

</body>

</html>

運行這段代碼，對比圖 3.1.38，可以看到框架頁面的內容與邊框增加了一定的空間，而

且在頁面中雖然無法顯示全部的內容，但是並沒有出現滾動條，如圖 3.1.39 所示。

圖 3.1.39 設置框架頁面的公有參數

3.4.23 其他參數——frameborder

在浮動框架頁面，還有另外一個特殊的參數可以設置，即框架邊框顯示屬性

frameborder。在普通框架中，該參數既對整個框架集有效，也對單個框架有效。同樣地，

在浮動框架中也可以設置這一參數。

語法：

</iframe>

說明：在這裏，這些參數的取值範圍與普通框架相同。其中 frameborder 只能取 0 或 1，

0 表示不顯示邊框，1 爲默認取值，表示顯示邊框；framespacing 中設定的邊框寬度以像素

爲單位；代碼顏色是 16 位顏色碼。下面只通過一個實例說明這些屬性的設置效果。

實例代碼：

<html>

<head>

<title>設置框架頁面的邊框</title>

</head>

<body>

<font size="5" color="#CC0000">在這一個頁面中將會添加一個浮動框架頁面

</font>

name="public" marginwidth="60 " marginheight="40"scrolling="No"

frameborder="0">

</iframe>

</body>

</html>

運行這段代碼，對比圖 3.1.39，可以看到浮動框架的頁面邊框不見了，如圖 3.1.40 所示。

圖 3.1.40 設置框架頁面的邊框

3.4.24 框架與鏈接

大部分情況下，在頁面中添加框架是爲了更好地對頁面內容進行導航。因此常常是通

過框架進行鏈接不同的內容。對於框架頁面來說，設置頁面的鏈接需要使用 target 參數，

這一參數的取值不同於它在普通 HTML 頁面中的取值，下面進行具體的介紹。

3.4.25 設置普通框架結構的鏈接

普通的框架結構之間通過 target 參數互相鏈接起來。一般情況下，一個頁面中會有一

個框架窗口作爲導航頁面，裏面添加了對另外一個框架的內容的鏈接設置，而這些鏈接則

是通過 target 實現的。

下面通過一個具體的實例來講解關於框架之間的鏈接方法。

首先需要設定一個框架集文件，用於確定框架頁面的整體佈局，這裏將文件命名

19layout.html。

19layout.html 的實例代碼如下：

<html>

<head>

<title>框架頁面的整體結構</title>

</head>

</frameset>

</html>

此處按照常見網站的上下結構進行佈局，將頁面上面的框架窗口設置爲 150 像素高，

下面的窗口則分割剩下的部分。在該文件中，設置了上面的框架窗口頁面爲導航頁面，命

名爲 navig，同時設置其默認打開的頁面名爲 navig.html 文件。同時還設置該頁面窗口不顯

示滾動條，而且不允許調整窗口大小。在該文件中還設置下面的框架窗口爲內容頁面，命

名爲 content，設置默認打開的頁面名爲 content-1.html。

下面就介紹這兩個文件的具體編碼。其中，navig.html 文件將放置在框架的上方，作爲

頁面的導航頁，其代碼如下：

<html>

<head>

</head>

<body>

</center>

</body>

</html>

在這個文件代碼中，target 的值是設置將要顯示頁面內容的框架名稱，此處設置爲

content，說明設置的這三個內容頁面將在 content 框架窗口中顯示。

content-1.html 文件是默認的內容頁面，其代碼如下：

<html>

<head>

</head>

<body>

</center>

      清明時分，西湖岸邊花紅柳綠，斷橋上面遊人如梭，真是

一幅春光明媚的美麗畫面。突然，從西湖底悄悄升上來兩個如花似玉的姑娘，怎麼回事？人怎麼會從水裏出來呢？原來，她們是兩條修煉成了人形的蛇精，雖然如此，但她們並無害人之心，只因羨慕世間的多彩人生，才一個化名叫白素貞，一個化名叫小青，來到西湖邊遊玩。<br>

      偏偏老天爺忽然發起脾氣來，霎時間下起了傾盆大雨，白

素貞和小青被淋得無處藏身，正發愁呢，突然只覺頭頂多了一把傘，轉身一看，只見一位溫文爾雅、白淨

秀氣的年輕書生撐着傘在爲她們遮雨。白素貞和這小書生四目相交，都不約而同地紅了紅臉，相互產生了愛慕之情。小青看在眼裏，忙說："多謝！請問客官尊姓大名。"那小書生道："我叫許仙，就住在這斷橋邊。"白素貞和小青也趕忙作了自我介紹。從此，他們三人常常見面，白素貞和許仙的感情越來越好，過了不久，他們就結爲夫妻，並開了一間"保和堂"藥店，小日子過得可美了！<br>

      由於"保和堂"治好了很多很多疑難病症，而且給窮人看

病配藥還分文不收，所以藥店的生意越來越紅火，遠近來找白素貞治病的人越來越多，人們將白素貞親切地稱爲白娘子。可是，"保和堂"的興隆、許仙和白娘子的幸福生活卻惹惱了一個人，誰呢？那就是金山寺的法海和尚。因爲人們的病都被白娘子治好了，到金山寺燒香求菩薩的人就少多了，香火不旺，法海和尚自然就高興不起來了。這天，他又來到"保和堂"前，看到白娘子正在給人治病，不禁心內妒火中燒，再定睛一瞧，哎呀！原來這白娘子不是凡人，而是條白蛇變的！<br>

      法海雖有點小法術，但他的心術卻不正。看出了白娘子的

身份後，他就想拆散許仙白娘子夫婦、搞垮"保和堂"。於是，他偷偷把許仙叫到寺中，對他說："你娘子是蛇精變的，你快點和她分手吧，不然，她會喫掉你的！"許仙一聽，非常氣憤，他想：我娘子心地善良，對我的情意比海還深。就算她是蛇精，也不會害我，何況她如今已有了身孕，我怎能離棄她呢！法海見許仙不上他的當，惱羞成怒，便把許仙關在了寺裏。<br>       在"保和堂"裏，白娘子正焦急地等待許仙回來。一天、

兩天，左等、右等，白娘子心急如焚。終於打聽到原來許仙被金山寺的法海和尚給"留"住了，白娘子趕緊帶着小青來到金山寺，苦苦哀求，請法海放回許仙。法海見了白娘子，一陣冷笑，說道："大膽妖蛇，我勸你還是快點離開人間，否則別怪我不客氣了！"白娘子見法海拒不放人，無奈，只得拔下頭上的金釵，迎風一搖，掀起滔滔大浪，向金山寺直逼過去。法海眼見水漫金山寺，連忙脫下袈裟，變成一道長堤，攔在寺門外。大水漲一尺，長堤就高一尺，大水漲一丈，長堤就高一丈，任憑波浪再大，也漫不過去。再加上白娘子有孕在身，實在鬥不過法海，後來，法海使出欺詐的手法，將白娘子收進金鉢，壓在了雷峯塔下，把許仙和白娘子這對恩愛夫妻活生生地拆散了。<br>

      小青逃離金山寺後，數十載深山練功，最終打敗了法海，

將他逼進了螃蟹腹中，救出了白娘子，從此，她和許仙以及他們的孩子幸福地生活在一起，再也不分離了。

</body>

</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，代碼如下：

<html>

<head>

<title>浮動框架窗口的鏈接</title>

</head>

<body>

</center>

height="170" align="center">

</iframe>

</body>

</html>

運行這段代碼，可以看到如圖 3.1.44所示的效果。

圖 3.1.44 浮動框架窗口的主頁面

單擊其中的鏈接文字"菊花仙子"，可以在下面的浮動框架頁面中打開 content-3.html

文件的內容，如圖 3.1.45 所示。由此可見，實例中成功實現了浮動框架窗口的鏈接。

圖 3.1.45 鏈接 content-3.html 文件的效果

任務實訓部分

實訓任務1：搭建QQ相冊結構

訓練技能點

Ø 使用overflow屬性擴展盒子大小

Ø 使用float屬性實現浮動定位

需求說明

搭建頁面佈局結構，結構關係如圖3.2.1所示。

圖3.2.1 頁面佈局

實現步驟

（1）使用單行單列布局設計。

（2）使用DIV定義一個相冊盒子（info）。

（3）在info盒子中添加2個盒子分別用作圖片瀏覽和圖片導航。

（4）使用float屬性設置圖片瀏覽區和圖片導航區的浮動方向。

關鍵代碼

<!DOCTYPEhtml PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>搭建相冊框架</title>

<styletype="text/css">

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;

}

</style>

</head>

<body>

<divid="nav"></div>

</div>

</body>

</html>

實訓任務2：製作QQ相冊瀏覽區

訓練技能點

Ø 使用margin屬性設置補丁大小

Ø 使用display屬性改變span爲塊狀顯示

Ø 使用border屬性設置邊框大小

Ø 使用overflow屬性隱藏超出相框的內容

需求說明

製作圖片瀏覽區，顯示原始圖片，如圖3.2.2所示。

圖3.2.2 圖片瀏覽區

實現步驟

（1）在圖片瀏覽區盒子zs中添加以下內容。

<ul>

</ul>

（2）添加瀏覽區的樣式規則。

實訓任務3：製作QQ相冊導航區

訓練技能點

Ø float屬性的用法

Ø display屬性的用法

Ø 使用border屬性設置邊框大小

Ø 超鏈接和錨點的用法

需求說明

製作圖片導航區，顯示原始圖片，效果如圖3.2.3所示。

圖3.2.3 導航區

實現步驟

（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代碼片段：

<ahref="#z1" class="b1 z" title="圖片1"></a>

<ahref="#z2" class="b2 z" title="圖片2"></a>

<ahref="#z3" class="b3 z" title="圖片3"></a>

<ahref="#z4" class="b4 z" title="圖片4"></a>

<ahref="#z5" class="b5 z" title="圖片5"></a>

</div>

實訓任務4：相冊導航區放在瀏覽區下方

需求說明

在前一階段基礎上，將圖片導航區放至圖片瀏覽區底部，效果如圖3.2.4所示。

圖3.2.4 導航區放底部

提示：

（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 圖書簡介

提示：

（1）頁面佈局框架代碼：

<divid="top"></div>

<divid="left"></div>

<divid="right"></div>

</div>

（2）content是整個佈局頁面；top是水平線以上部分；left是圖書封面；right是圖書簡介。