《HTML5+CSS3網(wǎng)頁制作》課件-模塊七 網(wǎng)頁布局

模塊七網(wǎng)頁布局任務(wù)1CSS3布局基礎(chǔ)網(wǎng)頁制作CSSHTML知識(shí)準(zhǔn)備-----CSS3布局基礎(chǔ)實(shí)戰(zhàn)演練——制作“愚公移山”網(wǎng)頁CSS3布局基礎(chǔ)0201進(jìn)階訓(xùn)練—制作“中國(guó)傳統(tǒng)文化”網(wǎng)頁03動(dòng)手實(shí)踐--制作中國(guó)共產(chǎn)黨的百年大事記04

1.掌握網(wǎng)頁布概念、普通文檔流、元素的類型及轉(zhuǎn)換

2.了解CSS3多列布局CSS3布局基礎(chǔ)學(xué)習(xí)目標(biāo)：

1.

.弘揚(yáng)優(yōu)秀傳統(tǒng)文化鼓勵(lì)學(xué)生深入了解和展現(xiàn)中華優(yōu)秀傳統(tǒng)文化的精髓，增強(qiáng)民族自豪感和文化自信。

2.培養(yǎng)對(duì)中國(guó)科技發(fā)展歷程及重大成就的深刻認(rèn)識(shí)，增強(qiáng)學(xué)生的民族自豪感和國(guó)家認(rèn)同感，理解科技進(jìn)步對(duì)國(guó)家實(shí)力和國(guó)際地位的重要意義。

3.培養(yǎng)創(chuàng)新精神，鼓勵(lì)學(xué)生創(chuàng)造性地解決問題，設(shè)計(jì)更加人性化、高效的信息交互界面，體現(xiàn)創(chuàng)新思維。CSS3布局基礎(chǔ)思政目標(biāo)：

21知識(shí)準(zhǔn)備—什么是布局1知識(shí)準(zhǔn)備--在網(wǎng)頁設(shè)計(jì)與前端開發(fā)中，布局是指如何在網(wǎng)頁上組織和排列元素（如文本、圖像、視頻等）。這涉及到使用CSS（層疊樣式表）來控制元素的大小、位置以及相互之間的關(guān)系。換而言之，就是在制作網(wǎng)頁時(shí)，為實(shí)現(xiàn)頁面結(jié)構(gòu)清晰、有條理，將網(wǎng)頁里所呈現(xiàn)的內(nèi)容按功能或者其他需求進(jìn)行合理劃分、并且對(duì)于每一部分通過調(diào)整對(duì)齊方式、間距調(diào)等來實(shí)現(xiàn)對(duì)網(wǎng)頁的“排版”。

21知識(shí)準(zhǔn)備—什么是布局1知識(shí)準(zhǔn)備--網(wǎng)頁內(nèi)容區(qū)域是指網(wǎng)頁中主體內(nèi)容所在的區(qū)域，一般在瀏覽器窗口中水平居中顯示。。

21知識(shí)準(zhǔn)備—什么是布局1知識(shí)準(zhǔn)備--頁面中的模塊最簡(jiǎn)單的頁面布局，主要由頭部（header）、導(dǎo)航（nav）、焦點(diǎn)圖（banner）、內(nèi)容（content）、頁面底部（footer）五部分組成

21知識(shí)準(zhǔn)備—普通文檔流1知識(shí)準(zhǔn)備--普通文檔流（NormalFlow或稱為文檔流、標(biāo)準(zhǔn)流）是指HTML元素按照其在HTML代碼中的順序從上往下，從左往右，以及CSS的默認(rèn)顯示特性和位置規(guī)則進(jìn)行排列的方式。普通文檔流是網(wǎng)頁布局的基礎(chǔ)，理解和掌握它是進(jìn)行更復(fù)雜布局設(shè)計(jì)前提。1.塊級(jí)元素（BlockElements）塊級(jí)元素默認(rèn)情況下會(huì)獨(dú)占一行，從上到下依次堆疊。2.行內(nèi)元素（InlineElements）行內(nèi)元素則在一行內(nèi)從左到右排列，直到該行排滿后再換到下一行。3.浮動(dòng)（Floats）當(dāng)元素被設(shè)置為浮動(dòng)，它們會(huì)從文檔流中“浮動(dòng)”出來，浮動(dòng)元素雖然改變了位置，但仍會(huì)影響文檔流中的其他元素。4.定位（Positioning）絕對(duì)定位（position:absolute;）和固定定位（position:fixed;）的元素會(huì)完全脫離文檔流，不再影響也不受文檔流中其他元素的影響。

21知識(shí)準(zhǔn)備—元素的類型及轉(zhuǎn)換1知識(shí)準(zhǔn)備--1.塊級(jí)元素（BlockElements）塊級(jí)元素（BlockElements）在HTML中是指那些在頁面布局中以獨(dú)立的行顯示，并且可以設(shè)置寬度、高度、對(duì)齊等屬性的元素。這類元素通常用于結(jié)構(gòu)化文檔內(nèi)容，如段落、標(biāo)題、列表、表格、分區(qū)塊等。它們的特征包括：（1）獨(dú)占一行：每個(gè)塊級(jí)元素都會(huì)新起一行開始顯示，其后的元素也會(huì)另起一行顯示。（2）可設(shè)置寬高：可以直接設(shè)置寬度（width）和高度（height）。（3）支持內(nèi)外邊距：可以應(yīng)用margin（外邊距）和padding（內(nèi)邊距）屬性來調(diào)整元素之間的空間和內(nèi)容與邊框的距離。（4）默認(rèn)寬度：如果沒有指定寬度，塊級(jí)元素通常會(huì)占據(jù)其父容器的全部可用寬度。常見的塊級(jí)元素有div、p、h1-h6、li、table、from、blockquote。

21知識(shí)準(zhǔn)備—元素的類型及轉(zhuǎn)換1知識(shí)準(zhǔn)備--下面通過案例古詩詞春曉7-1演示，塊級(jí)元素的特性。案例分析：通過對(duì)于標(biāo)題使用h1元素，其他段落使用p元素，為了方便區(qū)分，為每一個(gè)元素設(shè)置一個(gè)不同的背景顏色，然后通過CSS設(shè)置盒子的寬高，內(nèi)外邊距的內(nèi)容。對(duì)于類名為two的元素，并未設(shè)置其寬度高度則會(huì)有自定義的寬度和高度，同時(shí)每個(gè)元素會(huì)另起一行。

21知識(shí)準(zhǔn)備—元素的類型及轉(zhuǎn)換1知識(shí)準(zhǔn)備--2.行內(nèi)元素（InlineElements）這類元素通常用于文本內(nèi)容或者小的語義化標(biāo)簽中，它們的行內(nèi)元素（InlineElements）在HTML中是指那些不獨(dú)占一行顯示，而是與其他行內(nèi)元素在同一行內(nèi)順序排特點(diǎn)包括：（1）同行顯示：行內(nèi)元素不會(huì)強(qiáng)迫其周圍的元素?fù)Q行，多個(gè)行內(nèi)元素可以在同一行內(nèi)從左到右排列，直到該行空間不足以容納下一個(gè)元素。（2）寬度和高度：默認(rèn)情況下，行內(nèi)元素的寬度只足夠包裹其內(nèi)容，不能直接設(shè)置寬度和高度。它們的尺寸由內(nèi)容決定。（3）部分支持內(nèi)外邊距：雖然可以設(shè)置水平方向的內(nèi)外邊距（左右margin和padding），但垂直方向的內(nèi)外邊距（上下margin和padding）在某些情況下可能不會(huì)影響周圍元素的布局，因?yàn)樾袃?nèi)元素的特性是緊密排列。（4）默認(rèn)行為：行內(nèi)元素不會(huì)引起上下空白行的出現(xiàn)，適合用來標(biāo)記文本中的某些特殊部分或添加小圖標(biāo)等。常見的行內(nèi)元素有span、a、strong、em、input、button、select等。

21知識(shí)準(zhǔn)備—元素的類型及轉(zhuǎn)換1知識(shí)準(zhǔn)備--下面以div元素為例通過案7-2演示，塊級(jí)元素的特性。案例分析：在7-1案例基礎(chǔ)上，創(chuàng)建文件7-2.html將“風(fēng)雨聲”和“知多少”分別放入一個(gè)span元素中，為了方便區(qū)分，將第一個(gè)span元素設(shè)置id名為a，第一個(gè)span元素設(shè)置id名為b,并設(shè)置不同背景顏色，并試著為id為a的元素這是寬度、高度和外邊距等屬性。從圖中可以看出，行內(nèi)元素不會(huì)單獨(dú)占一行，并且無法單獨(dú)設(shè)置寬度和高度，對(duì)于外邊距在網(wǎng)頁中也只有左右進(jìn)行了設(shè)置。

21知識(shí)準(zhǔn)備—元素的類型及轉(zhuǎn)換1知識(shí)準(zhǔn)備--3.行內(nèi)塊狀元素（Inline-BlockElements）這是一種結(jié)合了塊級(jí)元素和行內(nèi)元素特性的類型，它像行內(nèi)元素一樣在行內(nèi)排列，但同時(shí)可以設(shè)置寬度和高度，如<img>。下面通過案例7-3演示設(shè)置行內(nèi)塊元素的特性。案例分析：使用兩個(gè)p元素將靜夜思故事放入網(wǎng)頁中，并使用兩個(gè)img元素在p元素內(nèi)插入圖片，為p元素設(shè)計(jì)一個(gè)背景顏色。同時(shí)將第一個(gè)img標(biāo)簽設(shè)置id名為one。為id為one的img標(biāo)簽設(shè)置寬度和高度。對(duì)于img元素，雖然不會(huì)獨(dú)占一行，但是可以為其設(shè)置寬度和高度。

21知識(shí)準(zhǔn)備—元素的類型及轉(zhuǎn)換1知識(shí)準(zhǔn)備--4.元素之間的轉(zhuǎn)換網(wǎng)頁是由多個(gè)塊元素和行內(nèi)元素構(gòu)成的盒子排列而成的。當(dāng)想實(shí)現(xiàn)行內(nèi)元素具有塊元素的某些特性或者需要塊元素具有行內(nèi)元素的某些特性，就進(jìn)行元素類型的轉(zhuǎn)換。在CSS中，使用display屬性可以實(shí)現(xiàn)HTML元素布局類型轉(zhuǎn)換。其格式如下：display:屬性值;

21知識(shí)準(zhǔn)備—元素的類型及轉(zhuǎn)換1知識(shí)準(zhǔn)備--下面通過案例7-4演示，使用display屬性實(shí)現(xiàn)元素轉(zhuǎn)換的用法。案例分析：繼續(xù)以7-1案例為基礎(chǔ)，不改變?cè)瓉淼腍TML結(jié)構(gòu)及CSS設(shè)置的樣式，繼續(xù)選擇類名為b的sapn元素，使用display屬性設(shè)置為塊元素，并設(shè)置寬度和高度。經(jīng)過元素轉(zhuǎn)換后，span標(biāo)簽也可以獨(dú)占一行，設(shè)置寬度和高度樣式。

21知識(shí)準(zhǔn)備—CSS3多列1知識(shí)準(zhǔn)備--CSS多列布局是一種使文本內(nèi)容能夠跨多列顯示的技術(shù)，模仿了報(bào)紙和雜志的布局風(fēng)格，提高了內(nèi)容的可讀性和頁面的視覺效果。實(shí)現(xiàn)CSS多列布局的關(guān)鍵屬性

21知識(shí)準(zhǔn)備—CSS3多列1知識(shí)準(zhǔn)備--下面通過案例7-5進(jìn)行演示多列屬性的用法。案例分析：在網(wǎng)頁中使用一個(gè)p元素,將古詩《短歌行》放入其中。使用clumn屬性對(duì)p元素中的列數(shù)、列與列之間的間距，列邊框進(jìn)行設(shè)置。在案例7-5中，p元素內(nèi)的內(nèi)容會(huì)被自動(dòng)分為三列，每列間有40像素的間隔，并且列間有一條1像素寬的虛線分隔線。

實(shí)戰(zhàn)演練—制作“愚公移山”網(wǎng)頁2本次任務(wù)主要是利用布局中CSS多列屬性、元素轉(zhuǎn)換等知識(shí)點(diǎn)實(shí)現(xiàn)愚公移山故事介紹網(wǎng)頁的制作。

實(shí)戰(zhàn)演練—制作“愚公移山”網(wǎng)頁2愚公移山網(wǎng)頁的制作思路為首先用一個(gè)div元素作為容器，在容器里面標(biāo)題使用h1元素，圖片使用img元素插入，故事內(nèi)容每一段使用p元素，并在所有p元素一起放入一個(gè)div容器中。整體制作可以分為以下三步：首先制作“愚公移山網(wǎng)頁”的HTML結(jié)構(gòu)代碼；其次編寫基礎(chǔ)CSS代碼；最后設(shè)置網(wǎng)頁布局。

實(shí)戰(zhàn)演練—制作“愚公移山”網(wǎng)頁21、制作“愚公移山”HTML結(jié)構(gòu)代碼

實(shí)戰(zhàn)演練—制作“愚公移山”網(wǎng)頁22、編寫“愚公移山”基礎(chǔ)CSS代碼選擇body元素對(duì)網(wǎng)頁整體設(shè)置基礎(chǔ)樣式。然后來設(shè)置最外面的div容器，為最外面的容器設(shè)置邊框和背景顏色。通過類名選擇器單獨(dú)選中最外面的div元素，設(shè)置邊框背景顏色同時(shí)設(shè)置內(nèi)邊距和外邊距。最后來這是每一個(gè)單獨(dú)元素的樣式，設(shè)置標(biāo)題的字體顏色，居中對(duì)齊，設(shè)置段落的字體大小及首行縮進(jìn)效果。

實(shí)戰(zhàn)演練—制作“愚公移山”網(wǎng)頁23、設(shè)置“愚公移山”設(shè)置網(wǎng)頁布局將圖片的img元素轉(zhuǎn)換為塊元素，并為它設(shè)置高度、寬度，并使用外邊距屬性將圖片設(shè)置為自適應(yīng)居中。將故事內(nèi)容分為兩欄，首先需要通過類名選擇器單獨(dú)選中只有p元素的那個(gè)div元素，然后使用column屬性設(shè)置兩列，實(shí)線綠色邊框。完成最終效果。

進(jìn)階訓(xùn)練—制作“中國(guó)傳統(tǒng)節(jié)日”閱讀平臺(tái)3本次任務(wù)主要是利用布局中CSS多列屬性、break-inside等知識(shí)點(diǎn)實(shí)現(xiàn)模擬以“中國(guó)傳統(tǒng)節(jié)日”為主題，展示一系列關(guān)于中國(guó)傳統(tǒng)節(jié)日摘要的在線閱讀平臺(tái)，

進(jìn)階訓(xùn)練—制作“中國(guó)傳統(tǒng)節(jié)日”閱讀平臺(tái)3

break-insidebreak-inside是一個(gè)CSS屬性，用于控制頁面分欄、打印或區(qū)域斷行時(shí)元素內(nèi)部的斷行行為。這個(gè)屬性對(duì)于改善打印樣式、多列布局的連續(xù)性和響應(yīng)式設(shè)計(jì)特別有用。break-inside屬性可以有多個(gè)值，以適應(yīng)不同的布局需求。

進(jìn)階訓(xùn)練—制作“中國(guó)傳統(tǒng)節(jié)日”閱讀平臺(tái)3

“中國(guó)傳統(tǒng)節(jié)日”網(wǎng)頁制作思路為，用一個(gè)類名為“header”的div元素作為容器，用來進(jìn)行頂部布局。再用一個(gè)類名為“context”的div元素作為容器，用來進(jìn)行網(wǎng)頁中內(nèi)容部分的布局，然后在這個(gè)div元素中再設(shè)置三個(gè)類名叫做“article-summary”div容器，實(shí)現(xiàn)網(wǎng)頁文章內(nèi)容。整體制作可以分為以下四步：首先制作“中國(guó)傳統(tǒng)節(jié)日”的HTML結(jié)構(gòu)代碼；其次編寫基礎(chǔ)CSS代碼；接著通過盒子模型設(shè)置頂部樣式；最后通過多列布局及break-inside屬性實(shí)現(xiàn)多列展示。

進(jìn)階訓(xùn)練—制作“中國(guó)傳統(tǒng)節(jié)日”閱讀平臺(tái)3

1、制作“中國(guó)傳統(tǒng)節(jié)日”閱讀平臺(tái)HTML結(jié)構(gòu)代碼

進(jìn)階訓(xùn)練—制作“中國(guó)傳統(tǒng)節(jié)日”閱讀平臺(tái)3

2、編寫“中國(guó)傳統(tǒng)節(jié)日”基礎(chǔ)CSS代碼首先清空html每個(gè)元素默認(rèn)的樣式。即將用到的元素使用font-family屬性設(shè)置網(wǎng)頁統(tǒng)一字體，將margin屬性和padding屬性設(shè)置為0；其次設(shè)置h1的字體大小為28像素，并使用margin屬性設(shè)置為0來清空外邊距。接著將h2的字體大小為24像素，字體顏色為黃色，外邊距上方設(shè)置為30像素。最后設(shè)置h3的字體大小為20像素，字體粗細(xì)為bold，并使用margin屬性清空外邊距。

進(jìn)階訓(xùn)練—制作“中國(guó)傳統(tǒng)節(jié)日”閱讀平臺(tái)3

3、設(shè)置“中國(guó)傳統(tǒng)節(jié)日”設(shè)置頂部樣式在html中，將頭部?jī)?nèi)容放入了一個(gè)類名為“header”的div容器中，接著，可以通過類名選擇器選中頭部設(shè)置相應(yīng)樣式。首先，設(shè)置使用background-color屬性設(shè)置背景顏色為金色，使用color屬性設(shè)置字體顏色為白色，使用padding設(shè)置內(nèi)邊距為20像素，使用text-align設(shè)置文本對(duì)齊方式為居中對(duì)齊。

進(jìn)階訓(xùn)練—制作“中國(guó)傳統(tǒng)節(jié)日”閱讀平臺(tái)3

4、實(shí)現(xiàn)“中國(guó)傳統(tǒng)節(jié)日”閱讀平臺(tái)多列展示類名為content的div元素為承載文章摘要的容器，實(shí)現(xiàn)多列展示，首先使用column-count屬性設(shè)置為3來定義容器內(nèi)部的內(nèi)容分為三列，接著設(shè)置

column-gap屬性為30px來指定列與列之間的間距，增加內(nèi)容的可讀性和美觀度。并將margin屬性設(shè)置在頁面上居中顯示，設(shè)置padding屬性為：020px為容器內(nèi)部?jī)蓚?cè)添加20像素的內(nèi)邊距，最后設(shè)置max-width為1200px;

添加

max-height屬性為600px限制容器的最大高度。類名為article-summary的div的容器通過

break-inside:avoid-column;

確保文章摘要不會(huì)被分隔在不同的列里，保證閱讀連貫性。4動(dòng)手實(shí)踐—制作“中國(guó)共產(chǎn)黨的百年大事記”網(wǎng)頁4設(shè)計(jì)并制作如圖所示的“中國(guó)共產(chǎn)黨的百年大事記”網(wǎng)頁。設(shè)置網(wǎng)頁的頭部布局和將事記的具體介紹實(shí)現(xiàn)多列布局排列。小結(jié)知識(shí)準(zhǔn)備——CSS3布局基礎(chǔ)實(shí)戰(zhàn)演練——制作“愚公移山”網(wǎng)頁進(jìn)階訓(xùn)練——制作“中國(guó)傳統(tǒng)文化”網(wǎng)頁動(dòng)手實(shí)踐——制作中國(guó)共產(chǎn)黨的百年大事記模塊七網(wǎng)頁布局任務(wù)2元素的浮動(dòng)網(wǎng)頁制作CSSHTML知識(shí)準(zhǔn)備-----元素的浮動(dòng)實(shí)戰(zhàn)演練——制作“婚禮策劃?rùn)C(jī)構(gòu)首頁”網(wǎng)頁元素的浮動(dòng)0201進(jìn)階訓(xùn)練—制作“中國(guó)女排陣容”網(wǎng)頁03動(dòng)手實(shí)踐—制作“紅色文化傳承”為主題網(wǎng)頁04

1.掌握元素浮動(dòng)的概念

2.熟練地為元素應(yīng)用浮動(dòng)樣式。元素的浮動(dòng)學(xué)習(xí)目標(biāo)：

1..弘揚(yáng)優(yōu)秀傳統(tǒng)文化鼓勵(lì)學(xué)生深入了解和展現(xiàn)中華優(yōu)秀傳統(tǒng)文化的精髓，增強(qiáng)民族自豪感和文化自信。

2.培養(yǎng)對(duì)中國(guó)科技發(fā)展歷程及重大成就的深刻認(rèn)識(shí)，增強(qiáng)學(xué)生的民族自豪感和國(guó)家認(rèn)同感，理解科技進(jìn)步對(duì)國(guó)家實(shí)力和國(guó)際地位的重要意義。

3.培養(yǎng)創(chuàng)新精神，鼓勵(lì)學(xué)生創(chuàng)造性地解決問題，設(shè)計(jì)更加人性化、高效的信息交互界面，體現(xiàn)創(chuàng)新思維。元素的浮動(dòng)思政目標(biāo)：

21知識(shí)準(zhǔn)備—overflow屬性1知識(shí)準(zhǔn)備--overflow屬性是當(dāng)盒子內(nèi)的元素超出盒子自身的大小時(shí)用于溢出內(nèi)容的顯示方式的屬性。這個(gè)屬性可以應(yīng)用于塊級(jí)元素、內(nèi)聯(lián)塊元素或者絕對(duì)定位元素。其格式如下所示。選擇器{overflow:屬性值;}

21知識(shí)準(zhǔn)備—overflow屬性1知識(shí)準(zhǔn)備--下面通過案例7-6案例演示overflow不同屬性值的效果。案例分析：使用一個(gè)p元素將愛蓮說的內(nèi)容放入進(jìn)去，并為p元素設(shè)置一個(gè)寬度為200像素，高度為200像素的盒子，為了方便區(qū)分，設(shè)置一個(gè)背景顏色。接下來使用overflow屬性分別設(shè)置為visible、hidden、scroll、auto。

21知識(shí)準(zhǔn)備—元素的浮動(dòng)1知識(shí)準(zhǔn)備--所謂元素的浮動(dòng)是指設(shè)置了浮動(dòng)屬性的元素會(huì)脫離標(biāo)準(zhǔn)文檔流的控制，移動(dòng)到其父元素中指定位置的過程。選擇器{float:屬性值;}

21知識(shí)準(zhǔn)備—元素的浮動(dòng)1知識(shí)準(zhǔn)備--下面通過案例7-7演示浮動(dòng)的用法。案例分析：設(shè)置四個(gè)div容器，并將div設(shè)置長(zhǎng)為70像素，寬為70像素，將后兩個(gè)div元素設(shè)置相同的類名a,并為div盒子設(shè)置背景顏色及30像素的外邊距，便于觀察效果。然后使用float屬性實(shí)現(xiàn)浮動(dòng)效果。圖中盒子1、盒子2為浮動(dòng)未設(shè)置浮動(dòng)效果，div默認(rèn)標(biāo)準(zhǔn)文檔流會(huì)每個(gè)獨(dú)占一行，盒子3、盒子4為添加浮動(dòng)效果，此時(shí)div跳出默認(rèn)文檔流，并列布局。

21知識(shí)準(zhǔn)備—元素的浮動(dòng)1知識(shí)準(zhǔn)備--但是在使用浮動(dòng)屬性時(shí)，也會(huì)出現(xiàn)一些問題。創(chuàng)建案例7-8來演示浮動(dòng)產(chǎn)生的一種影響。案例分析：在案例7-7的基礎(chǔ)上，對(duì)于原來的兩個(gè)類名為a的div分別設(shè)置類名one和two,然后現(xiàn)在只設(shè)置類名為one的div進(jìn)行靠左浮動(dòng)，為了方便觀察，將其背景顏色改為綠色。

21知識(shí)準(zhǔn)備—元素的浮動(dòng)1知識(shí)準(zhǔn)備--創(chuàng)建案例7-9來演示浮動(dòng)產(chǎn)生的第二種影響。案例分析：使用一個(gè)類名叫做out的div作為父容器，同時(shí)在里面添加一個(gè)類名叫做out的div子容器。對(duì)于父容器只設(shè)置背景顏色，和1像素的邊框用來觀察。在子容器中設(shè)置不同的背景顏色，然后使用浮動(dòng)屬性，靠左浮動(dòng)。

21知識(shí)準(zhǔn)備—元素的浮動(dòng)1知識(shí)準(zhǔn)備--創(chuàng)建案例7-9來演示浮動(dòng)產(chǎn)生的第二種影響。案例分析：使用一個(gè)類名叫做out的div作為父容器，同時(shí)在里面添加一個(gè)類名叫做out的div子容器。對(duì)于父容器只設(shè)置背景顏色，和1像素的邊框用來觀察。在子容器中設(shè)置不同的背景顏色，然后使用浮動(dòng)屬性，靠左浮動(dòng)。

21知識(shí)準(zhǔn)備—清除浮動(dòng)1知識(shí)準(zhǔn)備--由于浮動(dòng)元素不再占用原文檔流中的位置，所以會(huì)對(duì)頁面中其他元素的排版產(chǎn)生影響，如果要避免這種影響，就需要對(duì)元素清除浮動(dòng)。對(duì)于清除浮動(dòng)的方法，常見的有以下三種。

21知識(shí)準(zhǔn)備—清除浮動(dòng)1知識(shí)準(zhǔn)備--1.運(yùn)用clear屬性清除浮動(dòng)Clear屬性的書寫格式如下所示。選擇器{clear:屬性值;}

21知識(shí)準(zhǔn)備—清除浮動(dòng)1知識(shí)準(zhǔn)備--創(chuàng)建案例7-10來演示使用clear屬性來清除浮動(dòng)。案例分析：在案例7-9產(chǎn)生浮動(dòng)影響的基礎(chǔ)上，首先在父容器里繼續(xù)添加一個(gè)類名叫做box01的div空容器，然后通過CSS設(shè)置box01使用clear屬性。

21知識(shí)準(zhǔn)備—清除浮動(dòng)1知識(shí)準(zhǔn)備--2.運(yùn)用overflow屬性清除浮動(dòng)運(yùn)用clear屬性只能清除元素左右兩側(cè)浮動(dòng)的影響。然而在制作網(wǎng)頁時(shí)，經(jīng)常會(huì)遇到一些特殊的浮動(dòng)影響。在網(wǎng)頁設(shè)計(jì)中，overflow屬性通常不是用來直接清除浮動(dòng)（float）的，但可以通過一種間接的方式來解決由浮動(dòng)元素導(dǎo)致的父元素高度塌陷問題。當(dāng)一個(gè)容器內(nèi)的元素設(shè)置了浮動(dòng)（如float:left;或float:right;），且沒有設(shè)置高度或者高度不夠時(shí)，容器可能無法包圍住這些浮動(dòng)元素，導(dǎo)致高度塌陷。此時(shí)，可以通過為該容器添加overflow屬性的一個(gè)值來觸發(fā)BFC（塊格式化上下文），從而使得容器能夠正確包含浮動(dòng)的子元素，間接達(dá)到清除浮動(dòng)的效果。

21知識(shí)準(zhǔn)備—清除浮動(dòng)1知識(shí)準(zhǔn)備--下面通過案例7-11來演示使用overflow清除浮動(dòng)的影響。案例分析：在案例7-9產(chǎn)生浮動(dòng)影響的基礎(chǔ)上，使用overflow屬性，而設(shè)置overflow是在受影響的元素中設(shè)置，及在案例中為類名為out的div父元素。

21知識(shí)準(zhǔn)備—清除浮動(dòng)1知識(shí)準(zhǔn)備--3.偽對(duì)象清除::after偽對(duì)象是CSS中的一個(gè)非常有用的特性，它允許你在元素的內(nèi)容之后插入生成的內(nèi)容，并且可以應(yīng)用樣式。這對(duì)于不需要額外標(biāo)記就能實(shí)現(xiàn)某些布局效果或清除浮動(dòng)等方面特別有用。但是該方法只適用于IE8及以上版本瀏覽器和其他非IE瀏覽器。

21知識(shí)準(zhǔn)備—清除浮動(dòng)1知識(shí)準(zhǔn)備--下面通過案例7-12演示::after偽對(duì)象的清除浮動(dòng)的用法。案例分析：以7-4產(chǎn)生的浮動(dòng)影響為基礎(chǔ)，使用偽對(duì)象對(duì)產(chǎn)生影響的元素，即類名為out的元素。設(shè)置相應(yīng)屬性，

實(shí)戰(zhàn)演練—制作“婚禮策劃?rùn)C(jī)構(gòu)首頁”網(wǎng)頁2本次任務(wù)主要是利用布局中浮動(dòng)屬性、不同方法清除浮動(dòng)等知識(shí)點(diǎn)實(shí)現(xiàn)婚禮策劃?rùn)C(jī)構(gòu)網(wǎng)頁的制作。

實(shí)戰(zhàn)演練—制作“愚公移山”網(wǎng)頁2“婚禮策劃?rùn)C(jī)構(gòu)首頁”的制作思路為，用一個(gè)類名為“header”的div元素作為容器，用來進(jìn)行頂部布局。再用一個(gè)類名為“nav”的div元素作為容器，并在容器中使用ul無序列表元素，用來進(jìn)行網(wǎng)頁中導(dǎo)航的布局。再用一個(gè)類名為“content”的div元素作為容器，用來進(jìn)行網(wǎng)頁中內(nèi)容部分的布局，里面再分別加入一個(gè)類名為“section”的div容器作為文本介紹部分，加入兩個(gè)類名為“highlight”的div元素作為展示機(jī)構(gòu)的亮點(diǎn)部分。最后，再用一個(gè)類名為“footer”的div元素，用來進(jìn)行網(wǎng)頁的底部?jī)?nèi)容布局。整體制作可以分為以下四步：首先制作“婚禮策劃?rùn)C(jī)構(gòu)首頁”的HTML結(jié)構(gòu)代碼；其次編寫基礎(chǔ)CSS代碼；接著通過元素浮動(dòng)分別設(shè)置導(dǎo)航欄中無序列表的并列樣式和亮點(diǎn)部分內(nèi)容并列展示樣式；最后通過清除浮動(dòng)實(shí)現(xiàn)清除受浮動(dòng)產(chǎn)生的影響。。

實(shí)戰(zhàn)演練—制作“婚禮策劃?rùn)C(jī)構(gòu)首頁”網(wǎng)頁21、制作“婚禮策劃?rùn)C(jī)構(gòu)首頁”HTML結(jié)構(gòu)代碼首先，設(shè)置網(wǎng)頁的默認(rèn)字體，接著，清空HTML中各個(gè)元素默認(rèn)的樣式，同時(shí)設(shè)置所有標(biāo)簽中文本的默認(rèn)對(duì)齊方式為居中。為頭部?jī)?nèi)容設(shè)置背景顏色為粉色，內(nèi)邊距為15像素。設(shè)置無序列表的背景顏色為灰色。為a元素設(shè)置為塊元素，字體顏色設(shè)置為白色，設(shè)置內(nèi)邊距，使用偽鏈接的hover設(shè)置背景顏色為深灰色。為類名highlight的div容器，設(shè)置元素的寬度為父容器寬度的45%，為元素設(shè)置外邊距，這里使元素之間有1%的間距。使用box-sizing屬性設(shè)置值為border-box。最后設(shè)置插入的圖片，為底部?jī)?nèi)容設(shè)置背景顏色為粉色，內(nèi)邊距為20像素。實(shí)戰(zhàn)演練—制作“婚禮策劃?rùn)C(jī)構(gòu)首頁”網(wǎng)頁22、編寫“婚禮策劃?rùn)C(jī)構(gòu)首頁”基礎(chǔ)CSS代碼

實(shí)戰(zhàn)演練—制作“婚禮策劃?rùn)C(jī)構(gòu)首頁”網(wǎng)頁23、設(shè)置浮動(dòng)實(shí)現(xiàn)并列樣式為了實(shí)現(xiàn)導(dǎo)航欄內(nèi)容和網(wǎng)頁中的主要介紹部分并列展示，將當(dāng)行每一個(gè)列表項(xiàng)即li元素和類名為highlight的div元素設(shè)置靠左浮動(dòng)。

實(shí)戰(zhàn)演練—制作“婚禮策劃?rùn)C(jī)構(gòu)首頁”網(wǎng)頁24、清除浮動(dòng)為了清除使用浮動(dòng)屬性產(chǎn)生的布局影響，將受到li浮動(dòng)影響的ul父容器使用overflow屬性消除。將受到類名為highlight的div容器浮動(dòng)影響的底部?jī)?nèi)容使用clear進(jìn)行消除。

進(jìn)階訓(xùn)練—制作“中國(guó)女排陣容”網(wǎng)頁3本次任務(wù)主要是利用布局中浮動(dòng)屬性實(shí)現(xiàn)了一個(gè)具有三列布局的網(wǎng)頁，專門用于展示中國(guó)女排陣容信息，同時(shí)包含側(cè)邊欄和底部版權(quán)信息的“中國(guó)女排陣容”網(wǎng)頁的制作。

進(jìn)階訓(xùn)練—制作“中國(guó)女排陣容”網(wǎng)頁3

網(wǎng)頁布局網(wǎng)頁布局的設(shè)計(jì)對(duì)于創(chuàng)建美觀且功能性的網(wǎng)站至關(guān)重要。單列、雙列和三列布局是最常見的幾種網(wǎng)頁布局類型，每種都有其適用場(chǎng)景和設(shè)計(jì)特點(diǎn)。網(wǎng)頁布局的設(shè)計(jì)對(duì)于創(chuàng)建美觀且功能性的網(wǎng)站至關(guān)重要。單列、雙列和三列布局是最常見的幾種網(wǎng)頁布局類型，每種都有其適用場(chǎng)景和設(shè)計(jì)特點(diǎn)。下面詳細(xì)介紹這三種布局及其實(shí)現(xiàn)方法：

進(jìn)階訓(xùn)練—制作“中國(guó)女排陣容”網(wǎng)頁3

1.單列布局(SingleColumnLayout)單列布局是最簡(jiǎn)單的布局形式，整個(gè)頁面的內(nèi)容按照從上到下的順序排列在一個(gè)單一的列中。這種布局適合于博客、新聞網(wǎng)站或任何需要線性閱讀體驗(yàn)的頁面。

進(jìn)階訓(xùn)練—制作“中國(guó)女排陣容”網(wǎng)頁3

2.雙列布局(TwoColumnLayout)雙列布局通常分為主內(nèi)容區(qū)和側(cè)邊欄，適用于需要額外信息展示或?qū)Ш降木W(wǎng)站，如電子商務(wù)網(wǎng)站、論壇等。

進(jìn)階訓(xùn)練—制作“中國(guó)女排陣容”網(wǎng)頁3

3.三列布局(ThreeColumnLayout)三列布局包括兩個(gè)側(cè)邊欄和一個(gè)主內(nèi)容區(qū)，適合于內(nèi)容豐富的網(wǎng)站，如新聞門戶、社區(qū)論壇等。

進(jìn)階訓(xùn)練—制作“中國(guó)女排陣容”網(wǎng)頁3

頁面結(jié)構(gòu)包含了頭部、兩個(gè)側(cè)邊欄、主要內(nèi)容區(qū)域和底部。頭部?jī)H包含標(biāo)題。左側(cè)邊欄包含了一組相關(guān)賽事的鏈接，中間內(nèi)容區(qū)域展示了多個(gè)卡片，每個(gè)卡片代表一個(gè)球員的信息。右側(cè)邊欄包含一組體育新聞的鏈接。最后，底部顯示了版權(quán)信息。具體實(shí)現(xiàn)步驟可以分為以下幾步：首先制作“中國(guó)女排陣容”網(wǎng)頁的HTML結(jié)構(gòu)代碼；其次編寫基礎(chǔ)CSS代碼；接著通過浮動(dòng)屬性實(shí)現(xiàn)網(wǎng)頁三列布局劃分，及網(wǎng)頁整體布局樣式。最后，為主要內(nèi)容區(qū)域設(shè)置相關(guān)的展示卡片樣式。

進(jìn)階訓(xùn)練—制作“中國(guó)女排陣容”網(wǎng)頁3

1、制作“中國(guó)女排陣容”網(wǎng)頁HTML結(jié)構(gòu)代碼

進(jìn)階訓(xùn)練—制作“中國(guó)女排陣容”網(wǎng)頁3

2、設(shè)置CSS基本樣式首先全局樣式設(shè)置:對(duì)a,li,h1,h2,p等標(biāo)簽進(jìn)行了默認(rèn)樣式重置，移除了它們的邊距和填充，以及鏈接的下劃線和列表項(xiàng)的樣式。接著，設(shè)置頭部樣式:為類名為header的div元素設(shè)置頂部標(biāo)題區(qū)域的樣式，包括背景色為綠色、文字顏色為白色、內(nèi)邊距1rem和居中文本。設(shè)置側(cè)邊欄樣式，即為類名叫做left-sidebar和.right-sidebar的div設(shè)置側(cè)邊欄的樣式，包括寬度、背景色和頂部外邊距。側(cè)邊欄中包含無序列表，用于展示鏈接。最后設(shè)置底部樣式，將類名為footer的div元素設(shè)置了底部區(qū)域的樣式，設(shè)置高度為50像素，上內(nèi)邊距為10像素設(shè)置背景顏色為綠色并將文本設(shè)置為居中顯示。

進(jìn)階訓(xùn)練—制作“中國(guó)女排陣容”網(wǎng)頁3

3、通過浮動(dòng)屬性實(shí)現(xiàn)網(wǎng)頁三列布局劃分網(wǎng)頁整體布局樣式在元素中，分別使用類名為.left-sidebar、content、right-sidebar的div容器來設(shè)置三列布局。使用浮動(dòng)將三個(gè)容器并列展示。并且把主要內(nèi)容區(qū)域的寬度設(shè)置為占網(wǎng)頁的70%，其余每個(gè)為15%。同時(shí)，消除由于浮動(dòng)，底部?jī)?nèi)容上移的影響，選擇類名為footer的元素，使用clear屬性清除浮動(dòng)。最后設(shè)置運(yùn)動(dòng)員卡片樣式，將類名為player-card的div容器定義球員信息卡片的樣式，包括浮動(dòng)布局讓多個(gè)卡片并列樣式、設(shè)置背景色為灰色、邊框1像素、灰色實(shí)線、內(nèi)外邊距為15像素、外邊距為27像素，寬度25%、高度自適應(yīng)以及文本居中。在設(shè)置類名為player-card的容器下的img元素進(jìn)一步設(shè)置了圖片的大小和底部邊距。進(jìn)階訓(xùn)練—制作“中國(guó)女排陣容”網(wǎng)頁3

4、為主要內(nèi)容區(qū)域設(shè)置相關(guān)的展示卡片樣式4動(dòng)手實(shí)踐—制作以“紅色文化傳承”為主題的小型網(wǎng)頁4設(shè)計(jì)一個(gè)以“紅色文化傳承”為主題的小型網(wǎng)頁。這個(gè)網(wǎng)頁旨在通過展示中國(guó)革命歷史中的重要事件、英雄人物和紅色遺址，來弘揚(yáng)愛國(guó)主義精神和社會(huì)主義核心價(jià)值觀。小結(jié)知識(shí)準(zhǔn)備——元素的浮動(dòng)實(shí)戰(zhàn)演練——制作“婚禮策劃?rùn)C(jī)構(gòu)首頁”網(wǎng)頁進(jìn)階訓(xùn)練——制作“中國(guó)女排陣容”網(wǎng)頁動(dòng)手實(shí)踐——制作“紅色文化傳承”為主題網(wǎng)頁模塊七網(wǎng)頁布局任務(wù)3元素的定位網(wǎng)頁制作CSSHTML知識(shí)準(zhǔn)備-----元素的定位實(shí)戰(zhàn)演練——制作“旅游景點(diǎn)推薦網(wǎng)”banner元素的定位0201進(jìn)階訓(xùn)練—制作“個(gè)人博客首頁”網(wǎng)頁03動(dòng)手實(shí)踐—制作火災(zāi)防護(hù)宣傳頁面04

1.掌握元素的定位

2.能夠?yàn)樵卦O(shè)置常見的定位模式元素的定位學(xué)習(xí)目標(biāo)：

1.

.弘揚(yáng)優(yōu)秀傳統(tǒng)文化鼓勵(lì)學(xué)生深入了解和展現(xiàn)中華優(yōu)秀傳統(tǒng)文化的精髓，增強(qiáng)民族自豪感和文化自信。

2.培養(yǎng)對(duì)中國(guó)科技發(fā)展歷程及重大成就的深刻認(rèn)識(shí)，增強(qiáng)學(xué)生的民族自豪感和國(guó)家認(rèn)同感，理解科技進(jìn)步對(duì)國(guó)家實(shí)力和國(guó)際地位的重要意義。

3.培養(yǎng)創(chuàng)新精神，鼓勵(lì)學(xué)生創(chuàng)造性地解決問題，設(shè)計(jì)更加人性化、高效的信息交互界面，體現(xiàn)創(chuàng)新思維。元素的定位思政目標(biāo)：

21知識(shí)準(zhǔn)備—元素的定位模式與邊偏移1知識(shí)準(zhǔn)備--1.定位模式（PositioningModes）在CSS中，元素的定位模式?jīng)Q定了元素如何在頁面上放置。這主要通過position屬性來控制，它有幾種不同的值，每種值定義了不同的定位行為。position屬性的書寫格式如下所示。選擇器{position:屬性值;}

21知識(shí)準(zhǔn)備—元素的定位模式與邊偏移1知識(shí)準(zhǔn)備--在CSS中，“邊偏移”通常指的是元素相對(duì)于其定位上下文的位置調(diào)整，主要通過top、right、bottom和left這四個(gè)屬性來實(shí)現(xiàn)。這些屬性用于精確控制元素在頁面上的位置，尤其在使用position屬性設(shè)定為relative、absolute或fixed的元素時(shí)更為常見。

21知識(shí)準(zhǔn)備—靜態(tài)定位1知識(shí)準(zhǔn)備--靜態(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>

21知識(shí)準(zhǔn)備—相對(duì)定位1知識(shí)準(zhǔn)備--相對(duì)定位是將元素相對(duì)于它原本在標(biāo)準(zhǔn)文檔流中的位置進(jìn)行定位。且原本在標(biāo)準(zhǔn)文檔流中位置會(huì)被保留，不影響其他元素的位置變化。

21知識(shí)準(zhǔn)備—相對(duì)定位1知識(shí)準(zhǔn)備--下面通過案例7-16演示使用相對(duì)定位(position:relative;)來調(diào)整頁面上元素的位置。案例分析：首先使用一個(gè)類名為father的div元素，其中包含三個(gè)子<div>元素，類名分別為child01、child02和child03。然后為每一個(gè)div設(shè)置相應(yīng)的寬度、高度、背景顏色和邊框等基本格式。并將父元素設(shè)置為外邊距自動(dòng)居中。接著對(duì)類名為chlid02的div元素使用相對(duì)位移屬性，并設(shè)置邊偏移距離左邊150px,即向右移動(dòng)150像素，距離頂部150像素即向下移動(dòng)150像素。如圖所示為設(shè)置偏移前后的效果。其中左邊為移動(dòng)前，右邊為移動(dòng)后。

21知識(shí)準(zhǔn)備—絕對(duì)定位1知識(shí)準(zhǔn)備--絕對(duì)定位是將元素依據(jù)最近的已經(jīng)定位（絕對(duì)、固定或相對(duì)定位）的父元素進(jìn)行定位，若所有父元素都沒有定位，則依據(jù)body根元素（瀏覽器窗口）進(jìn)行定位。

21知識(shí)準(zhǔn)備—絕對(duì)定位1知識(shí)準(zhǔn)備--下面通過案例7-17演示使用絕對(duì)定位(position:absolute;)來調(diào)整頁面上元素的位置。案例分析：在案例7-16的基礎(chǔ)上，保持原來基本樣式不變，分別對(duì)不設(shè)置父元素定位和設(shè)置父元素定位，子元素絕對(duì)定位的效果進(jìn)行演示。僅將子元素child02設(shè)置絕對(duì)定位，距離頂部100像素，距離左邊150像素。150px100px150px100px原來的位置未保留

21知識(shí)準(zhǔn)備—固定定位1知識(shí)準(zhǔn)備--固定定位是絕對(duì)定位的一種特殊形式，它以瀏覽器窗口作為參照物來定義網(wǎng)頁元素。當(dāng)position屬性的取值為fixed時(shí)，即可將元素的定位模式設(shè)置為固定定位。。

21知識(shí)準(zhǔn)備—固定定位1知識(shí)準(zhǔn)備--下面通過案例7-18演示使用固定定位(position:fixed;)來調(diào)整頁面上元素的位置。案例分析：還是以7-17案例為基礎(chǔ)，保持各個(gè)div的寬度、高度、背景顏色和邊框等基本樣式，僅將父元素的高度設(shè)置為300像素，超出網(wǎng)頁高度，可以滑動(dòng)。然后將child02的定位設(shè)置為固定定位fixed,設(shè)置距離頂部位偏移為100像素，設(shè)置距離左邊位偏移為150像素。150px150px

21知識(shí)準(zhǔn)備—z-index層疊等級(jí)屬性1知識(shí)準(zhǔn)備--當(dāng)對(duì)多個(gè)元素同時(shí)設(shè)置定位時(shí)，定位元素之間有可能會(huì)發(fā)生重疊。下面通過案例7-19演示來演示定位元素發(fā)生重疊效果及解決方法。

21知識(shí)準(zhǔn)備—z-index層疊等級(jí)屬性1知識(shí)準(zhǔn)備--案例分析：使用三個(gè)類名分別叫做child01、child02、child03三個(gè)div元素，同時(shí)設(shè)置寬度、高度、邊框、背景顏色等基礎(chǔ)樣式，然后使用定位屬性，分別類名為chlid01的div設(shè)置定位方式位絕對(duì)定位，位偏移距離頂部100像素，距離左邊150像素。類名為chlid02的div設(shè)置定位方式位絕對(duì)定位，位偏移距離頂部105像素，距離左邊155像素。類名為chlid03的div設(shè)置定位方式位絕對(duì)定位，位偏移距離頂部110像素，距離左邊160像素。作為對(duì)比使用三個(gè)類名分別叫做child04、child05、child06三個(gè)div元素，同時(shí)設(shè)置寬度、高度、邊框、背景顏色等基礎(chǔ)樣式，然后使用定位屬性，分別類名為chlid04、child05、child06的div設(shè)置絕對(duì)定位并通過位偏移實(shí)現(xiàn)相同的重疊效果。將child04設(shè)置z-index:1。

實(shí)戰(zhàn)演練—制作“旅游景點(diǎn)推薦網(wǎng)”banner2本次任務(wù)主要是利用浮動(dòng)屬性、清除浮動(dòng)、定位屬性等知識(shí)點(diǎn)完成“旅游景點(diǎn)推薦網(wǎng)”banner的制作，左側(cè)展示精美的背景圖和吸引人的廣告語，右側(cè)則簡(jiǎn)潔明了地介紹了網(wǎng)站提供的服務(wù)。

實(shí)戰(zhàn)演練—制作“旅游景點(diǎn)推薦網(wǎng)”banner2首先，使用一個(gè)類名為bg-banner的div容器，用來設(shè)置通欄樣式，然后設(shè)置類名為“banner"的div容器中，包含左側(cè)的圖文區(qū)域和右側(cè)的服務(wù)介紹區(qū)域。左邊的部分首先添加一個(gè)類名為left的div父容器為左側(cè)整體布局，為其設(shè)置相應(yīng)的樣式，然后再使用一個(gè)類名為content-left的div子元素用于存放多個(gè)p標(biāo)簽的英文和中文標(biāo)題、廣告語。通過定位屬性來調(diào)整左側(cè)文本內(nèi)容與左側(cè)父容器之間的位置關(guān)系。右邊區(qū)域同樣添加一個(gè)類名為right的div父容器為右側(cè)整體布局，為其設(shè)置相應(yīng)的樣式，然后再使用一個(gè)類名為content-right的div子元素用于存放多個(gè)服務(wù)介紹標(biāo)題和圖標(biāo)列表，以及服務(wù)說明文本。具體實(shí)現(xiàn)步驟可以分為以下幾步：首先制作“旅游景點(diǎn)推薦網(wǎng)頁”banner的HTML結(jié)構(gòu)代碼；其次編寫基礎(chǔ)CSS代碼；接著通過元素浮動(dòng)和清除浮動(dòng)效果實(shí)現(xiàn)元素的并列展示樣式；最后通過定位屬性，設(shè)置相應(yīng)元素的位置。

實(shí)戰(zhàn)演練—制作“旅游景點(diǎn)推薦網(wǎng)”banner21、制作HTML結(jié)構(gòu)代碼

實(shí)戰(zhàn)演練—制作“旅游景點(diǎn)推薦網(wǎng)”banner22、編寫基礎(chǔ)CSS代碼

首先為網(wǎng)頁全局設(shè)置樣式：設(shè)置body的字體、字號(hào)和顏色，重置全部元素默認(rèn)的邊距、填充、列表樣式等。

接著為通欄即類名為定義bg_banner的div元素設(shè)置寬度背景色，類名為banner的div元素定義了寬度為1000px，高度為285px的容器，居中顯示，使用overflow:hidden;防止內(nèi)容溢出邊界。最后設(shè)置左側(cè)圖文區(qū)域的基本樣式，和右側(cè)服務(wù)介紹區(qū)域基本樣式。

實(shí)戰(zhàn)演練—制作“旅游景點(diǎn)推薦網(wǎng)”banner23、使用浮動(dòng)讓元素并列，并清除浮動(dòng)影響

首先將類名為left的div元素使用float靠左浮動(dòng)，將類名為right的div元素使用float靠右浮動(dòng)。實(shí)現(xiàn)并列布局。

然后為列表項(xiàng)li元素設(shè)置靠左浮動(dòng)，實(shí)現(xiàn)列表項(xiàng)內(nèi)圖標(biāo)并列樣式。然后設(shè)置右外邊距為12像素拉開圖標(biāo)與圖標(biāo)之間的距離。

最后使用.cl類添加額外的樣式，如邊距和行高，以確保布局正確。

實(shí)戰(zhàn)演練—制作“旅游景點(diǎn)推薦網(wǎng)”banner24、使用定位屬性調(diào)整元素位置為了使banner更美觀，使用定位屬性來調(diào)整內(nèi)容的位置。在左側(cè)圖文區(qū)域即類名為left的div標(biāo)簽使用position:relative;使其成為相對(duì)定位的參考。而圖文內(nèi)容區(qū)域即類名為content_left的div元素使用position:absolute;進(jìn)行絕對(duì)定位，相對(duì)于類名為left的容器定位，，位偏移距離頂部75像素，距離左側(cè)45像素。在右側(cè)服務(wù)介紹區(qū)域即類名為right的div元素同樣使用position:relative;進(jìn)行相對(duì)定位，.而內(nèi)容區(qū)域即類名為content_right的div元素使用position:absolute;進(jìn)行絕對(duì)定位，相對(duì)于類名為right的容器定位，位偏移距離頂部50像素，距離左側(cè)30像素。

進(jìn)階訓(xùn)練—制作“個(gè)人博客首頁”網(wǎng)頁3使用HTML5新增布局元素及網(wǎng)頁定位知識(shí)實(shí)現(xiàn)了一個(gè)基本的個(gè)人博客首頁布局，包括頭部導(dǎo)航、主內(nèi)容區(qū)域和底部版權(quán)信息。其在瀏覽器中的效果圖如圖所示，并且滾動(dòng)頁面可以發(fā)現(xiàn)頭部導(dǎo)航內(nèi)容一致在頁面固定位置，并且文章標(biāo)題會(huì)在一定范圍內(nèi)也是固定不動(dòng)的。

進(jìn)階訓(xùn)練—制作“個(gè)人博客首頁”網(wǎng)頁3

position:stickyposition:sticky:也是CSS中的一種定位機(jī)制，它結(jié)合了相對(duì)定位(position:relative;)和固定定位(position:fixed;)的特性，允許元素在滾動(dòng)到視口內(nèi)的特定位置時(shí)“粘貼”在視口的邊緣。當(dāng)元素的position屬性設(shè)置為sticky時(shí)，它最初是按照相對(duì)定位(position:relative;)來定位的，即相對(duì)于其正常文檔流中的位置。一旦元素滾動(dòng)到視口內(nèi)，且其上邊緣或下邊緣觸及視口的邊緣，元素就變成固定定位(position:fixed;)，并停留在視口的那個(gè)邊緣位置，直到另一個(gè)元素完全覆蓋它原本在文檔流中的位置。

進(jìn)階訓(xùn)練—制作“個(gè)人博客首頁”網(wǎng)頁3

個(gè)人播客首頁的制作思路為:使用header元素包含博客標(biāo)題和導(dǎo)航菜單。使用Main元素包含兩個(gè)主要部分分別使用一個(gè)section元素，設(shè)置id名為featured-post和recent-posts，分別展示最新文章和最近的文章列表。使用footer元素包含版權(quán)信息。在header元素中，使用h1元素顯示博客標(biāo)題，使用nav和a元素構(gòu)建導(dǎo)航菜單。在id名為featured-post的元素中，使用article元素包裝文章內(nèi)容，包括標(biāo)題、簡(jiǎn)介和閱讀鏈接。在id名為recent-posts的元素中，使用ul元素和li元素創(chuàng)建文章列表，每個(gè)列表項(xiàng)包含一個(gè)文章標(biāo)題鏈接。使CSS為每個(gè)元素設(shè)置相應(yīng)的樣式，并且通過CSS的浮動(dòng)、絕對(duì)定位和百分比寬度，實(shí)現(xiàn)不同屏幕尺寸下的適配布局。具體實(shí)現(xiàn)步驟可以分為以下幾步：首先使用HTML5新增的元素進(jìn)行網(wǎng)頁據(jù)，制作“個(gè)人播客首頁”網(wǎng)頁的HTML結(jié)構(gòu)代碼；其次編寫基礎(chǔ)CSS代碼；接著通過元素浮動(dòng)實(shí)現(xiàn)頭部區(qū)域內(nèi)容；最后通過定位屬性，設(shè)置相應(yīng)元素的距離位置。

進(jìn)階訓(xùn)練—制作“中國(guó)傳統(tǒng)節(jié)日”閱讀平臺(tái)3

1、制作HTML結(jié)構(gòu)代碼

進(jìn)階訓(xùn)練—制作“中國(guó)傳統(tǒng)節(jié)日”閱讀平臺(tái)3

2、編寫基礎(chǔ)CSS代碼設(shè)定全局樣式和元素默認(rèn)樣式。選擇body元素設(shè)置全局字體為Arial、行高設(shè)置為1.6，這有助于提高文本的可讀性，使段落間的間距更加舒適。文本顏色設(shè)置為深灰色（#333）。清空HTML元素的默認(rèn)樣式，設(shè)置margin和padding為0。同時(shí)，這里也去除a元素的下劃線，即將text-decoration設(shè)置為none，以及無序列表的項(xiàng)目符號(hào)，即將list-style屬性設(shè)置為none。

進(jìn)階訓(xùn)練—制作“中國(guó)傳統(tǒng)節(jié)日”閱讀平臺(tái)3

3、通過元素浮動(dòng)實(shí)現(xiàn)頭部區(qū)域內(nèi)容首先設(shè)置Header元素的背景顏色為綠色和內(nèi)邊距為1rem文本對(duì)齊屬性text-align設(shè)置為居中對(duì)齊。接著為了與綠色背景形成鮮明對(duì)比，將標(biāo)題h1元素設(shè)置字體顏色為白色。然后設(shè)置導(dǎo)航欄樣式，設(shè)置nav元素內(nèi)的a鏈接的顏色為白色。同時(shí)，通過margin屬性在每個(gè)鏈接左右兩側(cè)添加了0.5rem的外邊距。最后設(shè)置鏈接懸停效果：當(dāng)鼠標(biāo)懸停在nav元素內(nèi)的a鏈接上時(shí)，鏈接文本下方會(huì)出現(xiàn)下劃線。

進(jìn)階訓(xùn)練—制作“中國(guó)傳統(tǒng)節(jié)日”閱讀平臺(tái)3

4、通過定位屬性，設(shè)置相應(yīng)元素的位置設(shè)置id名為featured-post的section元素、id名為recent-posts的section元素和footer元素三個(gè)部分的樣式。設(shè)置footer元素的樣式，設(shè)置背景色為淺灰色，使用text-align屬性文本居中對(duì)齊，設(shè)置內(nèi)邊距為1rem。設(shè)置position屬性為absolute，使footer變?yōu)榻^對(duì)定位。設(shè)置bottom值為0將footer定位在頁面底部。設(shè)置元素的寬100%，以填充整個(gè)屏幕寬度。4動(dòng)手實(shí)踐—制作火災(zāi)防護(hù)宣傳頁面4設(shè)計(jì)并制作如圖所示火災(zāi)防護(hù)宣傳頁面。通過綜合使用定位知識(shí)點(diǎn)。小結(jié)知識(shí)準(zhǔn)備——元素的定位實(shí)戰(zhàn)演練——制作“旅游景點(diǎn)推薦網(wǎng)”banner進(jìn)階訓(xùn)練——制作“個(gè)人博客首頁”網(wǎng)頁動(dòng)手實(shí)踐——制作火災(zāi)防護(hù)宣傳頁面模塊七網(wǎng)頁布局任務(wù)4CSSflex布局網(wǎng)頁制作CSSHTML知識(shí)準(zhǔn)備——CSSflex布局實(shí)戰(zhàn)演練——制作“我的網(wǎng)上簡(jiǎn)歷”網(wǎng)頁CSSflex布局0201進(jìn)階訓(xùn)練——制作“保健常識(shí)”網(wǎng)頁03動(dòng)手實(shí)踐——制作“購(gòu)物網(wǎng)”網(wǎng)頁04

掌握CSSflex布局相關(guān)規(guī)范CSSflex布局學(xué)習(xí)目標(biāo)：1.弘揚(yáng)優(yōu)秀傳統(tǒng)文化，鼓勵(lì)學(xué)生深入了解和展現(xiàn)中華優(yōu)秀傳統(tǒng)文化的精髓，增強(qiáng)其民族自豪感和文化自信。2.激發(fā)學(xué)生對(duì)環(huán)境問題的關(guān)注，使其認(rèn)識(shí)到每個(gè)人的行為對(duì)環(huán)境都有影響，鼓勵(lì)學(xué)生積極參與環(huán)?；顒?dòng)，成為負(fù)責(zé)任的社會(huì)成員。3.培養(yǎng)學(xué)生對(duì)中國(guó)科技發(fā)展歷程及重大成就的深刻認(rèn)識(shí)，增強(qiáng)學(xué)生的民族自豪感和國(guó)家認(rèn)同感，讓學(xué)生理解科技進(jìn)步對(duì)國(guó)家實(shí)力和國(guó)際地位的重要意義。CSSflex布局思政目標(biāo)：

2flex是flexibleBox的縮寫，意為"彈性布局"，是一種用于按行或按列布局元素的一維布局方法。flex容器中的彈性元素可以進(jìn)行排列、對(duì)齊和分配空白空間。11知識(shí)準(zhǔn)備--什么是flex

211知識(shí)準(zhǔn)備--flex容器Flex容器與彈性盒子Flex容器是包含一個(gè)或多個(gè)彈性盒子的布局方式，通過display:flex;屬性設(shè)置，允許子元素在主軸和側(cè)軸上靈活排列和對(duì)齊。利用flex-grow、flex-shrink和flex-basis屬性，可以精確控制彈性元素如何分配額外空間以及在空間不足時(shí)的收縮行為。flex-direction屬性定義主軸的方向，而align-items和justify-content等屬性則用于調(diào)整元素在主軸和側(cè)軸上的對(duì)齊方式，實(shí)現(xiàn)多樣化的布局效果?？臻g分配機(jī)制方向與對(duì)齊控制

211知識(shí)準(zhǔn)備--flex容器flex容器包含兩個(gè)軸，分別為主軸（mainaxis）和側(cè)軸(crossaxis)

211知識(shí)準(zhǔn)備--flex容器主軸的定義與作用主軸是CSSflex布局中用于排列彈性元素的主要方向，由flex-direction`屬性決定，可以是水平或垂直。它決定了彈性元素在容器內(nèi)的排列方式，對(duì)布局起著關(guān)鍵作用。側(cè)軸的定義與作用側(cè)軸是垂直于主軸的方向，主要用于控制彈性元素在垂直于主軸方向上的對(duì)齊方式。當(dāng)主軸為水平時(shí)，側(cè)軸就是垂直方向；當(dāng)主軸為垂直時(shí)，側(cè)軸就是水平方向。主軸與側(cè)軸的關(guān)系主軸和側(cè)軸共同決定了彈性元素在彈性容器內(nèi)的布局和對(duì)齊方式。它們相互垂直，一個(gè)負(fù)責(zé)元素的排列方向，另一個(gè)負(fù)責(zé)元素的對(duì)齊方式，共同構(gòu)成了完整的布局體系。010203211知識(shí)準(zhǔn)備--flex-directionflex-direction屬性指定了彈性元素是如何在彈性容器中布局的，定義了主軸的方向（正方向或反方向）。flex-direction:row|row-reverse|column|column-reverse;row（默認(rèn)）表示flex

容器的主軸被定義為與文本方向相同，主軸起點(diǎn)和主軸終點(diǎn)與內(nèi)容方向相同。row-reverse表現(xiàn)和row相同，但是置換了主軸起點(diǎn)和主軸終點(diǎn)。column表示flex

容器的主軸被定義為垂直于文本方向，主軸起點(diǎn)與主軸終點(diǎn)和書寫模式的前后點(diǎn)相同column-reverse表現(xiàn)和column相同，但是置換了主軸起點(diǎn)和主軸終點(diǎn)。211知識(shí)準(zhǔn)備--flex-wrapflex-wrap屬性指定彈性元素單行顯示還是多行顯示。如果允許換行，這個(gè)屬性控制行的堆疊方向。flex-wrap:nowrap|wrap|wrap-reverse;nowrap（默認(rèn)值）：彈性元素被擺放到到一行，這可能導(dǎo)致flex容器溢出。wrap：彈性容器為多行，該情況下彈性元素溢出的部分會(huì)被放置到新行。wrap-reverse：和wrap的行為一樣，但是方向會(huì)反轉(zhuǎn)。211知識(shí)準(zhǔn)備--flex-flowflex-flow屬性是flex-direction和flex-wrap的簡(jiǎn)寫。flex-flow:flex-direction

flex-wrap;flex-flow是flex-direction和flex-wrap屬性的復(fù)合屬性，兩種屬性之間用空格隔開，默認(rèn)值為rownowrap。211知識(shí)準(zhǔn)備--justify-contentjustify-content屬性定義瀏覽器如何沿著彈性容器的主軸在彈性容器之間和周圍分配空間。justify-content:flex-start|flex-end|center|space-between|space-around|space-evenly;flex-start（默認(rèn)值）：元素緊密地排列在彈性容器的主軸起始側(cè)。flex-end：彈性元素緊密地排列在彈性容器的主軸結(jié)束側(cè)。center：彈性元素向每行中點(diǎn)排列。每行第一個(gè)元素到行首的距離將與每行最后一個(gè)元素到行尾的距離相同。space-between：在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個(gè)元素與行首對(duì)齊，每行最后一個(gè)元素與行尾對(duì)齊。space-around：在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個(gè)元素到行首的距離和每行最后一個(gè)元素到行尾的距離將會(huì)是相鄰元素之間距離的一半。space-evenly：彈性元素都沿著主軸均勻分布在指定的對(duì)齊容器中。相鄰彈性元素之間的間距，主軸起始位置到第一個(gè)彈性元素的間距，主軸結(jié)束位置到最后一個(gè)彈性元素的間距，都完全一樣。211知識(shí)準(zhǔn)備--justify-content211知識(shí)準(zhǔn)備--align-itemsalign-items屬性控制彈性元素在側(cè)軸上的對(duì)齊方式。align-items:stretch|flex-start|flex-end|center|baseline;stretch（默認(rèn)值）：如果（多個(gè)）元素的組合大小小于容器的大小，其中自動(dòng)調(diào)整大小的元素將等量增大，以填滿容器，同時(shí)這些元素仍然保持其寬高比例的約束。flex-start：將彈性元素與flex容器的主軸起點(diǎn)或側(cè)軸起點(diǎn)對(duì)齊。flex-end：將彈性元素與flex容器的主軸末端或側(cè)軸末端對(duì)齊。baseline：所有彈性元素都對(duì)齊，以使它們的

flex容器基線對(duì)齊。距離其側(cè)軸起點(diǎn)和基線之間最遠(yuǎn)的元素與行的側(cè)軸起點(diǎn)對(duì)齊。center：彈性元素的外邊距框在側(cè)軸上居中對(duì)齊。如果彈性元素的側(cè)軸尺寸大于flex容器，它將在兩個(gè)方向上等距溢出。211知識(shí)準(zhǔn)備--align-contentalign-content屬性定義瀏覽器如何沿著彈性容器的側(cè)軸在彈性容器之間和周圍分配空間。align-content:stretch|flex-start|flex-end|center|space-between|space-around|space-evenly;stretch（默認(rèn)值）：拉伸所有行來填滿剩余空間。剩余空間平均地分配給每一行。flex-start：所有行從側(cè)軸起點(diǎn)開始填充。第一行的側(cè)軸起點(diǎn)邊和容器的側(cè)軸起點(diǎn)邊對(duì)齊。接下來的每一行緊跟前一行。flex-end：所有行從側(cè)軸末尾開始填充。最后一行的側(cè)軸終點(diǎn)和容器的側(cè)軸終點(diǎn)對(duì)齊。同時(shí)所有后續(xù)行與前一個(gè)對(duì)齊。center：所有行朝向容器的中心填充。每行互相緊挨，相對(duì)于容器居中對(duì)齊。容器的側(cè)軸起點(diǎn)邊和第一行的距離相等于容器的側(cè)軸終點(diǎn)邊和最后一行的距離。space-between：所有行在容器中平均分布。相鄰兩行間距相等。容器的側(cè)軸起點(diǎn)邊和終點(diǎn)邊分別與第一行和最后一行的邊對(duì)齊。space-evenly：所有行沿側(cè)軸均勻分布在對(duì)齊容器內(nèi)。每對(duì)相鄰的項(xiàng)之間的間距，第一項(xiàng)和容器邊框，以及最后一項(xiàng)和容器邊框的間距，都是完全相同的。211知識(shí)準(zhǔn)備--align-content211知識(shí)準(zhǔn)備--為什么使用flexflex布局具有以下優(yōu)點(diǎn)：靈活性：flex布局可以很容易地調(diào)整元素在容器內(nèi)的位置，無論它們是水平排列還是垂直排列?？臻g分配：flex布局允許容器內(nèi)的空間根據(jù)元素的大小和數(shù)量動(dòng)態(tài)分配，這使得布局更加靈活。對(duì)齊和分布：flex布局提供了豐富的屬性來控制元素的對(duì)齊方式，包括主軸和側(cè)軸上的對(duì)齊。自適應(yīng)性：flex布局可以很好地適應(yīng)不同屏幕尺寸和設(shè)備，提高網(wǎng)頁的響應(yīng)式設(shè)計(jì)。易用性：flex布局的屬性和概念相對(duì)直觀，使得開發(fā)者更容易上手和使用。社區(qū)支持：flex布局得到了廣泛的社區(qū)支持，有大量的教程、工具和框架可以幫助開發(fā)者快速掌握和應(yīng)用。

實(shí)戰(zhàn)演練—制作“我的網(wǎng)上簡(jiǎn)歷”網(wǎng)頁2本次任務(wù)主要是利用flex布局完成“我的網(wǎng)上簡(jiǎn)歷”的制作，分為幾個(gè)部分：頭部（包含個(gè)人照片和基本信息）、技能欄、工作經(jīng)驗(yàn)、教育背景以及聯(lián)系方式。

實(shí)戰(zhàn)演練—制作“我的網(wǎng)上簡(jiǎn)歷”網(wǎng)頁2“我的網(wǎng)上簡(jiǎn)歷”制作思路為用一個(gè)類名為resume-container的元素作為容器，在里面創(chuàng)建5個(gè)section元素分別展示頭部（含照片和基本信息）、技能、經(jīng)驗(yàn)、教育及聯(lián)系方式五大塊內(nèi)容，類名為header的section用于展示個(gè)人基本信息，在頭部通過img元素引入個(gè)人照片，并利用div元素結(jié)合h1元素、p元素等展示姓名、職位、聯(lián)系方式等基本信息。接著，在技能、工作經(jīng)驗(yàn)、教育背景各自元素內(nèi)部分別使用列表ul、li或段落p清晰列出條目；最后，專設(shè)聯(lián)系方式區(qū)域，確保所有信息邏輯清晰、層次分明。本網(wǎng)頁可以分成三步來完成：首先制作“我的網(wǎng)上簡(jiǎn)歷”的HTML結(jié)構(gòu)代碼；其次編寫基礎(chǔ)CSS代碼；最后通過彈性布局實(shí)現(xiàn)頁面整體布局。

實(shí)戰(zhàn)演練—制作“我的網(wǎng)上簡(jiǎn)歷”網(wǎng)頁21.制作“我的網(wǎng)上簡(jiǎn)歷”的HTML結(jié)構(gòu)代碼。

實(shí)戰(zhàn)演練—制作“我的網(wǎng)上簡(jiǎn)歷”網(wǎng)頁22.完成CSS樣式代碼。首先,重置默認(rèn)樣式，使用通配符選擇器*重置全局的margin和padding，確保各瀏覽器間的一致性。設(shè)置box-sizing:border-box;使得元素的寬度包括padding和border，簡(jiǎn)化布局計(jì)算。頭部樣式，為.header設(shè)置display:flex;來實(shí)現(xiàn)圖片和文字信息的水平排列，利用align-items:center;對(duì)齊兩者垂直中心。調(diào)整.profile-pic的大小和形狀，使用border-radius創(chuàng)建圓形頭像效果。然后，設(shè)定全局的字體和字號(hào)，保證文本的統(tǒng)一風(fēng)格。通過margin-bottom給標(biāo)題和段落之間添加間距，提升內(nèi)容的分隔感和層次感。給所有的.section添加統(tǒng)一的背景色、內(nèi)邊距和圓角，增加視覺舒適度和專業(yè)感。分別針對(duì)不同的section（技能、經(jīng)驗(yàn)、教育、聯(lián)系信息）設(shè)置特定的樣式或調(diào)整，如調(diào)整標(biāo)題h2的樣式來區(qū)分各個(gè)部分。3.最后，通過彈性布局實(shí)現(xiàn)頁面整體布局。進(jìn)行容器布局對(duì).resume-container應(yīng)用display:flex;和flex-direction:column;使其內(nèi)容垂直排列，并通過align-items:center;讓所有內(nèi)容在頁面居中，提高閱讀體驗(yàn)。進(jìn)階訓(xùn)練—order3

order屬性規(guī)定了彈性容器中的可伸縮項(xiàng)目在布局時(shí)的順序。彈性元素按照

order

屬性的值的增序進(jìn)行布局。order:<integer>;<integer>用整數(shù)值來定義排列順序，數(shù)值小的排在前面?？梢詾樨?fù)值。.box1>.item:nth-child(1){order:10;}.box1>.item:nth-child(2){order:1;}.box1>.item:nth-child(3){order:100;}進(jìn)階訓(xùn)練—flex-grow3

flex-grow屬性定義剩余空間的分成。默認(rèn)為0，即如果存在剩余空間，也不放大。flex-grow:<number[0,∞]>;這個(gè)屬性規(guī)定了flex-grow項(xiàng)在flex容器中分配剩余空間的相對(duì)比例。主尺寸是項(xiàng)的寬度或高度，這取決于flex-direction值。剩余空間是flex容器的大小減去所有flex項(xiàng)的大小加起來的大小。如果所有的兄弟項(xiàng)目都有相同的flex-grow系數(shù)，那么所有的項(xiàng)目將剩余空間按相同比例分配，否則將按照flex-grow定義的比例進(jìn)行分配。進(jìn)階訓(xùn)練—flex3

flex屬性是、flex-grow、flex-shrink和flex-basis屬性的簡(jiǎn)寫。設(shè)置了彈性元素如何增大或縮小以適應(yīng)其彈性容器中可用的空間。flex:<'flex-grow'><'flex-shrink'>?||<'flex-basis'>;進(jìn)階訓(xùn)練—align-self3

align-self屬性定義彈性元素單獨(dú)在側(cè)軸（縱軸）方向上的對(duì)齊方式。align-self:auto|stretch|center|flex-start|flex-end|baseline;auto（默認(rèn)值）：彈性元素繼承了它的父容器的align-items屬性。如果沒有父容器則為"stretch"。stretch：彈性元素被拉伸以適應(yīng)容器。如果指定側(cè)軸大小的屬性值為'auto'，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時(shí)會(huì)遵照'min/max-width/height'屬性的限制。center：彈性元素位于容器的中心。彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。flex-start：彈性元素位于容器的開頭。彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。flex-end：彈性元素位于容器的結(jié)尾。彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。baseline：彈性元素位于容器的基線上。如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對(duì)齊。

進(jìn)階訓(xùn)練—制作“保健常識(shí)”網(wǎng)頁3

本次任務(wù)主要是利用flex知識(shí)點(diǎn)完成pc端網(wǎng)頁的制作。標(biāo)題居中展示；導(dǎo)航欄中的三個(gè)導(dǎo)航項(xiàng)在導(dǎo)航欄中均勻分布，分別為營(yíng)養(yǎng)飲食、運(yùn)動(dòng)鍛煉和壓力管理；根據(jù)導(dǎo)航分類，內(nèi)容應(yīng)分為不同的板塊，每個(gè)板塊內(nèi)包含若干篇文章或小貼士，每篇文章或小貼士采用卡片式布局，包含一張相關(guān)圖片、標(biāo)題、簡(jiǎn)短摘要或全文。

進(jìn)階訓(xùn)練—制作“保健常識(shí)”網(wǎng)頁3

“保健常識(shí)”制作思路為主體使用類名為container的div包裹，實(shí)現(xiàn)整體的布局控制，內(nèi)部通過header、main和footer元素劃分頁面頭部、主要內(nèi)容和頁腳區(qū)域。導(dǎo)航條放置于頭部，采用無序列表鏈接方便用戶跳轉(zhuǎn)到營(yíng)養(yǎng)飲食、運(yùn)動(dòng)鍛煉、壓力管理三大板塊。主體內(nèi)容部分，每個(gè)保健主題(section)內(nèi)含文章(article)以靈活的flex布局展示圖文信息，圖片與文字描述相結(jié)合，增強(qiáng)可讀性和吸引力。最后，頁腳包含版權(quán)信息。可以分成三步來完成：首先制作“保健常識(shí)”的HTML結(jié)構(gòu)代碼；然后通過彈性布局實(shí)現(xiàn)頁面整體布局。

進(jìn)階訓(xùn)練—制作“保健常識(shí)”網(wǎng)頁3

1.制作“保健常識(shí)”的HTML結(jié)構(gòu)代碼。

進(jìn)階訓(xùn)練—制作“保健常識(shí)”網(wǎng)頁3

2.在編寫該保健常識(shí)網(wǎng)頁的CSS內(nèi)容時(shí)，首先設(shè)定了全局字體樣式以保證文本的基本可讀性與一致性。接著，通過flex布局對(duì)頁面的容器、頭部、內(nèi)容區(qū)域以及底部進(jìn)行了布局設(shè)定，確保它們能夠自適應(yīng)各種屏幕尺寸。確保內(nèi)容區(qū)域可以靈活地填充剩余空間，同時(shí)內(nèi)部元素采用flex布局以實(shí)現(xiàn)響應(yīng)式排列，設(shè)置了間距和內(nèi)邊距以增加可讀性和美觀性。每個(gè)包含圖片和文本的文章塊都采用flex布局，垂直居中對(duì)齊內(nèi)容，定義了寬度、背景色、陰影、圓角以及底部外邊距和溢出處理，保持整潔的布局。導(dǎo)航欄使用flex實(shí)現(xiàn)水平居中對(duì)齊，定義了鏈接的顏色和無下劃線，以及鏈接間的間距。每個(gè)保健主題分類區(qū)域具有一定的底部外邊距、使用flex垂直居中內(nèi)容，確保標(biāo)題和文章在視覺上的對(duì)齊。4動(dòng)手實(shí)踐—制作“購(gòu)物網(wǎng)”網(wǎng)頁4設(shè)計(jì)并制作如圖所示的“購(gòu)物網(wǎng)”網(wǎng)頁。該網(wǎng)頁包含頭部導(dǎo)航、banner和商品列表。使用flex完成對(duì)頭部導(dǎo)航區(qū)域和商品列表區(qū)域的布局。小結(jié)知識(shí)準(zhǔn)備——CSSflex布局實(shí)戰(zhàn)演練——制作“我的網(wǎng)上簡(jiǎn)歷”網(wǎng)頁進(jìn)階訓(xùn)練——制作“保健常識(shí)”網(wǎng)頁動(dòng)手實(shí)踐——制作“購(gòu)物網(wǎng)”網(wǎng)頁模塊七網(wǎng)頁布局任務(wù)5CSSgrid布局網(wǎng)頁制作CSSHTML知識(shí)準(zhǔn)備——CSSgrid布局實(shí)戰(zhàn)演練——制作“中國(guó)科技成就”網(wǎng)頁CSSgrid布局0201進(jìn)階訓(xùn)練——制作“環(huán)保公益”網(wǎng)頁03動(dòng)手實(shí)踐——制作“旅游網(wǎng)站”網(wǎng)頁04

了解CSSgrid布局基本屬性用法CSSgrid布局學(xué)習(xí)目標(biāo)：1.弘揚(yáng)優(yōu)秀傳統(tǒng)文化，鼓勵(lì)學(xué)生深入了解和展現(xiàn)中華優(yōu)秀傳統(tǒng)文化的精髓，增強(qiáng)其民族自豪感和文化自信。2.激發(fā)學(xué)生對(duì)環(huán)境問題的關(guān)注，使其認(rèn)識(shí)到每個(gè)人的行為對(duì)環(huán)境都有影響，鼓勵(lì)學(xué)生積極參與環(huán)?；顒?dòng)，成為負(fù)責(zé)任的社會(huì)成員。3.培養(yǎng)學(xué)生對(duì)中國(guó)科技發(fā)展歷程及重大成就的深刻認(rèn)識(shí)，增強(qiáng)學(xué)生的民族自豪感和國(guó)家認(rèn)同感，讓學(xué)生理解科技進(jìn)步對(duì)國(guó)家實(shí)力和國(guó)際地位的重要意義。CSSgrid布局思政目標(biāo)：

2Grid布局是一種現(xiàn)代CSS布局技術(shù)，它提供了一種強(qiáng)大且靈活的方法來設(shè)計(jì)二維網(wǎng)頁布局。通過將頁面劃分為行和列的網(wǎng)格結(jié)構(gòu)，開發(fā)者可以精確定位和對(duì)齊元素，無論這些元素的內(nèi)容如何變化。這種布局模型允許創(chuàng)建響應(yīng)式和動(dòng)態(tài)的布局，而無需依賴于固定位置或流體寬度的傳統(tǒng)方法。Grid布局使得創(chuàng)建復(fù)雜和美觀的界面變得簡(jiǎn)單，尤其是在處理多列布局、不對(duì)稱網(wǎng)格以及需要精確控制元素定位的場(chǎng)景下。11知識(shí)準(zhǔn)備--介紹Grid布局

211知識(shí)準(zhǔn)備--Grid布局相關(guān)概念Grid網(wǎng)格容器：將一個(gè)元素的display屬性設(shè)置為grid或inline-grid，則該元素就成為網(wǎng)格容器。網(wǎng)格容器定義了其子元素的網(wǎng)格布局，以及行和列的結(jié)構(gòu)。GridCells（網(wǎng)格單元格）：由行和列的網(wǎng)格線界定的矩形區(qū)域。每個(gè)網(wǎng)格項(xiàng)占據(jù)一個(gè)或多個(gè)網(wǎng)格單元格。GridItems（網(wǎng)格項(xiàng)）：網(wǎng)格容器的所有直接子元素。網(wǎng)格項(xiàng)可以占據(jù)一個(gè)或多個(gè)單元格。Gaps（間隙）：網(wǎng)格項(xiàng)之間的空白空間。GridLines（網(wǎng)格線）：網(wǎng)格線是定義網(wǎng)格結(jié)構(gòu)的虛擬線，它們沿著行和列劃分網(wǎng)格。網(wǎng)格線編號(hào)從1開始，每一行或列前后都有兩條網(wǎng)格線。211知識(shí)準(zhǔn)備--grid布局常用屬性屬性描述display顯示模式grid-template-columns/grid-template-rows定義網(wǎng)格中列和行的大小。可以使用各種單位，包括

px,%,fr等grid-gap/row-gap/column-gap設(shè)置網(wǎng)格項(xiàng)之間的垂直和水平間距grid-auto-flow控制網(wǎng)格項(xiàng)如何填充網(wǎng)格。例如，row,column,dense等justify-content/align-content設(shè)置如何沿著行項(xiàng)軸/列項(xiàng)軸在網(wǎng)格項(xiàng)之間和周圍分配空間grid-column/grid-row定義了網(wǎng)格元素列和行的開始和結(jié)束位置justify-item/align-item控制網(wǎng)格項(xiàng)在網(wǎng)格單元格內(nèi)的對(duì)齊方211知識(shí)準(zhǔn)備--display要使HTML元素變成一個(gè)網(wǎng)格容器，可以將display屬性設(shè)置為grid或inline-grid。display:grid|inline-grid;display：grid預(yù)覽效果display：inline-grid預(yù)覽效果211知識(shí)準(zhǔn)備--grid-template-columns/grid-template-rowsgrid-template-columns和grid-template-rows屬性定義了網(wǎng)格布局中的列和行的數(shù)量，它也可以設(shè)置每個(gè)列和行的寬度。屬性值是一個(gè)以空格分隔的列表，其中每個(gè)值定義相對(duì)應(yīng)列的寬度。grid-template-columns/grid-template-rows:<width><width>...;其中，<width>可以是長(zhǎng)度單位、關(guān)鍵字、repeat函數(shù)和fr。注意，這些值可以聯(lián)合使用。auto意味著寬度應(yīng)該根據(jù)其內(nèi)容的寬度來確定，或者如果內(nèi)容小于可用空間，則占據(jù)可用空間的一部分