HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)-第七章-網(wǎng)頁(yè)布局設(shè)計(jì)課件

第7章網(wǎng)頁(yè)布局設(shè)計(jì)第1頁(yè)本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第7章網(wǎng)頁(yè)布局設(shè)計(jì)第1頁(yè)本章概述本章概述傳統(tǒng)網(wǎng)頁(yè)是采用表格進(jìn)行布局的，但這種方式已經(jīng)逐漸淡出設(shè)計(jì)舞臺(tái)，取而代之的是符合Web標(biāo)準(zhǔn)的DV+CSS布局方式，HTML5又新增了網(wǎng)頁(yè)結(jié)構(gòu)布局標(biāo)簽，方便頁(yè)面布局設(shè)計(jì)。本章將詳細(xì)介紹網(wǎng)頁(yè)布局技術(shù)及實(shí)際應(yīng)用。第2頁(yè)本章概述傳統(tǒng)網(wǎng)頁(yè)是采用表格進(jìn)行布局的，但這種方式已經(jīng)逐漸淡出本章的學(xué)習(xí)目標(biāo)理解布局標(biāo)簽+CSS的頁(yè)面布局方式，掌握對(duì)頁(yè)面進(jìn)行分塊的技術(shù)掌握結(jié)構(gòu)元素的使用，使頁(yè)面分區(qū)更明確理解元素的浮動(dòng)，能夠?yàn)樵卦O(shè)置浮動(dòng)樣式熟悉清除浮動(dòng)的方法，使用不同方法清除浮動(dòng)掌握元素的定位，能夠?yàn)樵卦O(shè)置常見(jiàn)的定位模式掌握典型的CSS布局，能夠使用CSS布局樣式。第3頁(yè)本章的學(xué)習(xí)目標(biāo)理解布局標(biāo)簽+CSS的頁(yè)面布局方式，掌握對(duì)頁(yè)面主要內(nèi)容7.1網(wǎng)頁(yè)布局標(biāo)簽7.2浮動(dòng)與定位7.3典型的CSS布局7.4實(shí)訓(xùn)7.5本章小結(jié)第4頁(yè)主要內(nèi)容7.1網(wǎng)頁(yè)布局標(biāo)簽第4頁(yè)第5頁(yè)7.1網(wǎng)頁(yè)布局標(biāo)簽本節(jié)主要內(nèi)容：布局標(biāo)簽+CSS布局的優(yōu)點(diǎn)頁(yè)面分塊頁(yè)面結(jié)構(gòu)標(biāo)簽第5頁(yè)7.1網(wǎng)頁(yè)布局標(biāo)簽本節(jié)主要內(nèi)容：7.1.1布局標(biāo)簽+CSS布局的優(yōu)點(diǎn)Div用于搭建網(wǎng)結(jié)結(jié)構(gòu)，CSS用于創(chuàng)建網(wǎng)站表現(xiàn)，將表現(xiàn)與內(nèi)容分離，便于大型網(wǎng)站的協(xié)作開(kāi)發(fā)和維護(hù)。縮短了網(wǎng)站的改版時(shí)間，設(shè)計(jì)者只要簡(jiǎn)單地修改CSS文件就可以輕松地改版網(wǎng)站。強(qiáng)大的字體控制和排板能力，使設(shè)計(jì)者能夠更好地控制頁(yè)面布局。使用只包含結(jié)構(gòu)化內(nèi)容的HTML代替嵌套的標(biāo)簽，提高搜索引擎對(duì)網(wǎng)頁(yè)的索引效率。用戶(hù)可以將許多網(wǎng)頁(yè)的風(fēng)格格式同時(shí)更新。第6頁(yè)7.1.1布局標(biāo)簽+CSS布局的優(yōu)點(diǎn)Div用于搭建網(wǎng)結(jié)結(jié)第7頁(yè)7.1.2頁(yè)面分塊使用布局標(biāo)簽+CSS布局頁(yè)面時(shí)，首先將頁(yè)面在整體上用頁(yè)面結(jié)構(gòu)布局標(biāo)簽分塊，然后對(duì)各個(gè)塊進(jìn)行CSS定位，最后再在各個(gè)塊中添加相應(yīng)的內(nèi)容。div以及新增的頁(yè)面結(jié)構(gòu)布局標(biāo)簽是可以被嵌套的，可以實(shí)現(xiàn)更為復(fù)雜的頁(yè)面排版。參考示例：7-1-1.html,7-1-2.html第7頁(yè)7.1.2頁(yè)面分塊使用布局標(biāo)簽+CSS布局頁(yè)面時(shí)，7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽1．header元素<header>標(biāo)簽用于定義文檔的頁(yè)眉（介紹信息），可以包含所有通常放在頁(yè)面頭部的內(nèi)容，一般用來(lái)放置整個(gè)頁(yè)面或頁(yè)面內(nèi)的一個(gè)內(nèi)容區(qū)塊的標(biāo)題，也可以包含網(wǎng)站Logo圖片、搜素表單或者其他相關(guān)內(nèi)容。其基本語(yǔ)法格式如下。<header><hn>網(wǎng)頁(yè)主題</hn>…</header>第8頁(yè)7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽1．header元素第8頁(yè)7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽2．nav元素nav元素用于定義導(dǎo)航鏈接，是HTML5新增的元素，該元素可以將具有導(dǎo)航性質(zhì)的鏈接歸納在一個(gè)區(qū)域中，使頁(yè)面元素的語(yǔ)義更加明確。其中的導(dǎo)航元素可以鏈接到站點(diǎn)的其他頁(yè)面，或者當(dāng)前頁(yè)的其他部分。

一個(gè)HTML頁(yè)面中可以包含多個(gè)nav元素，作為頁(yè)面整體或不同部分的導(dǎo)航。第9頁(yè)7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽2．nav元素第9頁(yè)7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽3．a(chǎn)rticle元素article元素代表文檔、頁(yè)面或者應(yīng)用程序中與上下文相關(guān)的獨(dú)立部分，該元素經(jīng)常被用于定義一篇日志、一條新聞或用戶(hù)評(píng)論等。article元素通常使用多個(gè)section元素進(jìn)行劃分，一個(gè)頁(yè)面中article元素可以出現(xiàn)多次。第10頁(yè)7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽3．a(chǎn)rticle元素第10頁(yè)7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽4．a(chǎn)side元素<aside>標(biāo)簽用來(lái)定義當(dāng)前頁(yè)面或者文章的附屬信息部分。aside元素的用法主要有兩種，一種是被包含在article元素中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的相關(guān)資料、名次解釋等。另一種是在article元素之外使用作為頁(yè)面或站點(diǎn)全局的附屬信息部分。最典型的是側(cè)邊欄，其中的內(nèi)容可以使友情鏈接，博客中的其它文章列表、廣告單元等。第11頁(yè)7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽4．a(chǎn)side元素第11頁(yè)7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽5．section元素section元素用于對(duì)網(wǎng)站或應(yīng)用程序中頁(yè)面上的內(nèi)容進(jìn)行分塊，一個(gè)section元素通常由內(nèi)容和標(biāo)題組成。參考示例：

7-1-3.html第12頁(yè)7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽5．section元素第12頁(yè)7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽6．footer元素<footer>標(biāo)簽用于定義一個(gè)頁(yè)面或者區(qū)域的底部，它可以包含所有通常放在頁(yè)面底部的內(nèi)容。在html5開(kāi)發(fā)中使用footer標(biāo)簽時(shí)，把它當(dāng)作普通div標(biāo)簽對(duì)待即可，只不過(guò)一般用于網(wǎng)站底部布局。一個(gè)頁(yè)面中可以包含多個(gè)footer元素，但最好只使用一次footer即可。同時(shí)，也可以在article元素或者section元素中添加footer元素。第13頁(yè)7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽6．footer元素第13頁(yè)7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽7．figure和figcaption標(biāo)簽在HTML5中，figure標(biāo)簽用于定義獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等），一般指一個(gè)單獨(dú)的單元。figure元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān)，但如果被刪除，也不會(huì)對(duì)文檔流產(chǎn)生影響。

figcaption標(biāo)簽用于為figure元素組添加標(biāo)題，一個(gè)figure元素內(nèi)最多允許使用一個(gè)figcaption元素，該元素應(yīng)該放在figure元素的第一個(gè)或者最后一個(gè)子元素的位置。參考示例7-1-4.html第14頁(yè)7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽7．figure和figcapti7.2浮動(dòng)與定位

本節(jié)主要內(nèi)容：案例分析元素的浮動(dòng)清除浮動(dòng)定位屬性定位方式Overflow案例制作第15頁(yè)7.2浮動(dòng)與定位本節(jié)主要內(nèi)容：第15頁(yè)7.2.1案例分析【案例展示】使用盒模型的定位與浮動(dòng)知識(shí)制作首頁(yè)熱銷(xiāo)產(chǎn)品布局頁(yè)面。【知識(shí)要點(diǎn)】定位屬性、定位方式、浮動(dòng)與清除浮動(dòng)?！緦W(xué)習(xí)目標(biāo)】掌握使用盒模型的定位與浮動(dòng)實(shí)現(xiàn)各種排版需要第16頁(yè)7.2.1案例分析【案例展示】使用盒模型的定位與浮動(dòng)知識(shí)7.2.2元素的浮動(dòng)浮動(dòng)（float）是使用率較高的一種定位方式。浮動(dòng)元素可以向左或向右移動(dòng)，直到它的外邊距邊緣碰到包含塊內(nèi)邊距邊緣或另一個(gè)浮動(dòng)元素的外邊距邊緣為止。float屬性定義元素在哪個(gè)方向浮動(dòng)，任何元素都可以浮動(dòng)，浮動(dòng)元素會(huì)變成一個(gè)塊狀元素。語(yǔ)法：float：none|left|right參數(shù)：none為對(duì)象不浮動(dòng)，left為對(duì)象浮在左邊，right為對(duì)象浮在右邊。說(shuō)明：該屬性的值指出了對(duì)象是否浮動(dòng)及如何浮動(dòng)。第17頁(yè)7.2.2元素的浮動(dòng)浮動(dòng)（float）是使用率較高的一種7.2.1元素的浮動(dòng)參考示例：7-2-1.html，

7-2-2.html，7-2-3.html,7-2-4.html第18頁(yè)7.2.1元素的浮動(dòng)參考示例：第18頁(yè)7.2.3清除浮動(dòng)在頁(yè)面布局時(shí)，當(dāng)容器的高度設(shè)置為auto且容器的內(nèi)容中有浮動(dòng)元素時(shí)，容器的高度不能自動(dòng)伸長(zhǎng)以適應(yīng)內(nèi)容的高度，使得內(nèi)容溢出到容器外面導(dǎo)致頁(yè)面出現(xiàn)錯(cuò)位，這個(gè)現(xiàn)象被稱(chēng)為浮動(dòng)溢出。為了防止這個(gè)現(xiàn)象的出現(xiàn)而進(jìn)行的CSS處理，就叫做清除浮動(dòng)。語(yǔ)法：clear：none|left|right|both參數(shù)：none允許兩邊都可以有浮動(dòng)對(duì)象，both不允許有浮動(dòng)對(duì)象，left不允許左邊有浮動(dòng)對(duì)象，right不允許右邊有浮動(dòng)對(duì)象參考示例：7-2-5.html第19頁(yè)7.2.3清除浮動(dòng)在頁(yè)面布局時(shí)，當(dāng)容器的高度設(shè)置為aut7.2.4定位屬性1．定位模式在CSS中，position屬性用于定義元素的定位模式，其基本語(yǔ)法格式如下:position:static|relative|absolute|fixed參數(shù)：

static：默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中。

relative：相對(duì)定位，相對(duì)于其原文檔流的位置進(jìn)行定位。

absolute：絕對(duì)定位，相對(duì)于其上一個(gè)已經(jīng)定位的父元素進(jìn)行定位。

fixed：絕對(duì)定位，相對(duì)于瀏覽器窗口進(jìn)行定位。第20頁(yè)7.2.4定位屬性1．定位模式第20頁(yè)7.2.4定位屬性2．邊偏移定位模式（positon）僅僅用于定義元素以哪種方式定位，并不能確定元素的具體位置。在CSS中，通過(guò)邊偏移屬性top、bottom、left或right來(lái)精確定義定位元素的位置，具體解釋如表7-2所示。第21頁(yè)7.2.4定位屬性2．邊偏移第21頁(yè)7.2.4定位屬性表7-1邊偏移設(shè)置方式第22頁(yè)邊偏移屬性描述top頂端偏移量，定義元素相對(duì)于其父元素上邊線(xiàn)的距離bottom底部偏移量，定義元素相對(duì)于其父元素下邊線(xiàn)的距離left左側(cè)偏移量，定義元素相對(duì)于其父元素左邊線(xiàn)的距離right右側(cè)偏移量，定義元素相對(duì)于其父元素右邊線(xiàn)的距離7.2.4定位屬性表7-1邊偏移設(shè)置方式第22頁(yè)邊偏移屬7.2.5定位方式1．靜態(tài)定位static所謂靜態(tài)位置就是各個(gè)元素在HTML文檔流中默認(rèn)的位置靜態(tài)定位是元素的默認(rèn)定位方式，position屬性的取值為

satic。在靜態(tài)定位狀態(tài)下，無(wú)法通過(guò)邊偏移屬性（top、bottom、left或right）來(lái)改變?cè)氐奈恢?。參考示例?-2-6.html第23頁(yè)7.2.5定位方式1．靜態(tài)定位static第23頁(yè)7.2.5定位方式2．相對(duì)定位relative相對(duì)定位是將元素相對(duì)于它本身的位置進(jìn)行定位。對(duì)元素設(shè)置相對(duì)定位后，可以通過(guò)邊偏移屬性改變?cè)氐奈恢?，但是它在文檔流中的位置仍然保留。參考示例：7-2-7.html第24頁(yè)7.2.5定位方式2．相對(duì)定位relative第24頁(yè)7.2.5定位方式3．絕對(duì)定位absolute絕對(duì)定位是將元素依據(jù)最近的已經(jīng)定位（絕對(duì)、固定或相對(duì)定位）的父元素進(jìn)行定位,若所有父元素都沒(méi)有定位，則依據(jù)body根元素（瀏覽器窗口）進(jìn)行定位。參考示例：7-2-8.html,7-2-9.html第25頁(yè)7.2.5定位方式3．絕對(duì)定位absolute第25頁(yè)7.2.5定位方式4．固定定位fixed固定定位是絕對(duì)定位的一種特殊形式，它以瀏覽器窗口作為參照物來(lái)定義網(wǎng)頁(yè)元素。當(dāng)對(duì)元素設(shè)置固定定位后，它將脫離標(biāo)準(zhǔn)文檔流的控制，始終依據(jù)瀏覽器窗口來(lái)定義自已的顯示位置。不管瀏覽器滾動(dòng)條如何滾動(dòng)，也不管瀏覽器窗口的大小如何變化，該元素都會(huì)始終顯示在瀏覽器窗口的固定位置。參考示例：7-2-10.html第26頁(yè)7.2.5定位方式4．固定定位fixed第26頁(yè)7.2.5定位方式5．z-index層疊等級(jí)屬性當(dāng)對(duì)多個(gè)元素同時(shí)設(shè)置定位時(shí)，定位元素之間有可能會(huì)發(fā)生重疊，在CSS中，要想調(diào)整重疊定位元素的堆疊順序，可以對(duì)定位元素應(yīng)用z-index層疊等級(jí)屬性，其取值可為正整數(shù)、負(fù)整數(shù)和0。z-index的默認(rèn)屬性值是0，取值越大，定位元素在層疊元素中越居上。第27頁(yè)7.2.5定位方式5．z-index層疊等級(jí)屬性第27.2.6overflow當(dāng)盒子內(nèi)的元素超出盒子自身的大小時(shí)，內(nèi)容就會(huì)溢出，規(guī)范溢出內(nèi)容的顯示方式，要使用overflow屬性，其基本語(yǔ)法格式如下。overflow:visible|hidden|auto|scroll參數(shù)：visible：溢出內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外(默認(rèn)值)hidden：溢出內(nèi)容會(huì)被修剪，并且被修剪的內(nèi)容是不可見(jiàn)的auto：在需要時(shí)產(chǎn)生滾動(dòng)條，即自適應(yīng)所要顯示的內(nèi)容。scroll：溢出內(nèi)容會(huì)被修剪，且瀏覽器會(huì)始終顯示滾動(dòng)條。參考示例：7-2-11.html第28頁(yè)7.2.6overflow當(dāng)盒子內(nèi)的元素超出盒子自身的大7.2.7案例制作制作完成演示案例:制作完成愛(ài)德照明網(wǎng)站首頁(yè)整體布局結(jié)構(gòu)。參考代碼7-2.html第29頁(yè)7.2.7案例制作制作完成演示案例:制作完成愛(ài)德照明網(wǎng)站7.3典型的CSS布局本節(jié)主要內(nèi)容：兩列布局三列布局三列自適應(yīng)布局第30頁(yè)7.3典型的CSS布局本節(jié)主要內(nèi)容：第30頁(yè)7.3.1兩列布局一般情況下，此類(lèi)頁(yè)面布局的兩列都有固定的寬度，而且從內(nèi)容上很容易區(qū)分主要內(nèi)容區(qū)域和側(cè)邊欄。頁(yè)面布局整體上分為上、中、下3個(gè)部分，即header區(qū)域、main區(qū)域和footer區(qū)域。其中的main又包含了mainbox（主要內(nèi)容區(qū)域）和sidebox（側(cè)邊欄），布局示意圖如圖7-23所示。參考示例：7-3-1.html，

7-3-2.html第31頁(yè)7.3.1兩列布局一般情況下，此類(lèi)頁(yè)面布局的兩列都有固定7.3.2三列布局三列布局在網(wǎng)頁(yè)設(shè)計(jì)時(shí)更為常用，如圖7-26所示。對(duì)于這種類(lèi)型的布局，瀏覽者的注意力最容易集中在中間欄的信息區(qū)域，其次才是左右兩側(cè)的信息。三列布局與兩列布局非常相似，在處理方式上可以利用兩列布局結(jié)構(gòu)的方式進(jìn)行處理，如圖7-27所示的就是3個(gè)獨(dú)立的列組合而成的三列布局。參考示例：7-3-3.html,7-3-4.html第32頁(yè)7.3.2三列布局三列布局在網(wǎng)頁(yè)設(shè)計(jì)時(shí)更為常用，如圖7-7.3.3三列自適應(yīng)布局三列自適應(yīng)結(jié)構(gòu)的特點(diǎn)，如下所示。

三列都設(shè)置為自適應(yīng)寬度。

中間列的主要內(nèi)容首先出現(xiàn)在網(wǎng)頁(yè)中。

可以允許任一個(gè)列的內(nèi)容為最高。參考示例：7-3-5.html第33頁(yè)7.3.3三列自適應(yīng)布局三列自適應(yīng)結(jié)構(gòu)的特點(diǎn)，如下所示。7.4實(shí)訓(xùn)制作完成演示案例:制作LED燈網(wǎng)站首頁(yè)主體部分局部頁(yè)面?！局R(shí)要點(diǎn)】盒模型的特點(diǎn)及常用屬性、元素的定位與浮動(dòng)?！緦?shí)訓(xùn)目標(biāo)】掌握綜合使用CSS布局頁(yè)面的技術(shù)第34頁(yè)7.4實(shí)訓(xùn)制作完成演示案例:制作LED燈網(wǎng)站首頁(yè)主體部分7.5本章小結(jié)本章首先介紹了使用頁(yè)面結(jié)構(gòu)標(biāo)簽+CSS布局、元素的浮動(dòng)、不同浮動(dòng)方向呈現(xiàn)的效果、清除浮動(dòng)的常用方法，然后講解了元素的定位屬性及網(wǎng)頁(yè)中常見(jiàn)的幾種定位模式，最后講解了典型的CSS布局及網(wǎng)頁(yè)中常見(jiàn)的兩列布局和三列布局，在本章的最后，使用CSS布局技術(shù)制作了LED燈首頁(yè)頁(yè)面中主體部分頁(yè)面。通過(guò)本章的學(xué)習(xí)，讀者應(yīng)該能夠熟練地運(yùn)用頁(yè)面布局相關(guān)知識(shí)進(jìn)行網(wǎng)頁(yè)布局，掌握浮動(dòng)和定位，掌握典型的CSS布局方式。第35頁(yè)7.5本章小結(jié)本章首先介紹了使用頁(yè)面結(jié)構(gòu)標(biāo)簽+CSS布第7章網(wǎng)頁(yè)布局設(shè)計(jì)第36頁(yè)本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第7章網(wǎng)頁(yè)布局設(shè)計(jì)第1頁(yè)本章概述本章概述傳統(tǒng)網(wǎng)頁(yè)是采用表格進(jìn)行布局的，但這種方式已經(jīng)逐漸淡出設(shè)計(jì)舞臺(tái)，取而代之的是符合Web標(biāo)準(zhǔn)的DV+CSS布局方式，HTML5又新增了網(wǎng)頁(yè)結(jié)構(gòu)布局標(biāo)簽，方便頁(yè)面布局設(shè)計(jì)。本章將詳細(xì)介紹網(wǎng)頁(yè)布局技術(shù)及實(shí)際應(yīng)用。第37頁(yè)本章概述傳統(tǒng)網(wǎng)頁(yè)是采用表格進(jìn)行布局的，但這種方式已經(jīng)逐漸淡出本章的學(xué)習(xí)目標(biāo)理解布局標(biāo)簽+CSS的頁(yè)面布局方式，掌握對(duì)頁(yè)面進(jìn)行分塊的技術(shù)掌握結(jié)構(gòu)元素的使用，使頁(yè)面分區(qū)更明確理解元素的浮動(dòng)，能夠?yàn)樵卦O(shè)置浮動(dòng)樣式熟悉清除浮動(dòng)的方法，使用不同方法清除浮動(dòng)掌握元素的定位，能夠?yàn)樵卦O(shè)置常見(jiàn)的定位模式掌握典型的CSS布局，能夠使用CSS布局樣式。第38頁(yè)本章的學(xué)習(xí)目標(biāo)理解布局標(biāo)簽+CSS的頁(yè)面布局方式，掌握對(duì)頁(yè)面主要內(nèi)容7.1網(wǎng)頁(yè)布局標(biāo)簽7.2浮動(dòng)與定位7.3典型的CSS布局7.4實(shí)訓(xùn)7.5本章小結(jié)第39頁(yè)主要內(nèi)容7.1網(wǎng)頁(yè)布局標(biāo)簽第4頁(yè)第40頁(yè)7.1網(wǎng)頁(yè)布局標(biāo)簽本節(jié)主要內(nèi)容：布局標(biāo)簽+CSS布局的優(yōu)點(diǎn)頁(yè)面分塊頁(yè)面結(jié)構(gòu)標(biāo)簽第5頁(yè)7.1網(wǎng)頁(yè)布局標(biāo)簽本節(jié)主要內(nèi)容：7.1.1布局標(biāo)簽+CSS布局的優(yōu)點(diǎn)Div用于搭建網(wǎng)結(jié)結(jié)構(gòu)，CSS用于創(chuàng)建網(wǎng)站表現(xiàn)，將表現(xiàn)與內(nèi)容分離，便于大型網(wǎng)站的協(xié)作開(kāi)發(fā)和維護(hù)?？s短了網(wǎng)站的改版時(shí)間，設(shè)計(jì)者只要簡(jiǎn)單地修改CSS文件就可以輕松地改版網(wǎng)站。強(qiáng)大的字體控制和排板能力，使設(shè)計(jì)者能夠更好地控制頁(yè)面布局。使用只包含結(jié)構(gòu)化內(nèi)容的HTML代替嵌套的標(biāo)簽，提高搜索引擎對(duì)網(wǎng)頁(yè)的索引效率。用戶(hù)可以將許多網(wǎng)頁(yè)的風(fēng)格格式同時(shí)更新。第41頁(yè)7.1.1布局標(biāo)簽+CSS布局的優(yōu)點(diǎn)Div用于搭建網(wǎng)結(jié)結(jié)第42頁(yè)7.1.2頁(yè)面分塊使用布局標(biāo)簽+CSS布局頁(yè)面時(shí)，首先將頁(yè)面在整體上用頁(yè)面結(jié)構(gòu)布局標(biāo)簽分塊，然后對(duì)各個(gè)塊進(jìn)行CSS定位，最后再在各個(gè)塊中添加相應(yīng)的內(nèi)容。div以及新增的頁(yè)面結(jié)構(gòu)布局標(biāo)簽是可以被嵌套的，可以實(shí)現(xiàn)更為復(fù)雜的頁(yè)面排版。參考示例：7-1-1.html,7-1-2.html第7頁(yè)7.1.2頁(yè)面分塊使用布局標(biāo)簽+CSS布局頁(yè)面時(shí)，7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽1．header元素<header>標(biāo)簽用于定義文檔的頁(yè)眉（介紹信息），可以包含所有通常放在頁(yè)面頭部的內(nèi)容，一般用來(lái)放置整個(gè)頁(yè)面或頁(yè)面內(nèi)的一個(gè)內(nèi)容區(qū)塊的標(biāo)題，也可以包含網(wǎng)站Logo圖片、搜素表單或者其他相關(guān)內(nèi)容。其基本語(yǔ)法格式如下。<header><hn>網(wǎng)頁(yè)主題</hn>…</header>第43頁(yè)7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽1．header元素第8頁(yè)7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽2．nav元素nav元素用于定義導(dǎo)航鏈接，是HTML5新增的元素，該元素可以將具有導(dǎo)航性質(zhì)的鏈接歸納在一個(gè)區(qū)域中，使頁(yè)面元素的語(yǔ)義更加明確。其中的導(dǎo)航元素可以鏈接到站點(diǎn)的其他頁(yè)面，或者當(dāng)前頁(yè)的其他部分。

一個(gè)HTML頁(yè)面中可以包含多個(gè)nav元素，作為頁(yè)面整體或不同部分的導(dǎo)航。第44頁(yè)7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽2．nav元素第9頁(yè)7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽3．a(chǎn)rticle元素article元素代表文檔、頁(yè)面或者應(yīng)用程序中與上下文相關(guān)的獨(dú)立部分，該元素經(jīng)常被用于定義一篇日志、一條新聞或用戶(hù)評(píng)論等。article元素通常使用多個(gè)section元素進(jìn)行劃分，一個(gè)頁(yè)面中article元素可以出現(xiàn)多次。第45頁(yè)7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽3．a(chǎn)rticle元素第10頁(yè)7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽4．a(chǎn)side元素<aside>標(biāo)簽用來(lái)定義當(dāng)前頁(yè)面或者文章的附屬信息部分。aside元素的用法主要有兩種，一種是被包含在article元素中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的相關(guān)資料、名次解釋等。另一種是在article元素之外使用作為頁(yè)面或站點(diǎn)全局的附屬信息部分。最典型的是側(cè)邊欄，其中的內(nèi)容可以使友情鏈接，博客中的其它文章列表、廣告單元等。第46頁(yè)7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽4．a(chǎn)side元素第11頁(yè)7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽5．section元素section元素用于對(duì)網(wǎng)站或應(yīng)用程序中頁(yè)面上的內(nèi)容進(jìn)行分塊，一個(gè)section元素通常由內(nèi)容和標(biāo)題組成。參考示例：

7-1-3.html第47頁(yè)7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽5．section元素第12頁(yè)7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽6．footer元素<footer>標(biāo)簽用于定義一個(gè)頁(yè)面或者區(qū)域的底部，它可以包含所有通常放在頁(yè)面底部的內(nèi)容。在html5開(kāi)發(fā)中使用footer標(biāo)簽時(shí)，把它當(dāng)作普通div標(biāo)簽對(duì)待即可，只不過(guò)一般用于網(wǎng)站底部布局。一個(gè)頁(yè)面中可以包含多個(gè)footer元素，但最好只使用一次footer即可。同時(shí)，也可以在article元素或者section元素中添加footer元素。第48頁(yè)7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽6．footer元素第13頁(yè)7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽7．figure和figcaption標(biāo)簽在HTML5中，figure標(biāo)簽用于定義獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等），一般指一個(gè)單獨(dú)的單元。figure元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān)，但如果被刪除，也不會(huì)對(duì)文檔流產(chǎn)生影響。

figcaption標(biāo)簽用于為figure元素組添加標(biāo)題，一個(gè)figure元素內(nèi)最多允許使用一個(gè)figcaption元素，該元素應(yīng)該放在figure元素的第一個(gè)或者最后一個(gè)子元素的位置。參考示例7-1-4.html第49頁(yè)7.1.3頁(yè)面結(jié)構(gòu)標(biāo)簽7．figure和figcapti7.2浮動(dòng)與定位

本節(jié)主要內(nèi)容：案例分析元素的浮動(dòng)清除浮動(dòng)定位屬性定位方式Overflow案例制作第50頁(yè)7.2浮動(dòng)與定位本節(jié)主要內(nèi)容：第15頁(yè)7.2.1案例分析【案例展示】使用盒模型的定位與浮動(dòng)知識(shí)制作首頁(yè)熱銷(xiāo)產(chǎn)品布局頁(yè)面?！局R(shí)要點(diǎn)】定位屬性、定位方式、浮動(dòng)與清除浮動(dòng)?！緦W(xué)習(xí)目標(biāo)】掌握使用盒模型的定位與浮動(dòng)實(shí)現(xiàn)各種排版需要第51頁(yè)7.2.1案例分析【案例展示】使用盒模型的定位與浮動(dòng)知識(shí)7.2.2元素的浮動(dòng)浮動(dòng)（float）是使用率較高的一種定位方式。浮動(dòng)元素可以向左或向右移動(dòng)，直到它的外邊距邊緣碰到包含塊內(nèi)邊距邊緣或另一個(gè)浮動(dòng)元素的外邊距邊緣為止。float屬性定義元素在哪個(gè)方向浮動(dòng)，任何元素都可以浮動(dòng)，浮動(dòng)元素會(huì)變成一個(gè)塊狀元素。語(yǔ)法：float：none|left|right參數(shù)：none為對(duì)象不浮動(dòng)，left為對(duì)象浮在左邊，right為對(duì)象浮在右邊。說(shuō)明：該屬性的值指出了對(duì)象是否浮動(dòng)及如何浮動(dòng)。第52頁(yè)7.2.2元素的浮動(dòng)浮動(dòng)（float）是使用率較高的一種7.2.1元素的浮動(dòng)參考示例：7-2-1.html，

7-2-2.html，7-2-3.html,7-2-4.html第53頁(yè)7.2.1元素的浮動(dòng)參考示例：第18頁(yè)7.2.3清除浮動(dòng)在頁(yè)面布局時(shí)，當(dāng)容器的高度設(shè)置為auto且容器的內(nèi)容中有浮動(dòng)元素時(shí)，容器的高度不能自動(dòng)伸長(zhǎng)以適應(yīng)內(nèi)容的高度，使得內(nèi)容溢出到容器外面導(dǎo)致頁(yè)面出現(xiàn)錯(cuò)位，這個(gè)現(xiàn)象被稱(chēng)為浮動(dòng)溢出。為了防止這個(gè)現(xiàn)象的出現(xiàn)而進(jìn)行的CSS處理，就叫做清除浮動(dòng)。語(yǔ)法：clear：none|left|right|both參數(shù)：none允許兩邊都可以有浮動(dòng)對(duì)象，both不允許有浮動(dòng)對(duì)象，left不允許左邊有浮動(dòng)對(duì)象，right不允許右邊有浮動(dòng)對(duì)象參考示例：7-2-5.html第54頁(yè)7.2.3清除浮動(dòng)在頁(yè)面布局時(shí)，當(dāng)容器的高度設(shè)置為aut7.2.4定位屬性1．定位模式在CSS中，position屬性用于定義元素的定位模式，其基本語(yǔ)法格式如下:position:static|relative|absolute|fixed參數(shù)：

static：默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中。

relative：相對(duì)定位，相對(duì)于其原文檔流的位置進(jìn)行定位。

absolute：絕對(duì)定位，相對(duì)于其上一個(gè)已經(jīng)定位的父元素進(jìn)行定位。

fixed：絕對(duì)定位，相對(duì)于瀏覽器窗口進(jìn)行定位。第55頁(yè)7.2.4定位屬性1．定位模式第20頁(yè)7.2.4定位屬性2．邊偏移定位模式（positon）僅僅用于定義元素以哪種方式定位，并不能確定元素的具體位置。在CSS中，通過(guò)邊偏移屬性top、bottom、left或right來(lái)精確定義定位元素的位置，具體解釋如表7-2所示。第56頁(yè)7.2.4定位屬性2．邊偏移第21頁(yè)7.2.4定位屬性表7-1邊偏移設(shè)置方式第57頁(yè)邊偏移屬性描述top頂端偏移量，定義元素相對(duì)于其父元素上邊線(xiàn)的距離bottom底部偏移量，定義元素相對(duì)于其父元素下邊線(xiàn)的距離left左側(cè)偏移量，定義元素相對(duì)于其父元素左邊線(xiàn)的距離right右側(cè)偏移量，定義元素相對(duì)于其父元素右邊線(xiàn)的距離7.2.4定位屬性表7-1邊偏移設(shè)置方式第22頁(yè)邊偏移屬7.2.5定位方式1．靜態(tài)定位static所謂靜態(tài)位置就是各個(gè)元素在HTML文檔流中默認(rèn)的位置靜態(tài)定位是元素的默認(rèn)定位方式，position屬性的取值為

satic。在靜態(tài)定位狀態(tài)下，無(wú)法通過(guò)邊偏移屬性（top、bottom、left或right）來(lái)改變?cè)氐奈恢?。參考示例?-2-6.html第58頁(yè)7.2.5定位方式1．靜態(tài)定位static第23頁(yè)7.2.5定位方式2．相對(duì)定位relative相對(duì)定位是將元素相對(duì)于它本身的位置進(jìn)行定位。對(duì)元素設(shè)置相對(duì)定位后，可以通過(guò)邊偏移屬性改變?cè)氐奈恢茫撬谖臋n流中的位置仍然保留。參考示例：7-2-7.html第59頁(yè)7.2.5定位方式2．相對(duì)定位relative第24頁(yè)7.2.5定位方式3．絕對(duì)定位absolute絕對(duì)定位是將元素依據(jù)最近的已經(jīng)定位（絕對(duì)、固定或相對(duì)定位）的父元素進(jìn)行定位,若所有父元素都沒(méi)有定位，則依據(jù)body根元素（瀏覽器窗口）進(jìn)行定位。參考示例：7-2-8.html,7-2-9.html第60頁(yè)7.2.5定位方式3．絕對(duì)定位absolute第25頁(yè)7.2.5定位方式4．固定定位fixed固定定位是絕對(duì)定位的一種特殊形式，它以瀏覽器窗口作為參照物來(lái)定義網(wǎng)頁(yè)元素。當(dāng)對(duì)元素設(shè)置固定定位后，它將脫離標(biāo)準(zhǔn)文檔流的控制，始終依據(jù)瀏覽器窗口來(lái)定義自已的顯示位置。不管瀏覽器滾動(dòng)條如何滾動(dòng)，也不管瀏覽器窗口的大小如何變化，該元素都會(huì)始終顯示在瀏覽器窗口的固定位置。參考示例：7-2-10.html第61頁(yè)7.2.5定位方式4．固定定位fixed第26頁(yè)7.2.5定位方式5．z-index層疊等級(jí)屬性當(dāng)對(duì)多個(gè)元素同時(shí)設(shè)置定位時(shí)，定位元素之間有可能會(huì)發(fā)生重疊，在CSS中，要想調(diào)整重疊定位元素的堆疊順序，可以對(duì)定位元素應(yīng)用z-index層疊等級(jí)屬性，其取值可為正整數(shù)、負(fù)整數(shù)和0。z-index的默認(rèn)屬性值是0，取值越大，定位元素在層疊元素中越居上。第62頁(yè)7.2.5定位方式5．z-index層疊等級(jí)屬性第27.2.6overflow當(dāng)盒子內(nèi)的元素超出盒子自身的大小時(shí)，內(nèi)容就會(huì)溢出，規(guī)范溢出內(nèi)容的顯示方式，要使用overflow屬性，其基本語(yǔ)法格式如下。overflow:visible|hidden|auto|scroll參數(shù)：visible：溢出內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外(默認(rèn)值)hidden：溢出內(nèi)容會(huì)被修剪，并