《HTML5+CSS3網(wǎng)頁制作》課件-模塊五 盒子模型

模塊五盒子模型任務(wù)1盒子模型及應(yīng)用網(wǎng)頁制作CSSHTML知識準備——盒子模型實戰(zhàn)演練——制作“時代楷?！本W(wǎng)頁盒子模型及應(yīng)用0201進階訓(xùn)練——制作“用戶中心”網(wǎng)頁03動手實踐——制作“鶴壁職業(yè)技術(shù)學(xué)院校徽”網(wǎng)頁04

1.理解盒子模型的基本概念

2.掌握盒子模型的屬性設(shè)置

3.應(yīng)用盒子模型進行網(wǎng)頁布局盒子模型及應(yīng)用學(xué)習(xí)目標：

1.鼓勵學(xué)生運用盒子模型等設(shè)計原理，進行獨特的包裝設(shè)計，培養(yǎng)學(xué)生的創(chuàng)新意識和創(chuàng)新能力，以適應(yīng)現(xiàn)代經(jīng)濟社會的發(fā)展需求。

2.要求學(xué)生注重細節(jié)，追求完美的設(shè)計效果，從而培養(yǎng)學(xué)生的工匠精神，即對工作的精益求精和追求卓越的態(tài)度。

3.在包裝設(shè)計中融入中國傳統(tǒng)文化元素，通過設(shè)計具有中國特色的包裝作品，增強學(xué)生的文化自信和民族自豪感。4.強調(diào)職業(yè)道德和社會責任的重要性，引導(dǎo)學(xué)生樹立正確的價值觀，關(guān)注社會熱點和環(huán)保問題，為社會的可持續(xù)發(fā)展做出貢獻。盒子模型及應(yīng)用思政目標：

1知識準備--課程引入盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型

21知識準備--課程引入1盒子模型在網(wǎng)頁設(shè)計中的重要性盒子模型是CSS布局的核心，決定了元素如何占據(jù)空間，是網(wǎng)頁設(shè)計的基礎(chǔ)。

內(nèi)容用content來表示，內(nèi)容占有一定的頁面空間，通常用它的寬度width，高度height來表示內(nèi)容的外面是內(nèi)邊距padding內(nèi)邊距的外面是邊框border邊框的外面是外邊距margin1知識準備--組成部分

3盒子的實際寬度=width+padding（左右）+border（左右）+margin（左右）盒子的實際高度=height+padding（上下）+border（上下）+margin（上下）1知識準備--尺寸計算

41知識準備--邊框設(shè)置1.

邊框樣式border-styleborder-style：上邊框樣式[右邊框樣式

下邊框樣式

左邊框樣式]；基本格式border-style：上邊框樣式[右邊框樣式

下邊框樣式

左邊框樣式]；在設(shè)置邊框樣式時，可以對盒子的單邊進行設(shè)置，具體格式如下：border-top-style：上邊框樣式；border-right-style：右邊框樣式；border-bottom-style：下邊框樣式；border-left-style：左邊框樣式；41知識準備--邊框設(shè)置1.

邊框樣式border-style綜合設(shè)置4條邊的樣式當設(shè)置4個屬性值時，邊框樣式的寫法會按照上右下左的順時針順序排列。當省略某個屬性值時，邊框樣式會采用值復(fù)制的原則，將省略的屬性值默認為某一邊的樣式；當設(shè)置3個屬性值時，為上，左右，下；當設(shè)置2個屬性值時，為上下和左右;設(shè)置1個屬性值時，為4邊的公用樣式；41知識準備--邊框設(shè)置1.

邊框樣式border-style

41知識準備--邊框設(shè)置2.

邊框高度border-widthborder-style：上邊框樣式[右邊框樣式

下邊框樣式

左邊框樣式]；基本格式border-width：上邊框?qū)挾萚右邊框?qū)挾?/p>

下邊框?qū)挾?/p>

左邊框?qū)挾萞；同邊框樣式一樣，邊框?qū)挾瓤梢葬槍?條邊分別進行設(shè)置，具體格式如下：border-top-width：上邊框?qū)挾龋籦order-right-width：右邊框?qū)挾?；border-bottom-width：下邊框?qū)挾龋籦order-left-width：左邊框?qū)挾龋?1知識準備--邊框設(shè)置2.

邊框高度border-width綜合設(shè)置4條邊的寬度邊框?qū)挾鹊膶懛〞凑丈嫌蚁伦蟮捻槙r針順序排列。當省略某個屬性值時，邊框?qū)挾葧捎弥祻?fù)制的原則，將省略的屬性值默認為某一邊的寬度；當設(shè)置3個屬性值時，為上，左右，下；當設(shè)置2個屬性值時，為上下和左右；當設(shè)置1個屬性值時，為4邊的公用寬度；41知識準備--邊框設(shè)置2.

邊框高度border-width

41知識準備--邊框設(shè)置3

邊框顏色border-colorborder-style：上邊框樣式[右邊框樣式

下邊框樣式

左邊框樣式]；基本格式border-color：上邊框顏色[右邊框顏色

下邊框顏色

左邊框顏色]；在設(shè)置邊框顏色時，可以對盒子的單邊進行設(shè)置，具體格式如下：border-top-color：上邊框顏色；border-right-color：右邊框顏色；border-bottom-color：下邊框顏色；border-left-color：左邊框顏色；41知識準備--邊框設(shè)置3

邊框顏色border-color當設(shè)置4個屬性值時，邊框顏色的寫法會按照上右下左的順時針順序排列。當省略某個屬性值時，邊框顏色會采用值復(fù)制的原則，將省略的屬性值默認為某一邊的寬度；當設(shè)置3個屬性值時，為上，左右，下；設(shè)置2個屬性值時，為上下和左右；設(shè)置1個屬性值時，為4邊的公用顏色；41知識準備--邊框設(shè)置3

邊框顏色border-color

41知識準備--邊框設(shè)置4

邊框的綜合設(shè)置

border-style：上邊框樣式[右邊框樣式

下邊框樣式

左邊框樣式]；基本格式border：邊框?qū)挾?/p>

樣式

顏色；注意：寬度、樣式、顏色順序任意，不分先后。CSS提供了更簡單的邊框設(shè)置方式如下：border-top:上邊框?qū)挾?/p>

樣式

顏色；border-right:右邊框?qū)挾?/p>

樣式

顏色；border-bottom:下邊框?qū)挾?/p>

樣式

顏色；border-left:左邊框?qū)挾?/p>

樣式

顏色；41知識準備--邊框設(shè)置4

邊框的綜合設(shè)置

41知識準備--內(nèi)邊距的設(shè)置border-style：上邊框樣式[右邊框樣式

下邊框樣式

左邊框樣式]；基本格式padding：上內(nèi)邊距[右內(nèi)邊距

下內(nèi)邊距

左內(nèi)邊距]；內(nèi)邊距

padding

在設(shè)置內(nèi)邊距時，可以對盒子的單邊進行設(shè)置，具體格式如下：padding-top:上內(nèi)邊距；padding-right:右內(nèi)邊距；padding-bottom:下內(nèi)邊距；padding-left:左內(nèi)邊距；41知識準備--內(nèi)邊距的設(shè)置內(nèi)邊距

padding

綜合設(shè)置當設(shè)置4個屬性值時，內(nèi)邊距的寫法會按照上右下左的順時針順序排列;當省略某個屬性值時，內(nèi)邊距會采用值復(fù)制的原則，將省略的屬性值默認為某一邊的樣式。當設(shè)置3個屬性值時，為上，左右，下；設(shè)置2個屬性值時，為上下和左右;設(shè)置1個屬性值時，為4邊的公用內(nèi)邊距。41知識準備--內(nèi)邊距的設(shè)置內(nèi)邊距

padding

41知識準備--外邊距的設(shè)置border-style：上邊框樣式[右邊框樣式

下邊框樣式

左邊框樣式]；基本格式margin：上外邊距[右外邊距

下外邊距

左外邊距]；外邊距

margin

在設(shè)置外邊距時，可以對盒子的單邊進行設(shè)置，具體格式如下：margin-top:上外邊距；margin-right:右外邊距；margin-bottom:下外邊距；margin-left:左外邊距；41知識準備--外邊距的設(shè)置外邊距

margin

綜合設(shè)置當設(shè)置4個屬性值時，外邊距的寫法會按照上右下左的順時針順序排列;當省略某個屬性值時，外邊距會采用值復(fù)制的原則，將省略的屬性值默認為某一邊的樣式。當設(shè)置3個屬性值時,為上，左右，下；設(shè)置2個屬性值時，為上下和左右;設(shè)置1個屬性值時，為4邊的公用外邊距。41知識準備--外邊距的設(shè)置外邊距

margin

實戰(zhàn)演練—制作“時代楷模”網(wǎng)頁2本次任務(wù)主要是利用盒子模型的邊框、內(nèi)邊距、外邊距等知識點完成“時代楷?！本W(wǎng)頁的制作。頁面頂部包含頁面標題主人公姓名，中部是圖片區(qū)存放照片并進行編輯處理，底部事跡采用純文本。預(yù)覽效果如下圖所示。

實戰(zhàn)演練—制作“時代楷?！本W(wǎng)頁2“時代楷?！本W(wǎng)頁制作思路為用一個h2元素作為網(wǎng)頁的標題；一個p元素作為姓名；一個div容器嵌套一個img元素存放圖片；一個div容器包含了“時代楷模”的英雄事跡。在此基礎(chǔ)上，可以分成兩步來完成：首先制作“時代楷?！钡腍TML結(jié)構(gòu)代碼；其次編寫基礎(chǔ)CSS代碼。

實戰(zhàn)演練—制作“時代楷模”網(wǎng)頁21.制作“時代楷?！钡腍TML結(jié)構(gòu)代碼

實戰(zhàn)演練—制作“時代楷?！本W(wǎng)頁2CSS被直接寫在style標簽內(nèi)。樣式用于控制網(wǎng)頁的布局、顏色、字體等外觀。存放標題和姓名的p元素和h2元素設(shè)置文本居中對齊。標題h2元素添加邊框、高度、寬度、行高、外邊距（居中）、背景色等樣式。放置圖片的容器top：定義頂部div的樣式，包括邊框、寬度、高度、外邊距等，用于包含圖片。img設(shè)置圖片的寬度、高度和內(nèi)邊距，以確保圖片適應(yīng)其容器。#bottom：定義底部div的樣式，包括寬度、外邊距、背景色和邊框。2.編寫基礎(chǔ)CSS代碼

進階訓(xùn)練—制作“用戶中心”網(wǎng)頁3本次任務(wù)主要是利用HTML5新增的結(jié)構(gòu)化元素、盒子模型、圓角邊框等知識點完成“用戶中心”網(wǎng)頁的制作，頁面頂部包含頁面LOGO和標題，中部包含用戶的基本信息，下部包含聯(lián)系方式和“返回主頁”的鏈接。預(yù)覽效果如圖所示。

進階訓(xùn)練—制作“用戶中心”網(wǎng)頁3CSS3增加了border-radius屬性，可為元素添加圓潤外觀，增強視覺吸引力。右圖是將圖片的四個角設(shè)置了不同的水平半徑和垂直半徑。

圓角邊框

border-radius

進階訓(xùn)練—制作“用戶中心”網(wǎng)頁3border-radius屬性提供了兩個參數(shù)，每個參數(shù)均有4個參數(shù)值，若省略第二個參數(shù)，默認等于第一個參數(shù)。當設(shè)置4個屬性值時，圓角半徑的寫法會按照上右下左的順時針順序排列。當省略某個屬性值時，圓角半徑會采用值復(fù)制的原則，將省略的屬性值默認為某一邊的圓角半徑。

圓角邊框

border-radius

進階訓(xùn)練—制作“用戶中心”網(wǎng)頁3box-shadow屬性用于添加元素陰影，營造立體感，提升設(shè)計層次。該屬性可以設(shè)置一個或多個陰影效果，每個陰影效果由水平偏移量、垂直偏移量、模糊半徑、擴展半徑和顏色組成。陰影效果可以通過逗號分隔，依次應(yīng)用在元素上。?

陰影效果box-shadow

進階訓(xùn)練—制作“用戶中心”網(wǎng)頁3?box-sizing屬性用于定義CSS盒模型的計算方式，影響元素的寬度和高度計算。??該屬性決定元素尺寸計算方式，確保布局精確無誤。?box-sizing屬性的默認值為content-box，元素的寬度和高度僅包括內(nèi)容區(qū)域，不包括邊框和內(nèi)邊距（padding）。box-sizing屬性的值是border-box時，元素的寬度和高度包括內(nèi)容、邊框和內(nèi)邊距，這使得布局更加直觀和易于控制。

盒模型大小控制

box-sizing

進階訓(xùn)練—制作“用戶中心”網(wǎng)頁31.制作“用戶中心”的HTML結(jié)構(gòu)代碼

進階訓(xùn)練—制作“用戶中心”網(wǎng)頁3?首先設(shè)置body的字體、邊距、背景色，去除<body>標簽的默認外邊距，以確保頁面內(nèi)容從瀏覽器窗口的左上角開始顯示。設(shè)置一個寬300px、高400px的容器（#container），該容器在頁面中水平居中（通過margin:0auto;實現(xiàn)），具有灰色邊框和20px的內(nèi)邊距。設(shè)置.top的高度和文本對齊方式，.topimg的尺寸，.topspan的顯示方式、顏色和垂直對齊。定義中間div樣式，設(shè)置.middle的寬度、內(nèi)邊距、邊框、顏色等。定義返回主頁按鈕樣式，設(shè)置.aa的寬度、內(nèi)邊距、文字顏色、邊框、圓角、陰影等，定義鏈接樣式，設(shè)置a元素移除下劃線。2.編寫基礎(chǔ)CSS代碼

4動手實踐—制作“鶴壁職業(yè)技術(shù)學(xué)院校徽”網(wǎng)頁4

設(shè)計并制作“鶴壁職業(yè)技術(shù)學(xué)院?；铡本W(wǎng)頁，效果如圖左所示。當鼠標指針移動到?；丈蠒r，出現(xiàn)如圖右所示的邊框效果（邊框顏色加深，圓角邊框）。小結(jié)知識準備——盒子模型實戰(zhàn)演練——制作“時代楷模”網(wǎng)頁進階訓(xùn)練——制作“用戶中心”網(wǎng)頁動手實踐——制作“鶴壁職業(yè)技術(shù)學(xué)院?；铡本W(wǎng)頁模塊五盒子模型任務(wù)2背景與漸變屬性網(wǎng)頁制作CSSHTML知識準備——背景屬性實戰(zhàn)演練——制作“紅海行動影評”網(wǎng)頁背景與漸變屬性0201進階訓(xùn)練——制作“女媧補天神話傳說”網(wǎng)頁03動手實踐——制作“播放器圖標”網(wǎng)頁04

1.掌握CSS3中背景屬性的基本用法

2.理解CSS3漸變屬性的實現(xiàn)原理

3.能夠在實際項目中設(shè)計出更加美觀、富有創(chuàng)意的網(wǎng)頁效果背景與漸變屬性學(xué)習(xí)目標：

1.通過設(shè)計富有創(chuàng)意和正能量的網(wǎng)頁作品，傳播正能量，弘揚社會正氣。

2.引導(dǎo)學(xué)生了解并欣賞中華優(yōu)秀傳統(tǒng)文化，如傳統(tǒng)圖案、色彩搭配等，增強文化自信。

3.引導(dǎo)學(xué)生積極參與網(wǎng)頁設(shè)計競賽和實踐活動，提升實踐能力和團隊協(xié)作能力。4.通過網(wǎng)頁設(shè)計作品傳遞正能量，為構(gòu)建和諧社會貢獻力量。背景與漸變屬性思政目標：

1知識準備--背景屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型background屬性CSS中的background屬性是一個復(fù)合屬性，可以在一個聲明中設(shè)置多個與背景相關(guān)的樣式屬性。

41知識準備--背景屬性border-style：上邊框樣式[右邊框樣式

下邊框樣式

左邊框樣式]；基本格式background-color:color-value;1.background-colorcolor-value的取值已使用顏色的英文單詞、十六進制顏色值或RGB代碼等。

1知識準備--背景屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型1.background-colorbackground-color屬性的默認屬性值為transparent，即背景透明，這時設(shè)置背景透明的子元素會透出其父元素的背景顏色。

41知識準備--背景屬性border-style：上邊框樣式[右邊框樣式

下邊框樣式

左邊框樣式]；基本格式background-image:url('path/to/image.jpg');2.background-imageurl('path/to/image.jpg')是圖片文件的路徑。路徑可以是相對路徑（相對于當前網(wǎng)頁的位置）或絕對路徑（完整的網(wǎng)絡(luò)地址）。

1知識準備--背景屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型3.background-repeat在CSS3中，background-repeat屬性用于控制背景圖像如何在元素的背景區(qū)域中重復(fù)。background-repeat屬性決定背景圖如何鋪滿元素，關(guān)鍵在于控制重復(fù)方式，包括水平、垂直或不重復(fù)。

1知識準備--背景屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型3.background-repeatbackground-repeat屬性的一些常用值及其含義如下：repeat（默認值）：背景圖像在水平和垂直方向上重復(fù)。repeat-x：背景圖像僅在水平方向上重復(fù)。repeat-y：背景圖像僅在垂直方向上重復(fù)。no-repeat：背景圖像不重復(fù)，只顯示一次。round：背景圖像會在兩個方向上重復(fù)，直到正好填滿背景區(qū)域，這可能需要圖像被縮放。space（CSS3新增）：背景圖像在兩個方向上重復(fù)，如果無法完整平鋪，則在圖像之間插入等間距，以適應(yīng)背景區(qū)域。

41知識準備--背景屬性border-style：上邊框樣式[右邊框樣式

下邊框樣式

左邊框樣式]；基本格式background-position:x-positiony-position;4.background-positionx-position控制水平位置，而y-position控制垂直位置。這些值可以是關(guān)鍵詞（如center、top、bottom、left、right）、長度單位（如像素px、百分比%）或者組合使用。

1知識準備--背景屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型關(guān)鍵字：center：

圖像將在水平和垂直方向上居中。top,bottom,left,right:分別將圖像定位在元素的上、下、左、右邊。長度和百分比值：例如，50%50%會使背景圖片在元素中心顯示。20px30px將圖片從元素的左上角開始，向右移動20px，向下移動30px。復(fù)合值：當使用三個或四個值時，前兩個值可以是關(guān)鍵詞，后跟長度或百分比作為偏移量，例如top10pxright20px。默認值：如果只提供一個值，默認另一個值為center。如果兩個值都是關(guān)鍵詞，默認它們之間沒有偏移。4.background-position

41知識準備--背景屬性border-style：上邊框樣式[右邊框樣式

下邊框樣式

左邊框樣式]；基本格式background-size:length|percentage|cover|contain|auto;5.background-sizebackground-size屬性的值可以是一個或組合?？梢允蔷唧w的長度單位（如像素px、百分比%），關(guān)鍵詞cover、contain，或者是auto。

1知識準備--背景屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型長度值：可以為background-size提供具體的長度值，如像素（px）、厘米（cm）等。例如，background-size:100px200px;會將背景圖像設(shè)置為100px寬和200px高。百分比值：百分比值是基于元素本身的尺寸來計算的。例如，background-size:50%100%;會將背景圖像的寬度設(shè)置為元素寬度的50%，高度設(shè)置為元素高度的100%。cover：這個值會縮放背景圖像以完全覆蓋元素。圖像可能不會被完整地顯示，但它的所有部分都會出現(xiàn)在元素中。contain：這個值會縮放背景圖像以完全包含在元素中。圖像可能會留有一些空白區(qū)域，但圖像的所有部分都會出現(xiàn)在元素中，且不會被裁剪。5.background-size

1知識準備--背景屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型此外，還可以使用auto

關(guān)鍵字，它表示背景圖像應(yīng)該保持其原始尺寸（在長度或百分比值的情況下）。通過background-size屬性，可以確保背景圖片在不同屏幕尺寸和容器大小下都能呈現(xiàn)出預(yù)期的展示效果，無論是填充背景、保持內(nèi)容比例還是精確控制尺寸。5.background-size

1知識準備--背景屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型6.background-clip在CSS3中，background-clip屬性定義了元素的背景（包括背景顏色、背景圖片等）應(yīng)該被裁剪到哪里。該屬性通常與border-radius、padding和border一起使用，以創(chuàng)建各種視覺效果。

1知識準備--背景屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型6.background-clipbackground-clip屬性值有：border-box：

默認值。背景會擴展到邊框的外部邊緣（即使邊框是透明的）。padding-box：背景只會覆蓋到內(nèi)邊距區(qū)域，不包括邊框。content-box：

背景只會覆蓋到內(nèi)容區(qū)域，不包括內(nèi)邊距和邊框。

1知識準備--背景屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型7.background-attachment在CSS3中，background-attachment屬性用于定義背景圖像是否固定或者隨著頁面的其余部分滾動。該屬性在網(wǎng)頁設(shè)計中非常有用，特別是想要背景圖像保持靜止，而內(nèi)容則隨著用戶滾動頁面時滾動。

1知識準備--背景屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型background-attachment屬性值有：scroll：默認值。背景圖像會隨著頁面的其余部分一起滾動。fixed：背景圖像不會隨著頁面的其余部分一起滾動。即使頁面內(nèi)容滾動，背景圖像也會保持在視口（viewport）的相同位置。local：背景圖像會隨著元素內(nèi)容的滾動而滾動。注意，這個值主要用在設(shè)置了overflow屬性（例如overflow:auto或overflow:scroll）的元素上。7.background-attachment

41知識準備--背景屬性border-style：上邊框樣式[右邊框樣式

下邊框樣式

左邊框樣式]；基本格式background:background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position;8.background復(fù)合屬性background是一個復(fù)合屬性，可以在一個聲明中同時設(shè)置多個背景相關(guān)的屬性。

1知識準備--線性漸變盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型CSS3引入了漸變（gradients）這一強大的功能，背景顏色在兩個或多個顏色之間創(chuàng)建平滑的過渡。線性漸變（LinearGradients）是在兩個方向（水平或垂直）上平滑過渡顏色?？梢灾付u變的方向和顏色停止點。運用CSS3中的“background-image:liner-gradient(參數(shù)值)”樣式可以實現(xiàn)線性漸變效果。線性漸變41知識準備--線性漸變border-style：上邊框樣式[右邊框樣式

下邊框樣式

左邊框樣式]；基本格式background:linear-gradient(direction,color-stop1,color-stop2,...);direction

是漸變的方向，可以是角度（如

45deg）或者關(guān)鍵字（如

toright、tobottomright

等）。color-stop

是顏色停止點，表示在漸變中的位置以及該位置的顏色。線性漸變

1知識準備--線性漸變盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型漸變角度是指水平線和漸變線之間的夾角，可以使以deg為單位的角度數(shù)值或to加left、right、top和bottom等關(guān)鍵字。當未設(shè)置漸變角度時，默認值為180deg，等同于tobottom。1.漸變角度

1知識準備--線性漸變盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型顏色值用于設(shè)置漸變顏色，“顏色值1”表示起始顏色，“顏色值n”表示結(jié)束顏色，起始顏色和結(jié)束顏色之間可以添加多個顏色，個顏色值用英文逗號分隔。2.顏色值

1知識準備--線性漸變盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型2.顏色值例如：background-image:linear-gradient(180deg,#AF4,#4AF);

效果如圖所示。

1知識準備--線性漸變盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型2.顏色值例如：background-image:linear-gradient(30deg,#AF450%,#4AF80%);

效果如圖所示。在每一個顏色后面還可以加一個百分比數(shù)值，用于標識顏色漸變的位置。

1知識準備--徑向漸變盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型徑向漸變CSS3中的徑向漸變（RadialGradient）是起始顏色從一個中心點向外輻射開來的，可以是圓形或橢圓形。徑向漸變通過“radial-gradient(參數(shù)值)”函數(shù)來定義，控制漸變的中心、形狀、大小以及顏色的分布?；靖袷絩adial-gradient(shapesizeatposition,color-stop1,color-stop2,...);41知識準備--徑向漸變可定義形狀、大小、位置及顏色停止點。徑向漸變

1知識準備--徑向漸變盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型徑向漸變shape:

漸變的形狀，可以是circle（圓形）或ellipse（橢圓形）。默認值是ellipse。size:

漸變的大小，可以是長度值（如20px）或百分比（如50%），也可以是關(guān)鍵詞closest-side、farthest-side、closest-corner、farthest-corner，用來定義漸變的邊界。position:

漸變中心的位置，可以使用at加關(guān)鍵字（如center、left、top等）或具體的長度值（包括百分比），如50%50%表示居中。默認為atcentercolor-stop:

至少需要定義兩種顏色停止點，以定義顏色的過渡。

1知識準備--徑向漸變盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型徑向漸變例如：background-image:radial-gradient(ellipseatcenter,red,blue);效果如圖所示?；靖袷絙ackground-image:repeating-linear-gradient(direction,color-stop1,color-stop2,...);

1知識準備--重復(fù)漸變1.重復(fù)線性漸變（repeating-linear-gradient）參數(shù)與標準的linear-gradient相同，只是漸變模式會在達到結(jié)束色標后立即重新開始，形成一個連續(xù)的重復(fù)圖案。。

1知識準備--重復(fù)漸變盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型重復(fù)漸變是CSS中的一種特性，用于創(chuàng)建一個模式化的漸變背景，其中漸變圖案會重復(fù)以填充整個元素的背景。重復(fù)漸變讓漸變圖案無限循環(huán)，填充整個背景，增強視覺效果。1.重復(fù)線性漸變（repeating-linear-gradient）基本格式background-image:repeating-linear-gradient(direction,color-stop1,color-stop2,...);

1知識準備--重復(fù)漸變1.重復(fù)線性漸變（repeating-linear-gradient）參數(shù)與標準的linear-gradient相同，只是漸變模式會在達到結(jié)束色標后立即重新開始，形成一個連續(xù)的重復(fù)圖案。

1知識準備--重復(fù)漸變1.重復(fù)線性漸變（repeating-linear-gradient）例如：background-image:repeating-linear-gradient(toright,red,#F4F10%,#4FB20%,#B4F40%);效果如圖所示?；靖袷絙ackground-image:repeating-radial-gradient(shapesizeatposition,color-stop1,color-stop2,...);1知識準備--重復(fù)漸變2.重復(fù)徑向漸變（repeating-radial-gradient）參數(shù)與radial-gradient相同，同樣，漸變圖案在達到其自然邊界后會重復(fù)出現(xiàn)。

1知識準備--重復(fù)漸變例如：background-image:repeating-radial-gradient(circleclosest-sideatcenter,white,white10px,black10px,black20px);效果如圖所示。2.重復(fù)徑向漸變（repeating-radial-gradient）

實戰(zhàn)演練—制作“紅海行動影評”網(wǎng)頁2本次任務(wù)主要是利用HTML5新增的結(jié)構(gòu)化元素、背景與漸變屬性等知識點完成“紅海行動影評”網(wǎng)頁的制作。整個頁面包括包含頭部、主體和底部。網(wǎng)頁頭部含有標題，主體包含電影簡介、影片亮點、影評精選，網(wǎng)頁底部含有版權(quán)信息。預(yù)覽效果如下圖所示。

實戰(zhàn)演練—制作“紅海行動影評”網(wǎng)頁2“紅海行動影評”網(wǎng)頁制作思路：使用結(jié)構(gòu)化元素header、section、footer，分組元素main等，頭部用在header元素包含h1元素作為網(wǎng)頁標題，主體部分用在main元素包含三個section元素實現(xiàn)電影簡介、影片亮點和影評精選，底部用在footer元素包含p元素實現(xiàn)版權(quán)信息。可以分成兩步來完成：首先制作“紅海行動影評”的HTML結(jié)構(gòu)代碼；其次編寫CSS代碼。

實戰(zhàn)演練—制作“紅海行動影評”網(wǎng)頁21.制作“紅海行動影評”的HTML結(jié)構(gòu)代碼

實戰(zhàn)演練—制作“紅海行動影評”網(wǎng)頁2給body元素設(shè)置頁面的全局字體、內(nèi)外邊距以消除瀏覽器默認樣式的影響。為header元素設(shè)置了背景色、文字顏色、內(nèi)邊距和文本對齊方式。為main元素設(shè)置了外邊距，為section元素設(shè)置了底部外邊距以分隔不同部分的內(nèi)容。為電影簡介中的img元素設(shè)置寬度、最大寬度、顯示方式和水平居中。為應(yīng)用了類名為comment的div元素設(shè)置邊框、內(nèi)邊距、下外邊距、圓角和背景色，其內(nèi)的h3設(shè)置上下外邊距。為footer元素設(shè)置背景色、內(nèi)邊距和文本居中。2.編寫基礎(chǔ)CSS代碼

進階訓(xùn)練—制作“女媧補天神話傳說”網(wǎng)頁3本次任務(wù)主要是利用HTML5新增的結(jié)構(gòu)化元素、盒子模型等知識點完成“女媧補天神話傳說”網(wǎng)頁的制作。頭部用于展示網(wǎng)頁的標題，即“女媧補天神話傳說”。主體內(nèi)容包含圖片、故事簡介、文化意義以及一個按鈕?！傲私飧唷庇糜谠邳c擊按鈕后展示更多信息，默認是隱藏的。預(yù)覽效果如圖所示。

進階訓(xùn)練—制作“女媧補天神話傳說”網(wǎng)頁3RGBA則是在RGB色彩模式的基礎(chǔ)上增加了一個表示不透明度的Alpha通道，使得顏色可以具有透明度屬性。語法為：RGBA（R，G，B，alpha)；參數(shù)alpha參數(shù)是一個介于0.0（完全透明）和1.0（完全不透明）之間的數(shù)字。需要注意的是，RGBA顏色模式只能用于設(shè)置背景顏色的不透明度，不能用于設(shè)置背景圖像的不透明度。

RGBA顏色模式

進階訓(xùn)練—制作“女媧補天神話傳說”網(wǎng)頁3CSS3中的opacity屬性用于設(shè)置元素的整體不透明度。opacity屬性會讓元素及其所有子元素一起變得透明或更加不透明。語法為：element{opacity:value;}；value：指定不透明度的值，范圍從0.0（完全透明）到1.0（完全不透明）。

opacity屬性

進階訓(xùn)練—制作“女媧補天神話傳說”網(wǎng)頁3

opacity屬性

opacity:1;opacity:0.2;opacity:0.5;

進階訓(xùn)練—制作“女媧補天神話傳說”網(wǎng)頁31.制作“女媧補天神話傳說”的HTML結(jié)構(gòu)代碼

進階訓(xùn)練—制作“女媧補天神話傳說”網(wǎng)頁3?給header元素設(shè)置背景色為深藍色，文本顏色為白色，字體大小為24px，并且文本居中顯示。給應(yīng)用了類名為container的div元素設(shè)置最大寬度、水平居中、內(nèi)邊距、外邊距、背景色和帶有輕微的陰影效果。給應(yīng)用了類名為myth-image的img元素設(shè)置最大寬度、寬度、自動調(diào)整高度、和水平居中，并且底部和左側(cè)有一定的外邊距。2.編寫基礎(chǔ)CSS代碼

進階訓(xùn)練—制作“女媧補天神話傳說”網(wǎng)頁3?通過內(nèi)聯(lián)JavaScript編寫了一個簡單的函數(shù)showMore()，用于響應(yīng)按鈕點擊事件。該函數(shù)通過getElementById獲取了id為moreContent的元素，根據(jù)其當前的顯示狀態(tài)（display屬性），切換其顯示或隱藏，實現(xiàn)了“了解更多”內(nèi)容的簡單交互邏輯。3.JavaScript實現(xiàn)交互功能

4動手實踐—制作“播放器圖標”網(wǎng)頁4運用盒子模型的相關(guān)屬性、背景屬性和CSS3漸變屬性制作“播放器圖標”，實現(xiàn)多個盒子嵌套模式，不同盒子采用不同顏色漸變效果、邊框效果等設(shè)置。小結(jié)知識準備——背景屬性實戰(zhàn)演練——制作“紅海行動影評”網(wǎng)頁進階訓(xùn)練——制作“女媧補天神話傳說”網(wǎng)頁動手實踐——制作“播放器圖標”網(wǎng)頁模塊五盒子模型任務(wù)3過渡與變形屬性網(wǎng)頁制作CSSHTML知識準備——過渡與變形屬性實戰(zhàn)演練——制作“產(chǎn)品展示”網(wǎng)頁過度與變形屬性0201進階訓(xùn)練——制作“商品評論”網(wǎng)頁03動手實踐——制作“電子相冊”網(wǎng)頁04

1.掌握過渡屬性的基本概念和用法

2.掌握變形屬性的基本概念和用法

3.提升實踐能力和創(chuàng)新思維過度與變形屬性學(xué)習(xí)目標：

1.要求學(xué)生對待每一個細節(jié)都要精益求精，培養(yǎng)出良好的工作習(xí)慣和職業(yè)素養(yǎng)。

2.引導(dǎo)學(xué)生追求精益求精、不斷創(chuàng)新的工匠精神，通過不斷學(xué)習(xí)和實踐，提升自己的專業(yè)技能和綜合素質(zhì)。

3.鼓勵學(xué)生積極參與團隊合作，與團隊成員共同討論和解決問題，培養(yǎng)團隊合作精神和溝通能力。4.引導(dǎo)學(xué)生關(guān)注社會熱點問題和環(huán)保事業(yè)，通過設(shè)計具有社會責任感的網(wǎng)頁作品來傳遞正能量和環(huán)保意識。過度與變形屬性思政目標：

1知識準備--過渡與變形屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型過渡屬性CSS3的transition屬性，用于平滑地改變元素的樣式屬性值。當元素的某些CSS屬性值發(fā)生變化時，transition屬性可以控制這些變化以動畫的形式展現(xiàn)出來，而不是立即跳變到新的狀態(tài)。為用戶界面增加流暢性和動態(tài)感。

41知識準備--過渡屬性border-style：上邊框樣式[右邊框樣式

下邊框樣式

左邊框樣式]；基本格式transition-property:none|all|property-name;1.transition-property屬性transition-property屬性值包括none、all和property(指CSS屬性名）3個。

1知識準備--過渡屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型none：沒有屬性會獲得過渡效果。all：所有可過渡屬性都將獲得過渡效果。property-name：指定要過渡的具體CSS屬性名，如

background-color、width、transform

等。可以指定多個屬性，它們之間用逗號分隔。1.transition-property屬性

1知識準備--過渡屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型transition-duration屬性用于定義過渡動畫的持續(xù)時間，即從一個屬性值變化到另一個屬性值所需的時間。transition-duration屬性決定了過渡效果的速度。2.transition-duration屬性

41知識準備--過渡屬性border-style：上邊框樣式[右邊框樣式

下邊框樣式

左邊框樣式]；基本格式transition-duration:time;2.transition-duration屬性transition-duration屬性的默認值為0；time的值為指定過渡效果持續(xù)的時間，可以是秒（s）或毫秒（ms），例如

0.5s

或

500ms。

1知識準備--過渡屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型可以為不同的過渡屬性指定不同的持續(xù)時間，它們之間用逗號分隔。但是，通常與

transition-property

一起使用時，會為所有指定的過渡屬性設(shè)置相同的持續(xù)時間，除非有特定需求要分別為它們設(shè)置不同的值。2.transition-duration屬性

1知識準備--過渡屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型3.transition-timing-function

屬性transition-timing-function

屬性是定義了過渡效果的時間曲線，即過渡動畫的“速度”如何隨時間變化。可以控制動畫在開始、進行和結(jié)束時的加速或減速，從而創(chuàng)造出平滑或突然的過渡效果。

41知識準備--過渡屬性border-style：上邊框樣式[右邊框樣式

下邊框樣式

左邊框樣式]；基本格式transition-timing-function:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);控制動畫在開始、進行和結(jié)束時的加速或減速3.transition-timing-function

屬性

1知識準備--過渡屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型transition-timing-function屬性的取值具體說明如下：ease：默認值，表示動畫以慢速開始，然后加快，在結(jié)束前變慢。linear：動畫從頭到尾的速度是相同的。ease-in：動畫以慢速開始。ease-out：動畫以慢速結(jié)束。ease-in-out：動畫以慢速開始和結(jié)束，中間加速。cubic-bezier(n,n,n,n)：允許定義自己的貝塞爾曲線。四個值在0到1之間，定義了曲線控制點的X和Y坐標。3.transition-timing-function

屬性

1知識準備--過渡屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型transition-delay屬性指定在過渡效果（transitioneffect）開始之前需要等待的時間，即過渡動畫開始前的一段延遲時間。4.transition-delay屬性

41知識準備--過渡屬性border-style：上邊框樣式[右邊框樣式

下邊框樣式

左邊框樣式]；基本格式transition-delay:time;4.transition-delay屬性time：指定延遲的時間，可以是秒（s）或毫秒（ms）。默認值為0，表示沒有延遲

1知識準備--過渡屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型transition屬性是CSS3中的一個復(fù)合屬性，用于在一個屬性中設(shè)置transition-property、transition-duration、transition-timing-function、transition-delay這4個過渡屬性。5.transition屬性

41知識準備--過渡屬性border-style：上邊框樣式[右邊框樣式

下邊框樣式

左邊框樣式]；基本格式transition:propertydurationtiming-functiondelay;5.transition屬性各個參數(shù)值之間用空格分隔，且必須按照順序進行定義，不能顛倒。

1知識準備--變形屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。在CSS3中，變形（transform）是指對頁面元素進行旋轉(zhuǎn)、縮放、傾斜、位移等視覺效果的處理。這些變形效果可以通過CSS3的transform屬性及其相關(guān)的函數(shù)來實現(xiàn)，為網(wǎng)頁添加了更多的動態(tài)和交互性。CSS3的變形指的是利用transform屬性對元素進行以下類型的變形處理。變形屬性

1知識準備--變形屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型1.平移（translate）平移（translate）是指元素在頁面中位置上的變化，即沿水平（X軸）和垂直（Y軸）方向同時移動，而不影響頁面上其他元素的布局。

41知識準備--變形屬性border-style：上邊框樣式[右邊框樣式

下邊框樣式

左邊框樣式]；基本格式transform:translate(tx,ty);tx是沿X軸的位移量，ty是沿Y軸的位移量，tx和ty可以是像素（px）、百分比（%）或其他長度單位。如果省略ty，則默認為0，即僅沿X軸移動。1.平移（translate）

1知識準備--變形屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型在使用translate移動元素時，坐標的初識位置默認為元素的中心點，在圖5-41中，①表示移動前的元素，②表示移動后的元素。1.平移（translate）

1知識準備--變形屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型2.縮放（scale）在CSS3中，縮放（scale）可以對元素進行縮放操作，即改變元素的尺寸大小，包括寬度和高度。

41知識準備--變形屬性border-style：上邊框樣式[右邊框樣式

下邊框樣式

左邊框樣式]；基本格式transform:scale(x,y);x和y分別代表水平方向和垂直方向的縮放比例。如果x和y值相同，那么元素會等比例縮放；如果不同，則元素會按照指定的比例進行非等比例縮放。2.縮放（scale）

1知識準備--變形屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型當x和y的值大于1時，元素會放大。當x和y的值在0到1之間時，元素會縮小。如果只指定了一個值，那么另一個方向也會應(yīng)用相同的值。2.縮放（scale）

1知識準備--變形屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型2.縮放（scale）放大1.5倍后效果初始效果

41知識準備--變形屬性border-style：上邊框樣式[右邊框樣式

下邊框樣式

左邊框樣式]；基本格式transform:skew(ax,ay);3.傾斜（skew）ax是一個角度值，表示沿X軸的傾斜角度。ay是一個角度值，表示沿Y軸的傾斜角度。

1知識準備--變形屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型ax是為正值會使元素向右傾斜，為負值會使元素向左傾斜。ay是為正值會使元素向下傾斜，為負值會使元素向上傾斜。角度可以是度數(shù)（deg）、弧度（rad）、梯度（grad）或轉(zhuǎn)角（turn），但最常見的是使用度數(shù)。其中如果省略ay，則默認為0，即僅沿X軸傾斜。3.傾斜（skew）

1知識準備--變形屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型transform:skew(30deg);3.傾斜（skew）41知識準備--變形屬性border-style：上邊框樣式[右邊框樣式

下邊框樣式

左邊框樣式]；基本格式transform:rotate(angle);angle是旋轉(zhuǎn)的角度，可以是正數(shù)或負數(shù)，表示順時針或逆時針方向旋轉(zhuǎn)。4.旋轉(zhuǎn)（rotate）

1知識準備--變形屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)，每個HTML元素被視為一個矩形盒子。什么是盒子模型transform:rotate(45deg);4.旋轉(zhuǎn)（r