Web前端開發(fā)案例教程第9章課件

1、第9章 HTML5+CSS3布局網(wǎng)頁 德才兼?zhèn)?知行合一 理解元素的浮動屬性； 掌握元素的各種定位方法； 掌握常用的HTML5+CSS3布局方式。第9章 HTML5+CSS3布局網(wǎng)頁 德才兼?zhèn)?知識準(zhǔn)備案例實現(xiàn)2德才兼?zhèn)?知行合一9.19.29.3案例：學(xué)院網(wǎng)站主頁布局第9章 HTML5+CSS3布局網(wǎng)頁 知識準(zhǔn)備案例實現(xiàn)2德才兼?zhèn)?知行合一9.199.1 案例：學(xué)院網(wǎng)站主頁布局3德才兼?zhèn)?知行合一第9章 HTML5+CSS3布局網(wǎng)頁 9.1 案例：學(xué)院網(wǎng)站主頁布局3德才兼?zhèn)?根據(jù)學(xué)院網(wǎng)站主頁效果圖，對主頁的布局進(jìn)行劃分。創(chuàng)建網(wǎng)頁，對學(xué)院網(wǎng)站的主頁進(jìn)行布局。布局瀏覽效果如圖所示。 9.1 案例

2、：學(xué)院網(wǎng)站主頁布局4德才兼?zhèn)?知行合一根據(jù)學(xué)院網(wǎng)站主頁效果圖，對主頁的布局進(jìn)行劃分。創(chuàng)建網(wǎng)頁，對學(xué)9.2 知識準(zhǔn)備 5德才兼?zhèn)?知行合一第9章 HTML5+CSS3布局網(wǎng)頁 9.2 知識準(zhǔn)備 5德才兼?zhèn)?知行6德才兼?zhèn)?知行合一 9.2.1 元素的浮動學(xué)院網(wǎng)站主頁中的塊，有的是水平排列，有的豎直排列。但默認(rèn)情況下，網(wǎng)頁中的塊元素會以標(biāo)準(zhǔn)流的方式進(jìn)行豎直排列，即將塊元素從上到下一一羅列。但在網(wǎng)頁實際排版時，有時需要將塊元素進(jìn)行水平排列，這就需要為元素設(shè)置浮動屬性。6德才兼?zhèn)?知行合一 9.2.1 元素的浮動7德才兼?zhèn)?知行合一 9.2.1 元素的浮動所謂元素的浮動是指設(shè)置了浮動屬性的元素會脫離標(biāo)

3、準(zhǔn)流的控制，移動到指定位置。在CSS中，通過float屬性來設(shè)置左浮動或右浮動。其語法格式如下。選擇器float:left|right|none;注意：設(shè)為left或right，使浮動的元素可以向左或向右移動，直到它的外邊緣碰到父元素或另一個浮動元素的邊框為止。若不設(shè)置float屬性，則float屬性值默認(rèn)為none，即不浮動。7德才兼?zhèn)?知行合一 9.2.1 元素的浮動8德才兼?zhèn)?知行合一 9.2.1 元素的浮動例9-1 在網(wǎng)頁中定義兩個盒子，文件名：9-1.html，代碼如下：#one /*定義第一個盒子的樣式*/width: 300px;height: 200px;background-

4、color: #E08789;#two /*定義第二個盒子的樣式*/width: 300px;height: 200px;background-color: #FF0000;此時瀏覽網(wǎng)頁的效果圖8德才兼?zhèn)?知行合一 9.2.1 元素的浮動設(shè)置浮動屬性后，盒子水平排列。浮動元素不再占用原文檔流的位置，它會對頁面中其他元素的排版產(chǎn)生影響。9德才兼?zhèn)?知行合一 9.2.1 元素的浮動#one /*定義第一個盒子的樣式*/width: 300px;height: 200px;background-color: #E08789;#two /*定義第二個盒子的樣式*/width: 300px;height

5、: 200px;background-color: #FF0000;#one,#twofloat:left;若給兩個盒子添加浮動屬性，代碼如下：添加浮動屬性后的網(wǎng)頁的效果圖設(shè)置浮動屬性后，盒子水平排列。浮動元素不再占用原文檔流的位置10德才兼?zhèn)?知行合一 9.2.1 元素的浮動例9-2 在網(wǎng)頁中定義兩個盒子，在盒子下面再顯示一段段落文字。文件名：9-2.html。瀏覽網(wǎng)頁時效果圖如下所示。10德才兼?zhèn)?知行合一 9.2.1 元素的浮11德才兼?zhèn)?知行合一 9.2.1 元素的浮動這里是段落文字，這里是段落文字，這里是段落文字，這里是#one /*定義第一個盒子的樣式*/width: 300px;

6、height: 200px;background-color: #E08789;#two /*定義第二個盒子的樣式*/width: 300px;height: 200px;background-color: #F00;搭建HTML結(jié)構(gòu)如下：CSS樣式表代碼如下：此時網(wǎng)頁中的元素按標(biāo)準(zhǔn)流的方式自上而下排列。11德才兼?zhèn)?知行合一 9.2.1 元素的浮12德才兼?zhèn)?知行合一 9.2.1 元素的浮動若給兩個盒子添加浮動屬性，修改CSS樣式表代碼如下：#one /*定義第一個盒子的樣式*/width: 300px;height: 200px;background-color: #E08789;#two

7、 /*定義第二個盒子的樣式*/width: 300px;height: 200px;background-color: #F00;#one,#twofloat:left; /*設(shè)置左浮動*/此時網(wǎng)頁瀏覽效果如下圖所示：可以看出，塊元素設(shè)置浮動屬性后，會形成文字與塊環(huán)繞的效果。若要清除浮動，則需要使用clear屬性。12德才兼?zhèn)?知行合一 9.2.1 元素的浮13德才兼?zhèn)?知行合一 9.2.1 元素的浮動清除浮動屬性對段落元素的影響，修改CSS樣式表代碼如下：#one /*定義第一個盒子的樣式*/width: 300px;height: 200px;background-color: #E087

8、89;#two /*定義第二個盒子的樣式*/width: 300px;height: 200px;background-color: #F00;#one,#twofloat:left; /*設(shè)置左浮動*/pclear:both; /*清除浮動的影響*/此時網(wǎng)頁瀏覽效果如下圖所示：13德才兼?zhèn)?知行合一 9.2.1 元素的浮14德才兼?zhèn)?知行合一 9.2.1 元素的浮動需要注意的是，clear屬性只能清除元素左右兩側(cè)浮動的影響，但是在制作網(wǎng)頁時，經(jīng)常會遇到一些特殊的浮動影響。例如，對子元素設(shè)置浮動時，如果不對其父元素定義高度，則子元素的浮動會對父元素產(chǎn)生影響，下面舉例說明。14德才兼?zhèn)?知行合一

9、 9.2.1 元素的浮15德才兼?zhèn)?知行合一 9.2.1 元素的浮動例9-3 在網(wǎng)頁中定義一個大盒子，在其中包含兩個子盒子。文件名：9-3.html，代碼如下： #box /*定義大盒子的樣式，不設(shè)置高度*/width: 700px;background: #9F0;#one /*定義子盒子的樣式*/width: 300px;height: 200px;background-color: #E08789;float: left; /*設(shè)置左浮動*/margin: 10px;#two /*定義子盒子的樣式*/width: 300px;height: 200px;background-color:

10、 #F00;float: left; /*設(shè)置左浮動*/margin: 10px;搭建HTML結(jié)構(gòu)如下：CSS樣式表代碼如右：15德才兼?zhèn)?知行合一 9.2.1 元素的浮16德才兼?zhèn)?知行合一 9.2.1 元素的浮動瀏覽網(wǎng)頁，效果如圖所示。從上圖可以看出，此時沒有看到父元素。也就是說子元素設(shè)置浮動后，由于父元素沒有設(shè)置高度，受子元素浮動的影響，所以父元素沒有顯示。16德才兼?zhèn)?知行合一 9.2.1 元素的浮17德才兼?zhèn)?知行合一 9.2.1 元素的浮動子元素和父元素為嵌套關(guān)系，不存在左右位置，所以使用clear屬性并不能清除子元素浮動對父元素的影響。那如何使父元素適應(yīng)子元素的高，進(jìn)行顯示呢？最

11、簡單的方法是使用overflow屬性清除浮動。代碼如下：17德才兼?zhèn)?知行合一 9.2.1 元素的浮18德才兼?zhèn)?知行合一 9.2.1 元素的浮動#two /*定義子盒子的樣式*/width: 300px;height: 200px;background-color: #F00;float: left; /*設(shè)置左浮動*/margin: 10px;修改例9-3 中CSS樣式表代碼如下：#box /*定義大盒子的樣式，不設(shè)置高度*/width: 700px;background: #9F0;overflow:hidden; /*清除浮動，使父元素適應(yīng)子元素的高*/#one /*定義子盒子的樣式*

12、/width: 300px;height: 200px;background-color: #E08789;float: left; /*設(shè)置左浮動*/margin: 10px;18德才兼?zhèn)?知行合一 9.2.1 元素的浮19德才兼?zhèn)?知行合一 9.2.1 元素的浮動此時瀏覽網(wǎng)頁，效果如下圖所示?？梢钥闯?，父元素又被子元素?fù)伍_，即子元素浮動對父元素的影響已經(jīng)清除。19德才兼?zhèn)?知行合一 9.2.1 元素的浮20德才兼?zhèn)?知行合一 9.2.2 元素的定位浮動布局雖然靈活，但是卻無法對元素的位置進(jìn)行精確的控制。在CSS中，通過定位屬性可以實現(xiàn)網(wǎng)頁中元素的精確定位。什么是定位？20德才兼?zhèn)?知行合一

13、 9.2.2 元素的定21德才兼?zhèn)?知行合一 9.2.2 元素的定位1、元素的定位屬性（1）定位方式在CSS中，position屬性用于定義元素的定位方式，其常用語法格式如下：選擇器position:static|relative|absolute|fixed; 說明：static：靜態(tài)定位，默認(rèn)定位方式。relative：相對定位，相對于其原文檔流的位置進(jìn)行定位。absolute：絕對定位，相對于其上一個已經(jīng)定位的父元素進(jìn)行定位。fixed：固定定位，相對于瀏覽器窗口進(jìn)行定位。21德才兼?zhèn)?知行合一 9.2.2 元素的定22德才兼?zhèn)?知行合一 9.2.2 元素的定位1、元素的定位屬性（2）確

14、定元素位置position屬性僅僅用于定義元素以哪種方式定位，并不能確定元素的具體位置。在CSS中，通過left、right、top、bottom四個屬性來精確定位元素的位置。left：定義元素相對于其父元素左邊線的距離。right：定義元素相對于其父元素右邊線的距離。top：定義元素相對于其父元素上邊線的距離。bottom：定義元素相對于其父元素下邊線的距離。22德才兼?zhèn)?知行合一 9.2.2 元素的定23德才兼?zhèn)?知行合一 9.2.2 元素的定位2、靜態(tài)定位靜態(tài)定位（static）是元素的默認(rèn)定位方式，是各個元素按照標(biāo)準(zhǔn)流（包括浮動方式）進(jìn)行定位。在靜態(tài)定位狀態(tài)下，無法通過left、rig

15、ht、top、bottom 4個屬性來改變元素的位置。例9-4 靜態(tài)定位示例。在網(wǎng)頁中定義一個大盒子，在其中包含三個子盒子。文件名：9-4.html，瀏覽效果如下：23德才兼?zhèn)?知行合一 9.2.2 元素的定24德才兼?zhèn)?知行合一 9.2.2 元素的定位 one two three#box /*定義大盒子的樣式*/width: 400px;height: 400px;background: #CCC;#one, #two, #three /*定義子盒子的樣式*/width: 100px;height: 100px;background-color:#5BE93F;border: 1px sol

16、id #333;搭建HTML結(jié)構(gòu)如下：CSS樣式表代碼如下：在上面代碼中，所有元素都采用靜態(tài)定位，即按標(biāo)準(zhǔn)流的方式定位。24德才兼?zhèn)?知行合一 9.2.2 元素的定25德才兼?zhèn)?知行合一 9.2.2 元素的定位3、相對定位采用相對定位的元素會相對于自身原本的位置，通過偏移指定的距離，到達(dá)新的位置。其中，水平方向的偏移量由left或right屬性指定；豎直方向的偏移量由top和bottom屬性指定。例9-5 相對定位示例。在網(wǎng)頁中定義一個大盒子，在其中包含三個子盒子，對第二個盒子進(jìn)行相對定位。文件名稱為9-5.html，代碼如下。25德才兼?zhèn)?知行合一 9.2.2 元素的定26德才兼?zhèn)?知行合一

17、 9.2.2 元素的定位 one two three#box /*定義大盒子的樣式*/width: 400px;height: 400px;background: #CCC;#one, #two, #three /*定義子盒子的樣式*/width: 100px;height: 100px;background-color: #0FF;border: 1px solid #333;#two position: relative; /*設(shè)置相對定位*/left: 30px;top: 30px;搭建HTML結(jié)構(gòu)如下：CSS樣式表代碼如下：26德才兼?zhèn)?知行合一 9.2.2 元素的定27德才兼?zhèn)?知行

18、合一 9.2.2 元素的定位在上面代碼中，第二個子元素采用相對定位，可以看出該元素相對于其自身原來的位置，向下向右各偏移了30個像素。但是它在文檔流中的位置仍然保留。瀏覽網(wǎng)頁，效果如圖所示。27德才兼?zhèn)?知行合一 9.2.2 元素的定28德才兼?zhèn)?知行合一 9.2.2 元素的定位4、絕對定位采用絕對定位的元素是將元素依據(jù)最近的已經(jīng)定位（相對或絕對定位）的父元素進(jìn)行定位，若所有父元素都沒有定位，則依據(jù)body元素（瀏覽器窗口）進(jìn)行定位。例9-6 絕對定位示例。在網(wǎng)頁中定義一個大盒子，在其中包含三個子盒子，對第二個盒子進(jìn)行絕對定位。文件名稱為9-6.html，代碼如下。28德才兼?zhèn)?知行合一 9.

19、2.2 元素的定29德才兼?zhèn)?知行合一 9.2.2 元素的定位 one two three#box /*定義大盒子的樣式*/width: 400px;height: 400px;background: #CCC;position: relative; /*設(shè)置相對定位, 但不設(shè)置偏移量*/#one, #two, #three /*定義子盒子的樣式*/width: 100px;height: 100px;background-color: #0FF;border: 1px solid #333;#two /*定義第二個子盒子的樣式*/position: absolute; /*設(shè)置絕對定位*/r

20、ight: 0; /*離父元素的右邊緣是0*/bottom: 0; /*離父元素的下邊緣是0*/搭建HTML結(jié)構(gòu)如下：CSS樣式表代碼如下：29德才兼?zhèn)?知行合一 9.2.2 元素的定30德才兼?zhèn)?知行合一 9.2.2 元素的定位在例9-6中，對父元素設(shè)置相對定位，但不對其設(shè)置偏移量，同時，對子元素two設(shè)置絕對定位，并通過right和bottom屬性設(shè)置其精確位置。這種方法在實際網(wǎng)頁制作中被經(jīng)常使用。如果在例9-6中，去掉box盒子的position:relative屬性設(shè)置，那么子元素two將相對于瀏覽器窗口進(jìn)行定位，將位于瀏覽器窗口的右下角。絕對定位的元素從標(biāo)準(zhǔn)流中脫離，不再占用標(biāo)準(zhǔn)文檔

21、流中的空間。瀏覽網(wǎng)頁，效果如圖所示。30德才兼?zhèn)?知行合一 9.2.2 元素的定31德才兼?zhèn)?知行合一 9.2.2 元素的定位例9-7 絕對定位應(yīng)用。使用絕對定位給第7章通知公告塊案例中添加超鏈接“更多”字樣，如圖9-13所示。文件名稱為9-7.html。此處可以對“更多”字樣所在的span標(biāo)記使用絕對定位。標(biāo)題行h1作為父元素，設(shè)置相對定位，“更多”元素作為其中的子元素，設(shè)置絕對定位。31德才兼?zhèn)?知行合一 9.2.2 元素的定32德才兼?zhèn)?知行合一 9.2.2 元素的定位.notice h1 /*設(shè)置標(biāo)題行的樣式*/height: 38px;line-height: 38px;width:

22、 430px;/*這個寬度是440PX-10PX*/border-bottom: 2px solid #1a4aa7;font-size: 20px;font-weight: bold;padding-left: 10px;/*使文字向右移動10PX*/position: relative;/*設(shè)置相對定位,但不設(shè)置偏移量*/.notice h1 span /*更多文字的樣式*/font-size: 12px;font-weight: normal;position: absolute;/*設(shè)置絕對定位*/right: 10px;/*離h1右邊的距離是10px*/top: 0;/*離h1上邊的

23、距離是0px*/關(guān)鍵樣式表代碼如下。32德才兼?zhèn)?知行合一 9.2.2 元素的定33德才兼?zhèn)?知行合一 9.2.2 元素的定位5、固定定位固定定位是絕對定位的一種特殊形式，它總是以瀏覽器窗口作為參照物來定位網(wǎng)頁元素。當(dāng)對元素設(shè)置固定定位后，它將脫離標(biāo)準(zhǔn)流的控制，始終依據(jù)瀏覽器窗口來定位元素，總是顯在瀏覽器窗口的固定位置。譬如，學(xué)院網(wǎng)站中二維碼的顯示就是固定定位的圖像元素。其代碼為：上面的代碼中，二維碼圖像以固定定位的方式顯示在了離瀏覽器窗口上方200px，離瀏覽器右邊為0px的位置。該行代碼中還用到了z-index屬性，下面對該屬性進(jìn)行介紹。33德才兼?zhèn)?知行合一 9.2.2 元素的定34德才

24、兼?zhèn)?知行合一 9.2.2 元素的定位6、z-index屬性當(dāng)對多個元素同時設(shè)置定位時，定位元素之間有可能會發(fā)生重疊。要想調(diào)整定位元素的堆疊順序，可以對定位元素應(yīng)用z-index屬性，其取值可為正整數(shù)、負(fù)整數(shù)和0。z-index的默認(rèn)屬性值為0，取值越大，定位元素在層疊元素中越居上。注意：z-index屬性僅對定位元素有效。34德才兼?zhèn)?知行合一 9.2.2 元素的定35德才兼?zhèn)?知行合一 9.2.3 元素的overflow屬性在9.2.1節(jié)中已經(jīng)提到過overflow屬性，利用該屬性對父元素設(shè)置值為“hidden”時，可以清除子元素浮動對父元素的影響，使父元素的高度適應(yīng)子元素的高度。但該屬性

25、的另外的作用是規(guī)范元素內(nèi)溢出的內(nèi)容。其基本語法格式如下。選擇器overflow:visible|hidden|auto|scroll說明：visible：對元素內(nèi)溢出內(nèi)容不做處理，內(nèi)容可能會超出容器。hidden：溢出內(nèi)容會被修剪，并且被修剪的內(nèi)容是不可見的。auto：在需要時產(chǎn)生滾動條，即自適應(yīng)所要顯示的內(nèi)容。scroll：溢出內(nèi)容會被修剪，且瀏覽器會始終顯示滾動條。35德才兼?zhèn)?知行合一 9.2.3 元素的o36德才兼?zhèn)?知行合一例9-8 overflow屬性應(yīng)用。文件名稱為9-8.html。 9.2.3 元素的overflow屬性36德才兼?zhèn)?知行合一例9-8 overf37德才兼?zhèn)?知

26、行合一關(guān)鍵樣式表代碼如下。 9.2.3 元素的overflow屬性#box width: 200px;height: 100px;background: #2ACBE5;overflow: visible;/*溢出內(nèi)容顯示在元素框之外*/若將overflow屬性定義為其它三個值，則瀏覽效果分別如圖9-159-17所示。37德才兼?zhèn)?知行合一關(guān)鍵樣式表代碼如下。 38德才兼?zhèn)?知行合一HTML5+CSS3布局首先將頁面在整體上進(jìn)行分塊，然后對各個塊進(jìn)行CSS定位，最后再在各個塊中添加相應(yīng)的內(nèi)容。常用的HTML5+CSS3布局方式有單列布局、二列布局、三列布局和通欄布局等。網(wǎng)頁的主體內(nèi)容寬度現(xiàn)在一

27、般采用1000到1200像素。下面通過示例分別對常用網(wǎng)頁的布局方式進(jìn)行介紹。 9.2.4 HTML5+CSS3布局38德才兼?zhèn)?知行合一HTML5+CSS3布39德才兼?zhèn)?知行合一無序列表三列布局通欄布局 二列布局 單列布局 9.2.4 HTML5+CSS3布局將頁面上的塊從上到下依次排列，即謂單列布局。例9-9 將頁面進(jìn)行單列布局，效果圖如 圖9-18所示。文件名：9-9.html。39德才兼?zhèn)?知行合一無序列表三列布局通欄布40德才兼?zhèn)?知行合一 9.2.4 HTML5+CSS3布局頁面頭部導(dǎo)航焦點圖內(nèi)容頁面底部/* CSS Document */body margin: 0; paddi

28、ng: 0; font-size: 24px; text-align: center;#header /*頁面頭部*/ width: 1000px; height: 120px; background-color: #ccc; margin: 0 auto; /*居中顯示*/#nav /*導(dǎo)航*/ width: 1000px; height: 30px; background-color: #ccc; margin: 5px auto; /*居中顯示，且上下外邊距為5px*/#banner /*焦點圖*/ width: 1000px; height: 80px; background-colo

29、r: #ccc; margin: 0 auto;搭建HTML結(jié)構(gòu)如下：創(chuàng)建外部樣式表，代碼如下：注意：通常給塊定義ID名稱時，都會遵循一些常用的命名規(guī)范。示例中的命名便是按照命名規(guī)范而起的名字。#content /*內(nèi)容*/ width: 1000px; height: 300px; background-color: #ccc; margin: 5px auto;#footer /*頁面底部*/ width: 1000px; height: 80px; background-color: #ccc; margin: 0 auto;40德才兼?zhèn)?知行合一 9.2.4 HTML41德才兼?zhèn)?知行

30、合一無序列表三列布局通欄布局 二列布局 單列布局 9.2.4 HTML5+CSS3布局一列布局雖然統(tǒng)一、有序，但會讓人覺得呆板，所以實際網(wǎng)頁制作中，會采用二列布局。二列布局實際上是將中間內(nèi)容分成左、右兩部分。例9-10 將頁面進(jìn)行二列布局，效果如圖9-19所示。文件名稱為9-10.html。41德才兼?zhèn)?知行合一無序列表三列布局通欄布42德才兼?zhèn)?知行合一 9.2.4 HTML5+CSS3布局頁面頭部導(dǎo)航焦點圖 左側(cè)內(nèi)容 右側(cè)內(nèi)容頁面底部搭建HTML結(jié)構(gòu)如下：從圖可以看出，中間內(nèi)容塊被分成了左、右兩部分，布局時應(yīng)將左、右兩個塊放在中間的大塊中，然后對左、右兩個塊分別設(shè)置浮動。42德才兼?zhèn)?知行

31、合一 9.2.4 HTML43德才兼?zhèn)?知行合一 9.2.4 HTML5+CSS3布局body margin: 0;padding: 0;font-size: 24px;text-align: center;#header /*頁面頭部*/width: 1000px;height: 120px;background-color: #ccc;margin: 0 auto;#nav /*導(dǎo)航*/width: 1000px;height: 30px;background-color: #ccc;margin: 5px auto;#banner /*焦點圖*/width: 1000px;height:

32、 80px;background-color: #ccc;margin: 0 auto;#content /*內(nèi)容*/width: 1000px;height: 300px;margin: 5px auto;overflow: hidden; /*清除子元素浮動對父元素的影響*/#left /*左側(cè)內(nèi)容*/width: 290px;height: 300px;background-color: #ccc;float: left; /*左浮動*/#right /*右側(cè)內(nèi)容*/width: 700px;height: 300px;background-color: #ccc;float: righ

33、t; /*右浮動*/#footer /*頁面底部*/width: 1000px;height: 80px;background-color: #ccc;margin: 0 auto;創(chuàng)建外部樣式表，代碼如下：43德才兼?zhèn)?知行合一 9.2.4 HTML44德才兼?zhèn)?知行合一 9.2.4 HTML5+CSS3布局注意：上面代碼中，右邊的塊#right塊設(shè)置了右浮動，實際上也可以設(shè)置左浮動，但設(shè)置左浮動的話，就需要設(shè)置margin-left屬性使其與左邊的塊#left間隔一定的距離，最終效果是一樣的。讀者可以自行嘗試。44德才兼?zhèn)?知行合一 9.2.4 HTML45德才兼?zhèn)?知行合一無序列表三列布

34、局通欄布局 二列布局 單列布局 9.2.4 HTML5+CSS3布局對于內(nèi)容比較多的網(wǎng)站，有時需要采用三列布局。三列布局實際上是將中間內(nèi)容分成左中右三部分。例9-11 將頁面進(jìn)行三列布局，效果如圖9-20所示。文件名稱為9-11.html。45德才兼?zhèn)?知行合一無序列表三列布局通欄布46德才兼?zhèn)?知行合一 9.2.4 HTML5+CSS3布局頁面頭部導(dǎo)航欄焦點圖 左側(cè)內(nèi)容 中間內(nèi)容 右側(cè)內(nèi)容頁面底部搭建HTML結(jié)構(gòu)如下：從圖中可以看出，中間內(nèi)容塊被分成了左、中、右三部分，布局時應(yīng)將左、中、右三個小塊放在中間的大塊中，然后對左、中、右三個塊分別設(shè)置浮動。46德才兼?zhèn)?知行合一 9.2.4 HTM

35、L47德才兼?zhèn)?知行合一 9.2.4 HTML5+CSS3布局body margin: 0;padding: 0;font-size: 24px;text-align: center;#header /*頁面頭部*/width: 1000px;height: 120px;background-color: #ccc;margin: 0 auto;#nav /*導(dǎo)航*/width: 1000px;height: 30px;background-color: #ccc;margin: 5px auto;#banner /*焦點圖*/width: 1000px;height: 80px;background-color: #ccc;margin: 0 auto;#content /*內(nèi)容*/width: 1000px;height: 300px;margin: 5px auto;overflow: hidden; /*清除子元素浮動對父元素的影響*/#left /*左側(cè)內(nèi)容*/width: 200px;height: 300px;background-color: #ccc;f