網(wǎng)頁設計與制作項目教程項目4“青春樹兒童攝影網(wǎng)”課件

項目4“青春樹兒童攝影網(wǎng)”首頁制作·

盒子相關屬性·

元素的浮動和定位·認識盒子模型·元素的類型與轉換

HTML學習目標掌握盒子的相關屬性，能夠制作常見的盒子模型效果。1掌握理解掌握熟悉2理解背景屬性的設置方法，能夠設置背景顏色和圖像

。3熟悉清除浮動的方法，可以使用不同方法清除浮動。掌握元素的定位，能夠為元素設置常見的定位模式。4目錄盒子模型相關屬性?點擊查看本小節(jié)知識架構元素的類型與轉換?點擊查看本小節(jié)知識架構元素的浮動?點擊查看本小節(jié)知識架構【任務4-1】認識盒子模型元素的定位?點擊查看本小節(jié)知識架構【任務4-2】【任務4-3】【任務4-4】【任務4-5】?點擊查看本小節(jié)知識架構目錄制作導航及banner模塊制作最新動態(tài)模塊制作樣片欣賞模塊布局及定義基礎樣式制作頁腳及懸浮框模塊【任務4-6】【任務4-7】【任務4-8】【任務4-9】【任務4-10】知識架構【任務4-1】認識盒子模型1認識盒子模型【任務4-2】盒子模型相關屬性邊框屬性內(nèi)邊距屬性外邊距屬性知識架構背景屬性盒子的寬與高12345【任務4-3】

元素的類型與轉換元素的類型<span>標記元素的轉換知識架構123

【任務4-4】元素的浮動元素的浮動屬性清除浮動知識架構12overflow屬性3

【任務4-5】元素的定位元素的定位屬性靜態(tài)定位知識架構相對定位固定定位絕對定位z-index層疊等級屬性123456盒子模型是網(wǎng)頁布局的基礎，只有掌握了盒子模型的各種規(guī)律和特征，才可以更好地控制網(wǎng)頁中各個元素所呈現(xiàn)的效果。

【任務4-1】認識盒子模型下面將帶領讀者認識盒子模型。

【任務4-1】認識盒子模型認識盒子模型什么是盒子模型？1.認識盒子模型聯(lián)想一下生活中常見的盒子？它們的共同特點

【任務4-1】認識盒子模型1.認識盒子模型以手機盒子為例，分析盒子模型

【任務4-1】認識盒子模型1.

【任務4-2】盒子模型相關屬性盒子模型的相關屬性包括邊框屬性、內(nèi)外邊距屬性、背景屬性和寬高屬性，通過設置這些屬性可使元素的表現(xiàn)形式更加多樣化。下面，將對盒子模型的相關屬性進行詳細講解。邊框屬性為了分割頁面中不同的盒子，常常需要給元素設置邊框效果。設置內(nèi)容樣式屬性常用屬性值邊框樣式border-style:上邊[右邊下邊左邊];none無（默認）、solid單實線、dashed虛線、dotted點線、double雙實線邊框寬度border-width:上邊[右邊下邊左邊];像素值邊框顏色border-color:上邊[右邊下邊左邊];顏色值、#十六進制、rgb(r,g,b)、rgb(r%,g%,b%)綜合設置邊框border:四邊寬度四邊樣式四邊顏色;

【任務4-2】盒子模型相關屬性1.邊框屬性CSS邊框屬性none：沒有邊框solid：邊框為單實線dashed：邊框為虛線dotted：邊框為點線double：邊框為雙實線邊框樣式（border-style）屬性值border-style綜合屬性

border-style:solid;/*四邊均為實線*/

border-style:soliddotted;/*上下實線、左右點線*/border-style:soliddotteddashed;/*上實線、左右點線、下虛線*/

【任務4-2】盒子模型相關屬性1.邊框屬性CSS邊框屬性邊框樣式（border-style）邊框寬度（border-width）屬性值在設置邊框寬度時，必須同時設置邊框樣式，如果未設置樣式或設置為none，則不論寬度設置為多少都無效。注意：常用取值單位為像素。

【任務4-2】盒子模型相關屬性1.邊框屬性CSS邊框屬性邊框樣式（border-style）邊框寬度（border-width）屬性值border-width:5px;/*四邊寬度均為5像素*/border-width:5px3px;/*上下邊框5像素寬度、左右邊框3像素寬度*/border-width:5px3px4px;/*上邊框5像素寬、左右邊框3像素寬度、下邊框4像素寬度*/border-width綜合屬性

【任務4-2】盒子模型相關屬性1.邊框屬性CSS邊框屬性邊框樣式（border-style）邊框寬度（border-width）邊框顏色（border-color）屬性值顏色值，例：red、green#十六進制色值，例：#cccrgb(r,g,b)，例：rgb(30,0,0)rgb(r%,g%,b%)實際工作中最常用#十六進制色值，例：#ccc

【任務4-2】盒子模型相關屬性1.邊框屬性CSS邊框屬性邊框樣式（border-style）邊框寬度（border-width）邊框顏色（border-color）屬性值border-color:#f00;/*四邊均為紅色*/border-color:#f00#00f;/*上下紅色、左右藍色*/border-color:#f00#00f#0f0;/*上紅色、左右藍色、下綠色*/border-color綜合屬性

【任務4-2】盒子模型相關屬性1.邊框屬性CSS邊框屬性邊框樣式（border-style）邊框寬度（border-width）邊框顏色（border-color）邊框綜合屬性（border）border-top:上邊框寬度樣式顏色;border-right:右邊框寬度樣式顏色;border-bottom:下邊框寬度樣式顏色;border-left:左邊框寬度樣式顏色;border:四邊寬度樣式顏色;border:寬度,樣式,顏色注意：寬度、樣式、顏色順序任意，不分先后

【任務4-2】盒子模型相關屬性1.內(nèi)邊距屬性CSS的邊距屬性包括“內(nèi)邊距”和“外邊距”兩種內(nèi)邊距外邊距外邊距內(nèi)邊距（內(nèi)填充）padding-top:上邊距;padding-right:右邊距;padding-bottom:下邊距;padding-left:左邊距;padding：四邊內(nèi)邊距;注意：內(nèi)邊距padding不允許使用負值padding:5px/*四個方向內(nèi)邊距為5像素寬度*/padding:5px3px/*上下內(nèi)邊距為5像素，左右內(nèi)邊距為3像素*/padding:5px3px4px/*上內(nèi)邊距為5像素，左右內(nèi)邊距為3像素，下內(nèi)邊距為4像素*/

【任務4-2】盒子模型相關屬性2.外邊距屬性CSS的邊距屬性包括“內(nèi)邊距”和“外邊距”兩種內(nèi)邊距外邊距外邊距內(nèi)邊距外邊距（margin）margin-top:上外邊距;margin-right:右外邊距;margin-bottom:下外邊距;margin-left:左外邊距;margin:四邊外邊距;margin:5px/*四邊外邊距為5像素寬度*/margin:5px3px/*上下外邊距為5像素，左右外邊距為3像素*/margin:5px3px4px/*外邊距：上為5像素，左右為3像素，下為4像素*/注意：和內(nèi)邊距不同，外邊距margin允許使用負值

【任務4-2】盒子模型相關屬性3.外邊距屬性CSS的邊距屬性包括“內(nèi)邊距”和“外邊距”兩種內(nèi)邊距外邊距內(nèi)邊距當對塊級元素應用寬度屬性width，并將左右的外邊距都設置為auto，可使塊級元素水平居中，實際工作中常用這種方式進行網(wǎng)頁布局。margin:0auto/*利用margin實現(xiàn)塊元素水平居中*/margin:5pxauto/*利用margin實現(xiàn)塊元素水平居中，并且上下拉開5像素邊距*/

【任務4-2】盒子模型相關屬性3.外邊距屬性CSS的邊距屬性包括“內(nèi)邊距”和“外邊距”兩種內(nèi)邊距外邊距內(nèi)邊距為了更方便地控制網(wǎng)頁中的元素，制作網(wǎng)頁時，通常先清除元素的默認內(nèi)外邊距。*{ padding:0;/*清除內(nèi)邊距*/ margin:0;/*清除外邊距*/}內(nèi)外邊距清除

【任務4-2】盒子模型相關屬性3.在CSS中，不僅可以將網(wǎng)頁元素的背景設置為某一種顏色，還可以將圖像作為網(wǎng)頁元素的背景，通過background-image屬性實現(xiàn)。background-image:背景顏色屬性例如：body{background-color:#CCC;background-image:url(images/jianbian.jpg);}

【任務4-2】盒子模型相關屬性背景屬性4.默認情況下，背景圖像會自動向水平和豎直兩個方向平鋪。如果不希望背景圖像平鋪，或者只沿著一個方向平鋪，可以通過background-repeat屬性來控制。background-repeat圖像平鋪屬性平鋪屬性值含義repeat沿水平和豎直兩個方向平鋪（默認值）no-repeat不平鋪（圖像位于元素的左上角，只顯示一次）repeat-x只沿水平方向平鋪repeat-y只沿豎直方向平鋪背景屬性

【任務4-2】盒子模型相關屬性4.背景屬性background-position圖像位置屬性位置屬性取值含義單位數(shù)值設置圖像左上角在元素中的坐標，例如background-position:20px20px;預定義的關鍵字水平方向值：left、center、right。垂直方向值：top、center、bottom。百分比0%0%：圖像左上角與元素的左上角對齊。50%50%：圖像50%50%中心點與元素50%50%的中心點對齊。20%30%：圖像20%30%的點與元素20%30%的點對齊。100%100%：圖像右下角與元素的右下角對齊，而不是圖像充滿元素。

【任務4-2】盒子模型相關屬性4.設置背景圖像固定background-attachment圖像固定屬性固定屬性取值含義scroll圖像隨頁面元素一起滾動（默認值）。fixed圖像固定在屏幕上，不隨頁面元素滾動。

【任務4-2】盒子模型相關屬性4.綜合設置元素的背景CSS中的背景屬性也是一個復合屬性，可以將背景相關的樣式都綜合定義在一個復合屬性background中。background:背景色url(“圖像”)平鋪定位固定;在上述語法格式中，各個樣式順序任意，中間用空格隔開，不需要的樣式可以省略。但實際工作中通常按照背景色、url("圖像")、平鋪、定位、固定的順序來書寫。

【任務4-2】盒子模型相關屬性4.盒子的寬與高盒子總寬度和總高度?網(wǎng)頁是由多個盒子排列而成?寬度和高度決定了盒子的大小高度寬度

【任務4-2】盒子模型相關屬性5.盒子的寬與高

width

左內(nèi)邊距

右內(nèi)邊距邊框

左外邊距

右外邊距?每個盒子都有固定的大小

邊框盒子總寬度和總高度

【任務4-2】盒子模型相關屬性5.盒子的寬與高結論盒子的總寬度=

width+左右內(nèi)邊距之和+左右邊框寬度之和+左右外邊距之和盒子的總高度=height+上下內(nèi)邊距之和+上下邊框寬度之和+上下外邊距之和盒子模型的總寬度與總高度

【任務4-2】盒子模型相關屬性5.在前面的章節(jié)中介紹CSS屬性時，經(jīng)常會提到“僅適用于塊級元素”。什么是塊級元素？在HTML標記語言中元素又是如何分類的呢？

【任務4-3】元素的類型與轉換下面將對元素的類型與轉換進行詳細講解。元素的類型HTML標記被定義成了不同的類型，一般分為塊標記和行內(nèi)標記，也稱塊元素和行內(nèi)元素。在頁面中以區(qū)域塊的形式出現(xiàn)。每個塊元素通常都會獨自占據(jù)一整行或多整行?？梢詫ζ湓O置寬度、高度、對齊等屬性。不占有獨立的區(qū)域。僅僅靠自身的字體大小和圖像尺寸來支撐結構。一般不可以設置寬度、高度、對齊等屬性。

【任務4-3】元素的類型與轉換1.元素的類型<p><ul>常見的塊元素<h1>—<h6><ol><div><li>其中<div>標記是最典型的塊元素。

【任務4-3】元素的類型與轉換1.元素的類型<a><em>常見的行內(nèi)元素<strong><span><b><u>其中<span>標記最典型的行內(nèi)元素。

【任務4-3】元素的類型與轉換1.<span>標記1<span>標記是一個行內(nèi)標記。2<span>與</span>之間只能包含文本和各種行內(nèi)標記。3

<span>標記常用于定義網(wǎng)頁中某些特殊顯示的文本，配合class屬性使用。4當其他行內(nèi)標記都不合適時，就可以使用<span>標記。

【任務4-3】元素的類型與轉換2.元素的轉換displayblockinline-blocknone此元素將顯示為行內(nèi)元素（行內(nèi)元素默認的display屬性值）。此元素將顯示為塊元素（塊元素默認的display屬性值）。此元素將顯示為行內(nèi)塊元素，可以對其設置寬高和對齊等屬性，但是該元素不會獨占一行。此元素將被隱藏，不顯示，也不占用頁面空間。

【任務4-3】元素的類型與轉換3.

【任務4-3】元素的類型與轉換塊元素垂直外邊距的合并知識拓展塊元素垂直外邊距的合并形式相鄰元素垂直外邊距的合并嵌套元素垂直外邊距的合并外邊距外邊距外邊距

【任務4-3】元素的類型與轉換相鄰塊元素垂直外邊距的合并1相鄰塊元素之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。

【任務4-3】元素的類型與轉換嵌套塊元素垂直外邊距的合并2對于兩個嵌套關系的塊元素，如果父元素沒有上內(nèi)邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發(fā)生合并，合并后的外邊距為兩者中的較大者。

【任務4-3】元素的類型與轉換初學者在設計一個頁面時，通常會按照默認的排版方式，將頁面中的元素從上到下一

一羅列。呆板不美觀為元素設置浮動，可以使頁面元素變得整齊有序。下面，將對元素的浮動進行詳細講解。

【任務4-4】元素的浮動元素的浮動屬性float究竟是什么是浮動？應用排列圖文排列論壇分享說到浮動，其實大家并不陌生

【任務4-4】元素的浮動1.元素的浮動屬性float所謂元素的浮動是指設置了浮動屬性的元素會脫離標準文檔流的控制，移動到其父元素中指定位置的過程。

【任務4-4】元素的浮動1.元素的浮動屬性float基本語法格式選擇器{float:屬性值;}屬性值描述left元素向左浮動right元素向右浮動none元素不浮動（默認值）

【任務4-4】元素的浮動1.清除浮動為什么要清除浮動？

【任務4-4】元素的浮動2.由于浮動元素不再占用原文檔流中的位置，所以會對頁面中其他元素的排版產(chǎn)生影響，如果要避免這種影響，就需要對元素清除浮動。清除浮動

【任務4-4】元素的浮動2.運用clear屬性清除浮動基本語法格式選擇器{clear:屬性值;}屬性值描述left不允許左側有浮動元素（清除左側浮動的影響）right不允許右側有浮動元素（清除右側浮動的影響）both同時清除左右兩側浮動的影響常用屬性值清除浮動

【任務4-4】元素的浮動2.例如：運用clear屬性只能清除元素左右兩側浮動的影響。然而在制作網(wǎng)頁時，經(jīng)常會遇到一些特殊的浮動影響。清除浮動

【任務4-4】元素的浮動2.清除浮動空標記overflowafter偽對象在浮動元素之后添加空標記，并對該標記應用“clear:both”樣式，可清除浮動。這個空標記可以為<div>、<p>、<hr/>等任何標記。“overflow:hidden;”樣式，也可以清除浮動對該元素的影響，該方法彌補了空標記清除浮動的不足。使用after偽對象也可以清除浮動，但是該方法只適用于IE8及以上版本瀏覽器和其他非IE瀏覽器。010203

【任務4-4】元素的浮動2.overflow屬性

【任務4-4】元素的浮動3.overflow屬性可以解決溢出問題，其基本語法格式如下：選擇器{overflow:屬性值;}overflow屬性的常用值有四個，具體如下表所示。屬性值描述visible內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外（默認值）hidden溢出內(nèi)容會被修剪，并且被修剪的內(nèi)容是不可見的auto在需要時產(chǎn)生滾動條，即自適應所要顯示的內(nèi)容scroll溢出內(nèi)容會被修剪，且瀏覽器會始終顯示滾動條浮動布局雖然靈活，但是卻無法對元素的位置進行精確的控制。在CSS中，通過定位屬性可以實現(xiàn)網(wǎng)頁中元素的精確定位。

【任務4-5】元素的定位下面，將對元素的定位進行詳細講解。元素的定位屬性什么是定位？

【任務4-5】元素的定位1.元素的定位屬性在CSS中，通過CSS定位（CSSposition）可以實現(xiàn)網(wǎng)頁元素的精確定位。元素的定位屬性主要包括定位模式和邊偏移兩部分。

【任務4-5】元素的定位1.元素的定位屬性選擇器{position:屬性值；}position屬性用于定義元素的定位模式，其基本語法格式如下：position屬性的常用值有四個，具體如下表所示。值描述static自動定位（默認定位方式）relative相對定位，相對于其原文檔流的位置進行定位absolute絕對定位，相對于其上一個已經(jīng)定位的父元素進行定位fixed固定定位，相對于瀏覽器窗口進行定位定位模式

【任務4-5】元素的定位1.元素的定位屬性邊偏移通過邊偏移屬性top、bottom、left或right，來精確定義定位元素的位置，其取值為不同單位的數(shù)值或百分比，如下表所示。邊偏移屬性描述top頂端偏移量，定義元素相對于其父元素上邊線的距離bottom底部偏移量，定義元素相對于其父元素下邊線的距離left左側偏移量，定義元素相對于其父元素左邊線的距離Right右側偏移量，定義元素相對于其父元素右邊線的距離

【任務4-5】元素的定位1.靜態(tài)定位static靜態(tài)定位是元素的默認定位方式，當position屬性的取值為static時，可以將元素定位于靜態(tài)位置。所謂靜態(tài)位置就是各個元素在HTML文檔流中默認的位置。任何元素在默認狀態(tài)下都會以靜態(tài)定位來確定自己的位置，所以當沒有定義position屬性時，并不說明該元素沒有自己的位置，它會遵循默認值顯示為靜態(tài)位置。在靜態(tài)定位狀態(tài)下，無法通過邊偏移屬性（top、bottom、left或right）來改變元素的位置。

【任務4-5】元素的定位2.相對定位relative相對定位是將元素相對于它在標準文檔流中的位置進行定位。定位前定位后

【任務4-5】元素的定位3.相對定位relative距離左邊150px距離上圖100px在文檔流中的位置仍然保留著

【任務4-5】元素的定位3.絕對定位absolute絕對定位是將元素依據(jù)最近的已經(jīng)定位（絕對、固定或相對定位）的父元素進行定位，若所有父元素都沒有定位，則依據(jù)body根元素（瀏覽器窗口）進行定位。定位前定位后

【任務4-5】元素的定位4.絕對定位absolute距離左邊150px距離頂部100px在文檔流中的位置沒被保存

【任務4-5】元素的定位4.固定定位fixed固定定位是絕對定位的一種特殊形式，它以瀏覽器窗口作為參照物來定義網(wǎng)頁元素。當position屬性的取值為fixed時，即可將元素的定位模式設置為固定定位。

【任務4-5】元素的定位5.z-index層疊等級屬性當對多個元素同時設置定位時，定位元素之間有可能會發(fā)生重疊，如右圖所示。定位導致重疊z-index可以調(diào)整重疊定位元素的堆疊順序，其取值可為正整數(shù)、負整數(shù)和0。z-index的默認值是0。解決重疊問題

【任務4-5】元素的定位6.網(wǎng)站項目”青春樹兒童攝影網(wǎng)”首頁制作該怎樣開發(fā)一個網(wǎng)站項目呢？“青春樹兒童攝影網(wǎng)”首頁制作

【任務4-6】布局及定義基礎樣式拿到效果圖后的準備工作對頁面進行布局，并添加CSS樣式。定義基礎樣式