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

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

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

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

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

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

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

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

relative：相對定位，相對于其原文檔流的位置進行定位。

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

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

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

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

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

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

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

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

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

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

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

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

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

relative：相對定位，相對于其原文檔流的位置進行定位。

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

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

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