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

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

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

2.了解CSS3多列布局CSS3布局基礎學習目標：

1.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

進階訓練—制作“中國傳統(tǒng)節(jié)日”閱讀平臺3

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

進階訓練—制作“中國傳統(tǒng)節(jié)日”閱讀平臺3

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

進階訓練—制作“中國傳統(tǒng)節(jié)日”閱讀平臺3

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

進階訓練—制作“中國傳統(tǒng)節(jié)日”閱讀平臺3

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

進階訓練—制作“中國傳統(tǒng)節(jié)日”閱讀平臺3

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

進階訓練—制作“中國傳統(tǒng)節(jié)日”閱讀平臺3

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

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

添加

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

break-inside:avoid-column;

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

1.掌握元素浮動的概念

2.熟練地為元素應用浮動樣式。元素的浮動學習目標：

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

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

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

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

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

21知識準備—元素的浮動1知識準備--所謂元素的浮動是指設置了浮動屬性的元素會脫離標準文檔流的控制，移動到其父元素中指定位置的過程。選擇器{float:屬性值;}

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

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

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

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

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

21知識準備—清除浮動1知識準備--1.運用clear屬性清除浮動Clear屬性的書寫格式如下所示。選擇器{clear:屬性值;}

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

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

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

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

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

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

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

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

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

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

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

進階訓練—制作“中國女排陣容”網(wǎng)頁3

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

進階訓練—制作“中國女排陣容”網(wǎng)頁3

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

進階訓練—制作“中國女排陣容”網(wǎng)頁3

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

進階訓練—制作“中國女排陣容”網(wǎng)頁3

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

進階訓練—制作“中國女排陣容”網(wǎng)頁3

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

進階訓練—制作“中國女排陣容”網(wǎng)頁3

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

進階訓練—制作“中國女排陣容”網(wǎng)頁3

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

進階訓練—制作“中國女排陣容”網(wǎng)頁3

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

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

1.掌握元素的定位

2.能夠為元素設置常見的定位模式元素的定位學習目標：

1.

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

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

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

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

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

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

21知識準備—相對定位1知識準備--相對定位是將元素相對于它原本在標準文檔流中的位置進行定位。且原本在標準文檔流中位置會被保留，不影響其他元素的位置變化。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

進階訓練—制作“個人博客首頁”網(wǎng)頁3

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

進階訓練—制作“個人博客首頁”網(wǎng)頁3

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

進階訓練—制作“中國傳統(tǒng)節(jié)日”閱讀平臺3

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

進階訓練—制作“中國傳統(tǒng)節(jié)日”閱讀平臺3

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

進階訓練—制作“中國傳統(tǒng)節(jié)日”閱讀平臺3

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

進階訓練—制作“中國傳統(tǒng)節(jié)日”閱讀平臺3

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

掌握CSSflex布局相關(guān)規(guī)范CSSflex布局學習目標：1.弘揚優(yōu)秀傳統(tǒng)文化，鼓勵學生深入了解和展現(xiàn)中華優(yōu)秀傳統(tǒng)文化的精髓，增強其民族自豪感和文化自信。2.激發(fā)學生對環(huán)境問題的關(guān)注，使其認識到每個人的行為對環(huán)境都有影響，鼓勵學生積極參與環(huán)?；顒樱蔀樨撠熑蔚纳鐣蓡T。3.培養(yǎng)學生對中國科技發(fā)展歷程及重大成就的深刻認識，增強學生的民族自豪感和國家認同感，讓學生理解科技進步對國家實力和國際地位的重要意義。CSSflex布局思政目標：

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

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

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

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

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

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

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

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

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

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

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

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

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

order

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

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

flex屬性是、flex-grow、flex-shrink和flex-basis屬性的簡寫。設置了彈性元素如何增大或縮小以適應其彈性容器中可用的空間。flex:<'flex-grow'><'flex-shrink'>?||<'flex-basis'>;進階訓練—align-self3

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

進階訓練—制作“保健常識”網(wǎng)頁3

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

進階訓練—制作“保健常識”網(wǎng)頁3

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

進階訓練—制作“保健常識”網(wǎng)頁3

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

進階訓練—制作“保健常識”網(wǎng)頁3

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

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

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

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

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