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

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

盒子相關(guān)屬性·

元素的浮動(dòng)和定位·認(rèn)識(shí)盒子模型·元素的類型與轉(zhuǎn)換

HTML學(xué)習(xí)目標(biāo)掌握盒子的相關(guān)屬性，能夠制作常見的盒子模型效果。1掌握理解掌握熟悉2理解背景屬性的設(shè)置方法，能夠設(shè)置背景顏色和圖像

。3熟悉清除浮動(dòng)的方法，可以使用不同方法清除浮動(dòng)。掌握元素的定位，能夠?yàn)樵卦O(shè)置常見的定位模式。4目錄盒子模型相關(guān)屬性?點(diǎn)擊查看本小節(jié)知識(shí)架構(gòu)元素的類型與轉(zhuǎn)換?點(diǎn)擊查看本小節(jié)知識(shí)架構(gòu)元素的浮動(dòng)?點(diǎn)擊查看本小節(jié)知識(shí)架構(gòu)【任務(wù)4-1】認(rèn)識(shí)盒子模型元素的定位?點(diǎn)擊查看本小節(jié)知識(shí)架構(gòu)【任務(wù)4-2】【任務(wù)4-3】【任務(wù)4-4】【任務(wù)4-5】?點(diǎn)擊查看本小節(jié)知識(shí)架構(gòu)目錄制作導(dǎo)航及banner模塊制作最新動(dòng)態(tài)模塊制作樣片欣賞模塊布局及定義基礎(chǔ)樣式制作頁腳及懸浮框模塊【任務(wù)4-6】【任務(wù)4-7】【任務(wù)4-8】【任務(wù)4-9】【任務(wù)4-10】知識(shí)架構(gòu)【任務(wù)4-1】認(rèn)識(shí)盒子模型1認(rèn)識(shí)盒子模型【任務(wù)4-2】盒子模型相關(guān)屬性邊框?qū)傩詢?nèi)邊距屬性外邊距屬性知識(shí)架構(gòu)背景屬性盒子的寬與高12345【任務(wù)4-3】

元素的類型與轉(zhuǎn)換元素的類型<span>標(biāo)記元素的轉(zhuǎn)換知識(shí)架構(gòu)123

【任務(wù)4-4】元素的浮動(dòng)元素的浮動(dòng)屬性清除浮動(dòng)知識(shí)架構(gòu)12overflow屬性3

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

【任務(wù)4-1】認(rèn)識(shí)盒子模型下面將帶領(lǐng)讀者認(rèn)識(shí)盒子模型。

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

【任務(wù)4-1】認(rèn)識(shí)盒子模型1.認(rèn)識(shí)盒子模型以手機(jī)盒子為例，分析盒子模型

【任務(wù)4-1】認(rèn)識(shí)盒子模型1.

【任務(wù)4-2】盒子模型相關(guān)屬性盒子模型的相關(guān)屬性包括邊框?qū)傩?、?nèi)外邊距屬性、背景屬性和寬高屬性，通過設(shè)置這些屬性可使元素的表現(xiàn)形式更加多樣化。下面，將對(duì)盒子模型的相關(guān)屬性進(jìn)行詳細(xì)講解。邊框?qū)傩詾榱朔指铐撁嬷胁煌暮凶?，常常需要給元素設(shè)置邊框效果。設(shè)置內(nèi)容樣式屬性常用屬性值邊框樣式border-style:上邊[右邊下邊左邊];none無（默認(rèn)）、solid單實(shí)線、dashed虛線、dotted點(diǎn)線、double雙實(shí)線邊框?qū)挾萣order-width:上邊[右邊下邊左邊];像素值邊框顏色border-color:上邊[右邊下邊左邊];顏色值、#十六進(jìn)制、rgb(r,g,b)、rgb(r%,g%,b%)綜合設(shè)置邊框border:四邊寬度四邊樣式四邊顏色;

【任務(wù)4-2】盒子模型相關(guān)屬性1.邊框?qū)傩訡SS邊框?qū)傩詎one：沒有邊框solid：邊框?yàn)閱螌?shí)線dashed：邊框?yàn)樘摼€dotted：邊框?yàn)辄c(diǎn)線double：邊框?yàn)殡p實(shí)線邊框樣式（border-style）屬性值border-style綜合屬性

border-style:solid;/*四邊均為實(shí)線*/

border-style:soliddotted;/*上下實(shí)線、左右點(diǎn)線*/border-style:soliddotteddashed;/*上實(shí)線、左右點(diǎn)線、下虛線*/

【任務(wù)4-2】盒子模型相關(guān)屬性1.邊框?qū)傩訡SS邊框?qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）屬性值在設(shè)置邊框?qū)挾葧r(shí)，必須同時(shí)設(shè)置邊框樣式，如果未設(shè)置樣式或設(shè)置為none，則不論寬度設(shè)置為多少都無效。注意：常用取值單位為像素。

【任務(wù)4-2】盒子模型相關(guān)屬性1.邊框?qū)傩訡SS邊框?qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）屬性值border-width:5px;/*四邊寬度均為5像素*/border-width:5px3px;/*上下邊框5像素寬度、左右邊框3像素寬度*/border-width:5px3px4px;/*上邊框5像素寬、左右邊框3像素寬度、下邊框4像素寬度*/border-width綜合屬性

【任務(wù)4-2】盒子模型相關(guān)屬性1.邊框?qū)傩訡SS邊框?qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）邊框顏色（border-color）屬性值顏色值，例：red、green#十六進(jìn)制色值，例：#cccrgb(r,g,b)，例：rgb(30,0,0)rgb(r%,g%,b%)實(shí)際工作中最常用#十六進(jìn)制色值，例：#ccc

【任務(wù)4-2】盒子模型相關(guān)屬性1.邊框?qū)傩訡SS邊框?qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）邊框顏色（border-color）屬性值border-color:#f00;/*四邊均為紅色*/border-color:#f00#00f;/*上下紅色、左右藍(lán)色*/border-color:#f00#00f#0f0;/*上紅色、左右藍(lán)色、下綠色*/border-color綜合屬性

【任務(wù)4-2】盒子模型相關(guān)屬性1.邊框?qū)傩訡SS邊框?qū)傩赃吙驑邮剑╞order-style）邊框?qū)挾龋╞order-width）邊框顏色（border-color）邊框綜合屬性（border）border-top:上邊框?qū)挾葮邮筋伾?border-right:右邊框?qū)挾葮邮筋伾?border-bottom:下邊框?qū)挾葮邮筋伾?border-left:左邊框?qū)挾葮邮筋伾?border:四邊寬度樣式顏色;border:寬度,樣式,顏色注意：寬度、樣式、顏色順序任意，不分先后

【任務(wù)4-2】盒子模型相關(guān)屬性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不允許使用負(fù)值padding:5px/*四個(gè)方向內(nèi)邊距為5像素寬度*/padding:5px3px/*上下內(nèi)邊距為5像素，左右內(nèi)邊距為3像素*/padding:5px3px4px/*上內(nèi)邊距為5像素，左右內(nèi)邊距為3像素，下內(nèi)邊距為4像素*/

【任務(wù)4-2】盒子模型相關(guān)屬性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允許使用負(fù)值

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

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

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

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

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

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

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

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

【任務(wù)4-2】盒子模型相關(guān)屬性5.盒子的寬與高

width

左內(nèi)邊距

右內(nèi)邊距邊框

左外邊距

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

邊框盒子總寬度和總高度

【任務(wù)4-2】盒子模型相關(guān)屬性5.盒子的寬與高結(jié)論盒子的總寬度=

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

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

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

【任務(wù)4-3】元素的類型與轉(zhuǎn)換1.元素的類型<p><ul>常見的塊元素<h1>—<h6><ol><div><li>其中<div>標(biāo)記是最典型的塊元素。

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

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

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

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

【任務(wù)4-3】元素的類型與轉(zhuǎn)換3.

【任務(wù)4-3】元素的類型與轉(zhuǎn)換塊元素垂直外邊距的合并知識(shí)拓展塊元素垂直外邊距的合并形式相鄰元素垂直外邊距的合并嵌套元素垂直外邊距的合并外邊距外邊距外邊距

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

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

【任務(wù)4-3】元素的類型與轉(zhuǎn)換初學(xué)者在設(shè)計(jì)一個(gè)頁面時(shí)，通常會(huì)按照默認(rèn)的排版方式，將頁面中的元素從上到下一

一羅列。呆板不美觀為元素設(shè)置浮動(dòng)，可以使頁面元素變得整齊有序。下面，將對(duì)元素的浮動(dòng)進(jìn)行詳細(xì)講解。

【任務(wù)4-4】元素的浮動(dòng)元素的浮動(dòng)屬性float究竟是什么是浮動(dòng)？應(yīng)用排列圖文排列論壇分享說到浮動(dòng)，其實(shí)大家并不陌生

【任務(wù)4-4】元素的浮動(dòng)1.元素的浮動(dòng)屬性float所謂元素的浮動(dòng)是指設(shè)置了浮動(dòng)屬性的元素會(huì)脫離標(biāo)準(zhǔn)文檔流的控制，移動(dòng)到其父元素中指定位置的過程。

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

【任務(wù)4-4】元素的浮動(dòng)1.清除浮動(dòng)為什么要清除浮動(dòng)？

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

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

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

【任務(wù)4-4】元素的浮動(dòng)2.清除浮動(dòng)空標(biāo)記overflowafter偽對(duì)象在浮動(dòng)元素之后添加空標(biāo)記，并對(duì)該標(biāo)記應(yīng)用“clear:both”樣式，可清除浮動(dòng)。這個(gè)空標(biāo)記可以為<div>、<p>、<hr/>等任何標(biāo)記?！皁verflow:hidden;”樣式，也可以清除浮動(dòng)對(duì)該元素的影響，該方法彌補(bǔ)了空標(biāo)記清除浮動(dòng)的不足。使用after偽對(duì)象也可以清除浮動(dòng)，但是該方法只適用于IE8及以上版本瀏覽器和其他非IE瀏覽器。010203

【任務(wù)4-4】元素的浮動(dòng)2.overflow屬性

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

【任務(wù)4-5】元素的定位下面，將對(duì)元素的定位進(jìn)行詳細(xì)講解。元素的定位屬性什么是定位？

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

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

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

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

【任務(wù)4-5】元素的定位2.相對(duì)定位relative相對(duì)定位是將元素相對(duì)于它在標(biāo)準(zhǔn)文檔流中的位置進(jìn)行定位。定位前定位后

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

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

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

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

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

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

【任務(wù)4-6】布局及定義基礎(chǔ)樣式拿到效果圖后的準(zhǔn)備工作對(duì)頁面進(jìn)行布局，并添加CSS樣式。定義基礎(chǔ)樣式