《HTML5+CSS3網(wǎng)頁制作》課件-模塊四 CSS3基礎(chǔ)

模塊四CSS3基礎(chǔ)任務(wù)1元素選擇器和類選擇器網(wǎng)頁制作CSSHTML知識準(zhǔn)備——元素選擇器和類選擇器實戰(zhàn)演練——制作“宋詞滿江賞析”網(wǎng)頁元素選擇器和類選擇器0201進階訓(xùn)練——制作“端午節(jié)的由來”網(wǎng)頁03動手實踐——“李大釗人物介紹”的網(wǎng)頁041.了解CSS2.熟悉CSS樣式規(guī)則3.掌握元素選擇器的使用4.掌握類選擇器的使用學(xué)習(xí)目標(biāo)：元素選擇器和類選擇器1.結(jié)合中國傳統(tǒng)文化元素和現(xiàn)代設(shè)計理念，培養(yǎng)學(xué)生的文化自信和創(chuàng)新意識，鼓勵他們在網(wǎng)頁設(shè)計中融入中國特色，展現(xiàn)創(chuàng)新能力。2.通過實際的網(wǎng)頁設(shè)計項目，培養(yǎng)學(xué)生的社會責(zé)任感和團隊協(xié)作精神，使他們意識到設(shè)計工作對社會的服務(wù)價值。3.強化學(xué)生的審美素養(yǎng)，提升他們的藝術(shù)鑒賞力和設(shè)計能力。同時，激發(fā)學(xué)生的終身學(xué)習(xí)意識，鼓勵他們不斷更新知識和技能，以適應(yīng)快速變化的信息技術(shù)領(lǐng)域。思政目標(biāo)：元素選擇器和類選擇器

知識準(zhǔn)備--課程引入1哈肯·維姆·萊（H?konWiumLie）在1994年提出了CSS的最初想法，并與當(dāng)時正在設(shè)計Argo瀏覽器的伯特·波斯（BertBos）合作，共同創(chuàng)造了CSS的最初版本。CSS的發(fā)展過程中，W3C組織對CSS的發(fā)展和標(biāo)準(zhǔn)化起到了關(guān)鍵作用，1996年12月，W3C推出了CSS規(guī)范的第一版本，1997年頒布了CSS1.0版本，而1998年發(fā)布了CSS2版本。哈肯·維姆·萊（H?konWiumLie）

1

張鑫旭中國前端開發(fā)社區(qū)中的重要人物之一，以其深厚的專業(yè)知識和對CSS的深刻理解而聞名。他所著的《CSS世界》一書，不僅系統(tǒng)性地介紹了CSS的基礎(chǔ)概念和應(yīng)用方法，還深入探討了CSS在現(xiàn)代網(wǎng)頁設(shè)計中的核心作用和高級技巧。這本書成為了許多前端開發(fā)者學(xué)習(xí)和掌握CSS不可或缺的資源。知識準(zhǔn)備--課程引入張鑫旭

2CSS層疊樣式表(CascadingStyleSheets)

一種樣式語言，通過選擇器來指定網(wǎng)頁元素，并為這些元素定義一系列的屬性和值，從而改變它們的外觀。CSS的特點豐富的樣式定義易于使用和修改多頁面應(yīng)用層疊頁面壓縮知識準(zhǔn)備—CSS簡介1

2知識準(zhǔn)備—CSS樣式規(guī)則1CSS都通過一系列規(guī)則來指定樣式應(yīng)用于網(wǎng)頁的特定元素CSS是一種用于描述網(wǎng)頁元素如何顯示的語言，它涵蓋了字

體、顏色、布局等樣式屬性。CSS樣式規(guī)則由選擇器和聲明塊組成聲明塊包括一個或多個屬性及其值。當(dāng)多個樣式規(guī)則適用于同一元素時，CSS的層疊特性決定了哪個規(guī)則將被優(yōu)先應(yīng)用。

2知識準(zhǔn)備—CSS樣式的引入1網(wǎng)頁是由內(nèi)容、表現(xiàn)和行為三個要素共同構(gòu)成的復(fù)合體聲明塊包括一個或多個屬性及其值。當(dāng)多個樣式規(guī)則適用于同一元素時，CSS的層疊特性決定了哪個規(guī)則將被優(yōu)先應(yīng)用。四種方法引入CSS：行內(nèi)式、內(nèi)嵌式、導(dǎo)入式和鏈接式通過兩種方式實現(xiàn)：直接在HTML文檔中定義（內(nèi)部樣式），或者存儲在獨立的.css文件中并通過HTML文檔鏈接（外部樣式）。

2知識準(zhǔn)備—CSS樣式的引入1行內(nèi)樣式：使用HTML元素的style屬性定義CSS樣式行內(nèi)式的基本語法格式為:<元素名style="屬性1:屬性值1;屬性2:屬性值2;...">內(nèi)容</元素名>

2知識準(zhǔn)備—CSS樣式的引入1案例4-1

ＣＳＳ行內(nèi)樣式的用法

2知識準(zhǔn)備—CSS樣式的引入1內(nèi)嵌樣式：使用style元素在HTML文檔頭部定義CSS樣式內(nèi)嵌式的基本語法格式為:<style>選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3}</style>

2知識準(zhǔn)備—CSS樣式的引入1案例4-2

ＣＳＳ內(nèi)嵌式樣式的用法

2知識準(zhǔn)備—CSS樣式的引入1導(dǎo)入式：使用@import命令導(dǎo)入外部CSS樣式表文件導(dǎo)入式的基本語法格式為:@import"filename.css"[mediatypes];

2知識準(zhǔn)備—CSS樣式的引入1鏈接式：通過<link>標(biāo)簽來引用外部CSS文件的方法鏈接式的基本語法格式為:<linkhref="CSS文件的路徑"type="text/css"rel="stylesheet">

2知識準(zhǔn)備—CSS樣式的優(yōu)先級1CSS優(yōu)先級規(guī)則及計算為：ID選擇器權(quán)重>類選擇器權(quán)重>元素選擇器權(quán)重例如下面代碼中的CSS權(quán)重的用法，針對不同的選擇器分別計算其可權(quán)值。編寫的CSS代碼如下：h1{color:blue;}權(quán)值為1pem{color:yellow;}權(quán)值為2.font01{color:red}權(quán)值為10.noteulli{color:gray;}權(quán)值為12#main{color:black;}權(quán)值為100

2知識準(zhǔn)備—元素選擇器1元素選擇器通過元素的標(biāo)簽名來標(biāo)識元素選擇器的語法規(guī)則：元素名{屬性：屬性值}其中包含一個或多個屬性和屬性值對。每個屬性和屬性值對之間用分號;分隔。例如針對h2元素應(yīng)用CSS樣式：h2{font-size:34px;color:#bc7400;background-color:#ccc;text-align:center;}

2知識準(zhǔn)備—類選擇器1類選擇器通過class類名來標(biāo)識類選擇器語法規(guī)則：.類名稱{屬性：屬性值}類選擇器的名稱由開發(fā)者自定義，可以包含字母、數(shù)字、下劃線或破折號，但不能以數(shù)字開頭。

2知識準(zhǔn)備—類選擇器1案例4-3

類選擇器的用法

實戰(zhàn)演練—制作“宋詞滿江紅賞析”網(wǎng)頁2【需求說明】

本次任務(wù)主要是利用HTML的h2元素、p元素、ul列表元素、a元素等、CSS內(nèi)嵌式等知識點完成"宋詞滿江紅賞析"網(wǎng)頁的制作。通過HTML定義網(wǎng)頁結(jié)構(gòu)，使用CSS設(shè)置頁面背景色、文字大小、顏色等樣式，以及列表項的圖標(biāo)和鏈接樣式。保存后瀏覽網(wǎng)頁，效果如圖所示：

實戰(zhàn)演練—制作“宋詞滿江紅賞析”網(wǎng)頁2【制作思路】

"宋詞滿江紅賞析"網(wǎng)頁的制作思路是使用h2元素定義了宋詞的標(biāo)題，h3元素定義了作者岳飛及其時代背景，宋代。接下來的三個p元素分別包含了宋詞的三段內(nèi)容。最后的ul無序列表包含一個li列表項，其中包含四個a超鏈接，每個鏈接都配有一個img圖像，分別代表不同的功能：收藏、下載、復(fù)制和播放。alt屬性為圖像提供了替代文本，有助于搜索引擎優(yōu)化和視覺障礙用戶的理解?？梢苑殖?步來完成：首先制作頁面HTML結(jié)構(gòu)代碼，定義網(wǎng)頁的基本框架和內(nèi)容布局；其次編寫基礎(chǔ)CSS代碼，設(shè)置頁面的背景色、字體大小和行間距；為頁面元素添加樣式，如標(biāo)題的字色和列表項的圖標(biāo)樣式。

實戰(zhàn)演練—制作“宋詞滿江紅賞析”網(wǎng)頁2【制作過程】

1."宋詞滿江紅賞析"網(wǎng)頁的HTML結(jié)構(gòu)代碼

實戰(zhàn)演練—制作“宋詞滿江紅賞析”網(wǎng)頁2【制作過程】

2.編寫基礎(chǔ)的CSS代碼body定義了背景顏色。h2和h3分別設(shè)置了二級和三級標(biāo)題的字體大小和顏色。p規(guī)定了段落的字體大小和行高，增強了文本的可讀性。li移除了列表項的標(biāo)記并調(diào)整了行高。.tubiaoimg統(tǒng)一了圖標(biāo)的尺寸。.tubiaoa使鏈接在一行內(nèi)水平排列。

進階訓(xùn)練—制作“端午節(jié)的由來”網(wǎng)頁3【拓展學(xué)習(xí)指導(dǎo)】

1.圖片居中的處理圖片元素img是內(nèi)聯(lián)元素，無法用text-align:center來設(shè)置居中。因此可以通過對body設(shè)置居中，來將頁面內(nèi)容元素居中。其它頁面內(nèi)容元素通過text-align:left來設(shè)置左對齊。2.標(biāo)題加下邊框標(biāo)題元素是塊級元素，是具有寬度、高度、邊框，且可以設(shè)置內(nèi)、外邊距。邊框是：border，可以分為上（top）、下（bottom）、左（left）、右（right）。這里需要加下邊框：border-bottom。

進階訓(xùn)練—制作“端午節(jié)的由來”網(wǎng)頁3【需求說明】

本次任務(wù)主要是利用HTML和CSS等知識點完成“端午節(jié)的由來”網(wǎng)頁的制作。網(wǎng)頁的效果是中心對齊的布局，配有標(biāo)題下劃線、圖文混排以及列表項的詳細(xì)解釋。通過設(shè)置背景圖像、調(diào)整段落首行縮進、行高和文字對齊方式，增強了頁面的可讀性和美觀性。同時，通過CSS偽類:hover實現(xiàn)了鏈接鼠標(biāo)懸停時的視覺效果，提升了用戶交互體驗。保存并瀏覽網(wǎng)頁，預(yù)覽效果如圖所示：

進階訓(xùn)練—制作“端午節(jié)的由來”網(wǎng)頁3【制作思路】

"端午節(jié)的由來"網(wǎng)頁制作思路是以h1元素開始，定義了頁面的主標(biāo)題。緊接著是一個span元素，標(biāo)注了內(nèi)容的來源。p元素包含了端午節(jié)名稱含義和歷史背景的詳細(xì)解釋。還包含了一個img元素，用于插入一張與端午節(jié)相關(guān)的圖片，alt屬性提供了圖片的替代文本。定義列表dl由dt（定義項）和dd（定義描述）組成，提供了端午節(jié)不同名稱的解釋和歷史背景。每個dt元素內(nèi)都包含一個指向外部鏈接的<a>標(biāo)簽?？梢苑殖?步來完成：首先制作頁面HTML結(jié)構(gòu)代碼，定義網(wǎng)頁的基本框架和內(nèi)容布局；其次編寫基礎(chǔ)CSS代碼，設(shè)置頁面的寬度、背景圖像和基礎(chǔ)文本樣式；接著為定義列表樣式和調(diào)整鏈接樣式，如列表項格式化；設(shè)置鏈接正常狀態(tài)和鼠標(biāo)懸停時的視覺效果，以增強頁面的交互性。

進階訓(xùn)練—制作“端午節(jié)的由來”網(wǎng)頁3【制作過程】

1."端午節(jié)的由來"網(wǎng)頁的HTML結(jié)構(gòu)代碼

進階訓(xùn)練—制作“端午節(jié)的由來”網(wǎng)頁3【制作過程】

2.編寫基礎(chǔ)的CSS代碼 body選擇器設(shè)置了頁面寬度為680像素，文本居中對齊，字體大小為14像素，并添加了背景圖像。h1選擇器為標(biāo)題添加了底部3像素的虛線邊框。img選擇器統(tǒng)一了頁面中所有圖片的寬度為200像素。p選擇器設(shè)置了段落首行縮進24像素，行高24像素，并使文本左對齊。

進階訓(xùn)練—制作“端午節(jié)的由來”網(wǎng)頁3【制作過程】

3.定義列表和鏈接樣式 dl選擇器設(shè)置了列表的文本左對齊、行高為1.4倍，以及文本顏色為黑色。dla選擇器移除了鏈接的下劃線并設(shè)置鏈接顏色為黑色。dla:hover選擇器為鼠標(biāo)懸停在鏈接上時的樣式添加了藍色和下劃線，增強了交互性。設(shè)計并制作如圖所示的“李大釗人物介紹”網(wǎng)頁。頁面使用header、div、img、p等元素制作“李大釗人物介紹”網(wǎng)頁。頁面的頭部通過header定義，包含h1元素，明確了頁面的主題。在頁面內(nèi)容中展示李大釗的圖片，提供了詳細(xì)的人物介紹，包括他的生平、教育背景和對中國共產(chǎn)主義運動的貢獻4動手實踐—制作“李大釗人物介紹”網(wǎng)頁4小結(jié)知識準(zhǔn)備——標(biāo)記選擇器和類選擇器實戰(zhàn)演練——制作“宋詞滿江賞析”網(wǎng)頁進階訓(xùn)練——制作“端午節(jié)的由來”網(wǎng)頁動手實踐——“李大釗人物介紹”的網(wǎng)頁模塊四CSS3基礎(chǔ)任務(wù)2鏈接偽類網(wǎng)頁制作CSSHTML知識準(zhǔn)備——鏈接偽類實戰(zhàn)演練——制作“音樂導(dǎo)航欄”網(wǎng)頁鏈接偽類0201進階訓(xùn)練——制作“中國四大名瓷介紹專欄”網(wǎng)頁03動手實踐——“側(cè)邊導(dǎo)航欄布局”網(wǎng)頁041.掌握鏈接偽類的使用2.熟悉鏈接偽類制作導(dǎo)航的方法學(xué)習(xí)目標(biāo)：鏈接偽類1.結(jié)合中國傳統(tǒng)文化元素和現(xiàn)代設(shè)計理念，培養(yǎng)學(xué)生的文化自信和創(chuàng)新意識，鼓勵他們在網(wǎng)頁設(shè)計中融入中國特色，展現(xiàn)創(chuàng)新能力。2.通過實際的網(wǎng)頁設(shè)計項目，培養(yǎng)學(xué)生的社會責(zé)任感和團隊協(xié)作精神，使他們意識到設(shè)計工作對社會的服務(wù)價值。3.強化學(xué)生的審美素養(yǎng)，提升他們的藝術(shù)鑒賞力和設(shè)計能力。同時，激發(fā)學(xué)生的終身學(xué)習(xí)意識，鼓勵他們不斷更新知識和技能，以適應(yīng)快速變化的信息技術(shù)領(lǐng)域。思政目標(biāo)：鏈接偽類

知識準(zhǔn)備--課程引入1哈肯·維姆·萊（H?konWiumLie）在1994年提出了CSS的最初想法，并與當(dāng)時正在設(shè)計Argo瀏覽器的伯特·波斯（BertBos）合作，共同創(chuàng)造了CSS的最初版本。CSS的發(fā)展過程中，W3C組織對CSS的發(fā)展和標(biāo)準(zhǔn)化起到了關(guān)鍵作用，1996年12月，W3C推出了CSS規(guī)范的第一版本，1997年頒布了CSS1.0版本，而1998年發(fā)布了CSS2版本。蒂姆·伯納斯·李（TimBerners-Lee）

1

張鑫旭中國前端開發(fā)社區(qū)中的重要人物之一，以其深厚的專業(yè)知識和對CSS的深刻理解而聞名。他所著的《CSS世界》一書，不僅系統(tǒng)性地介紹了CSS的基礎(chǔ)概念和應(yīng)用方法，還深入探討了CSS在現(xiàn)代網(wǎng)頁設(shè)計中的核心作用和高級技巧。這本書成為了許多前端開發(fā)者學(xué)習(xí)和掌握CSS不可或缺的資源。知識準(zhǔn)備--課程引入張鑫旭

2偽類

偽類是一種CSS選擇器，它允許開發(fā)者根據(jù)元素的特定狀態(tài)或?qū)傩詠磉x擇和樣式化元素。偽類用冒號“：”來表示。其語法規(guī)則為：標(biāo)簽名:偽類名{聲明;}知識準(zhǔn)備—鏈接偽類1

2靜態(tài)偽類

靜態(tài)偽類是一些特定于HTML元素的偽類，它們不隨用戶交互而改變。靜態(tài)偽類通常指的是:link和:visited。動態(tài)偽類動態(tài)偽類是基于用戶的交互行為，如鼠標(biāo)懸停、點擊等。在鏈接偽類的上下文中。動態(tài)偽類主要包括:hover、:active和:focus。知識準(zhǔn)備—鏈接偽類1

2鏈接偽類

鏈接偽類是用于給<a>標(biāo)簽（即超鏈接）添加特殊效果的一種選擇器?；靖袷剑篴:link{樣式聲明;}a:visited{樣式聲明;}a:hover{樣式聲明;}a:active{樣式聲明}a:focus{樣式聲明;}知識準(zhǔn)備—鏈接偽類1

2知識準(zhǔn)備—鏈接偽類1案例4-4

包含所有鏈接偽類的樣式的用法

2鏈接偽類之間的優(yōu)先級和順序

當(dāng)多個偽類同時應(yīng)用于同一個鏈接時，它們的優(yōu)先級和順序非常重要。按照CSS規(guī)范，鏈接偽類的優(yōu)先級和順序是:link->:visited->:hover（鼠標(biāo)懸停時）->:active（點擊時）。知識準(zhǔn)備—鏈接偽類1

實戰(zhàn)演練—制作“音樂導(dǎo)航欄”網(wǎng)頁2【需求說明】

本次任務(wù)主要是利用HTML和CSS等知識點完成"音樂導(dǎo)航"網(wǎng)頁的制作。通過HTML定義網(wǎng)頁結(jié)構(gòu)，使用使用float屬性實現(xiàn)列表項的橫向排列，:hover偽類實現(xiàn)鼠標(biāo)懸停效果，:active偽類設(shè)置點擊時的字體顏色變化，以及去除鏈接的下劃線和設(shè)置默認(rèn)字體顏色，增強用戶體驗。保存后瀏覽網(wǎng)頁，效果如圖所示：

實戰(zhàn)演練—制作“音樂導(dǎo)航欄”網(wǎng)頁2【制作思路】

"音樂導(dǎo)航"網(wǎng)頁制作思路為用一個div元素作為容器，該div元素被賦予了"nav"這個類名，通常用于表示導(dǎo)航欄的容器。在div內(nèi)部，有一個ul無序列表，它包含了六個li列表項，每個列表項代表導(dǎo)航欄中的一個鏈接選項?？梢苑殖?步來完成：首先制作頁面HTML結(jié)構(gòu)代碼，定義了導(dǎo)航欄的容器div，并在其中嵌套了一個無序列表ul，每個列表項li代表一個導(dǎo)航鏈接。其次編寫基礎(chǔ)CSS代碼，設(shè)置了導(dǎo)航欄的寬度、高度和背景顏色，以及列表的基本樣式。接著定義導(dǎo)航欄中鏈接的樣式和交互效果。為列表項設(shè)置浮動屬性，實現(xiàn)橫向排列，并定義了鼠標(biāo)懸停和點擊時的交互效果，調(diào)整了鏈接的默認(rèn)樣式，包括字體顏色和去除下劃線，以提升頁面的視覺效果和用戶交互體驗。

實戰(zhàn)演練—制作“音樂導(dǎo)航欄”網(wǎng)頁2【制作過程】

1."音樂導(dǎo)航"網(wǎng)頁的HTML結(jié)構(gòu)代碼

實戰(zhàn)演練—制作“音樂導(dǎo)航欄”網(wǎng)頁2【制作過程】

2.編寫基礎(chǔ)的CSS代碼定義網(wǎng)頁中導(dǎo)航欄的基本樣式。.nav類設(shè)置了導(dǎo)航欄的寬度為800像素，高度為50像素，上邊距為5像素，背景顏色為深灰色。ul選擇器移除了列表的上邊距和內(nèi)聯(lián)填充的起始值。.nav>ul>li選擇器為導(dǎo)航欄中的列表項設(shè)置了浮動到左邊，移除了列表項的默認(rèn)樣式，居中對齊文本，設(shè)置了固定的高度、行高、寬度，字體大小和字體族。這些樣式共同作用于導(dǎo)航欄，使其具有整齊劃一的外觀和布局。

實戰(zhàn)演練—制作“音樂導(dǎo)航欄”網(wǎng)頁2【制作過程】

3.定義導(dǎo)航欄中鏈接的樣式和交互效果a選擇器設(shè)置鏈接的默認(rèn)顏色為黑色，并移除了下劃線，使得鏈接看起來更簡潔。ul>li>a:active選擇器定義了鏈接在被點擊時的字體顏色變?yōu)槌壬黾恿艘曈X反饋。ul>li:hover選擇器則設(shè)置了當(dāng)鼠標(biāo)懸停在列表項上時，背景顏色變?yōu)榻鹕?/p>

進階訓(xùn)練—制作“中國四大名瓷介紹專欄”網(wǎng)頁3【拓展學(xué)習(xí)指導(dǎo)】

導(dǎo)航欄是網(wǎng)站和應(yīng)用程序中的核心組件，它幫助用戶快速找到他們想要的信息或功能。導(dǎo)航欄通常使用無序列表ul元素和列表項li元素來構(gòu)建，每個列表項包含一個鏈接a元素。常見的導(dǎo)航欄類型有：頂部導(dǎo)航欄、側(cè)邊導(dǎo)航欄、底部導(dǎo)航欄、下拉導(dǎo)航欄、標(biāo)簽頁導(dǎo)航、多層次導(dǎo)航欄等。

23案例4-5

頂部導(dǎo)航欄這是最常見的導(dǎo)航欄類型，通常位于頁面的頂部。進階訓(xùn)練—制作“中國四大名瓷介紹專欄”網(wǎng)頁

23案例4-6側(cè)邊導(dǎo)航欄側(cè)邊導(dǎo)航欄垂直排列在頁面的一側(cè)，常見于博客、文檔或具有大量分類的網(wǎng)站。進階訓(xùn)練—制作“中國四大名瓷介紹專欄”網(wǎng)頁

23案例4-7底部導(dǎo)航欄底部導(dǎo)航欄位于頁面底部，通常包含網(wǎng)站的基本信息和鏈接。進階訓(xùn)練—制作“中國四大名瓷介紹專欄”網(wǎng)頁

23案例4-8下拉導(dǎo)航欄下拉導(dǎo)航欄允許用戶通過點擊主導(dǎo)航項來展開更多的子菜單項。進階訓(xùn)練—制作“中國四大名瓷介紹專欄”網(wǎng)頁

23案例4-10多層次導(dǎo)航欄多層次導(dǎo)航指的是一種導(dǎo)航結(jié)構(gòu)，其中包含一個或多個級別的菜單項，每個菜單項可能進一步包含子菜單項。進階訓(xùn)練—制作“中國四大名瓷介紹專欄”網(wǎng)頁

進階訓(xùn)練—制作“中國四大名瓷介紹專欄”網(wǎng)頁3【需求說明】

本次任務(wù)主要是利用HTML、CSS和層級列表等知識點完成"中國四大名瓷介紹專欄"網(wǎng)頁的制作。通過HTML構(gòu)建了頁面的基本結(jié)構(gòu)，包括主導(dǎo)航和子導(dǎo)航的層級關(guān)系。CSS用于設(shè)置頁面的布局和樣式，如導(dǎo)航欄的寬度、高度、背景色，以及列表項的浮動、對齊和交互效果。特別地，利用CSS的:hover偽類和display屬性實現(xiàn)了鼠標(biāo)懸停時顯示下級菜單的動態(tài)效果。保存并瀏覽網(wǎng)頁，預(yù)覽效果如圖所示：

進階訓(xùn)練—制作“中國四大名瓷介紹專欄”網(wǎng)頁3【制作思路】

"中國四大名瓷介紹專欄"網(wǎng)頁制作思路為用一個div元素作為容器，添加了一個具有層級結(jié)構(gòu)的導(dǎo)航菜單，用于展示“中國四大名瓷”專欄的主要內(nèi)容和子主題。內(nèi)部的ul元素定義了一個無序列表，其中包含了幾個li列表項，每個列表項代表一個導(dǎo)航選項?？梢苑殖?步來完成：首先制作頁面HTML結(jié)構(gòu)代碼，定義了主導(dǎo)航和嵌套的子導(dǎo)航，以及對應(yīng)的鏈接。其次添加基礎(chǔ)CSS，設(shè)置了導(dǎo)航欄的尺寸、背景色和列表項的樣式。接著為導(dǎo)航鏈接添加樣式，如鼠標(biāo)懸停時改變背景色和鏈接顏色，以及去除下劃線。最后，實現(xiàn)了下拉菜單的顯示邏輯，通過CSS的:hover偽類控制子菜單的顯示與隱藏，增強了導(dǎo)航的動態(tài)交互性。

進階訓(xùn)練—制作“中國四大名瓷介紹專欄”網(wǎng)頁3【制作過程】

1."中國四大名瓷介紹專欄"網(wǎng)頁的HTML結(jié)構(gòu)代碼

進階訓(xùn)練—制作“中國四大名瓷介紹專欄”網(wǎng)頁3【制作過程】

2.編寫基礎(chǔ)CSS代碼、.nav類設(shè)置了導(dǎo)航欄的寬度為800像素，高度為50像素，上邊距為20像素，背景顏色為深灰色。ul選擇器移除了列表的上邊距和內(nèi)聯(lián)填充的起始值。.nav>ul>li選擇器為導(dǎo)航欄中的列表項設(shè)置了浮動到左邊，移除了列表項的默認(rèn)樣式，使文本居中對齊，設(shè)置了固定的高度、行高、寬度，字體大小和字體族。這些樣式共同作用于導(dǎo)航欄，使其具有整齊劃一的外觀和布局。

進階訓(xùn)練—制作“中國四大名瓷介紹專欄”網(wǎng)頁3【制作過程】

3.為導(dǎo)航鏈接添加樣式a選擇器定義了鏈接的默認(rèn)顏色為黑色，并移除了下劃線，使得鏈接在頁面上看起來更整潔。ul>li>a:active選擇器指定了當(dāng)鏈接被激活（即用戶點擊時）的顏色變?yōu)槌壬?，提供了視覺反饋。ul>li:hover選擇器則定義了當(dāng)鼠標(biāo)懸停在列表項上時，該列表項的背景顏色變?yōu)榻鹕?，增強了用戶與導(dǎo)航欄的交互體驗。設(shè)計并制作如圖所示的“側(cè)邊導(dǎo)航欄布局”網(wǎng)頁。頁面使用div、ul、li、a等元素制作“側(cè)邊導(dǎo)航欄布局”網(wǎng)頁。由一個側(cè)邊導(dǎo)航欄和一個橫幅廣告區(qū)域組成，具有層級分明的導(dǎo)航菜單和視覺吸引的橫幅圖像，滿足用戶快速瀏覽和選擇不同商品類別的需求。在banner圖片的左側(cè)布局導(dǎo)航欄，當(dāng)鼠標(biāo)指針移動到側(cè)邊菜單項上時，出現(xiàn)相應(yīng)的二級菜單項。4動手實踐—制作“側(cè)邊導(dǎo)航欄布局”網(wǎng)頁4小結(jié)知識準(zhǔn)備——鏈接偽類實戰(zhàn)演練——制作“音樂導(dǎo)航欄”網(wǎng)頁進階訓(xùn)練——制作“中國四大名瓷介紹專欄”網(wǎng)頁動手實踐——“側(cè)邊導(dǎo)航欄布局”的網(wǎng)頁模塊四CSS3基礎(chǔ)任務(wù)3id選擇器、偽元素選擇器和表格樣式網(wǎng)頁制作CSSHTML知識準(zhǔn)備——id選擇器、偽元素選擇器和表格樣式實戰(zhàn)演練——制作“BMI中國標(biāo)準(zhǔn)”網(wǎng)頁id選擇器、偽元素選擇器和表格樣式0201進階訓(xùn)練——制作“課程表”網(wǎng)頁03動手實踐——制作“經(jīng)典汽車”的網(wǎng)頁041.熟悉id選擇器2.熟悉偽選擇器3.熟悉表格樣式的應(yīng)用學(xué)習(xí)目標(biāo)：id選擇器、偽元素選擇器和表格樣式1.結(jié)合中國傳統(tǒng)文化元素和現(xiàn)代設(shè)計理念，培養(yǎng)學(xué)生的文化自信和創(chuàng)新意識，鼓勵他們在網(wǎng)頁設(shè)計中融入中國特色，展現(xiàn)創(chuàng)新能力。2.通過實際的網(wǎng)頁設(shè)計項目，培養(yǎng)學(xué)生的社會責(zé)任感和團隊協(xié)作精神，使他們意識到設(shè)計工作對社會的服務(wù)價值。3.強化學(xué)生的審美素養(yǎng)，提升他們的藝術(shù)鑒賞力和設(shè)計能力。同時，激發(fā)學(xué)生的終身學(xué)習(xí)意識，鼓勵他們不斷更新知識和技能，以適應(yīng)快速變化的信息技術(shù)領(lǐng)域。思政目標(biāo)：id選擇器、偽元素選擇器和表格樣式

知識準(zhǔn)備--課程引入1哈肯·維姆·萊（H?konWiumLie）在1994年提出了CSS的最初想法，并與當(dāng)時正在設(shè)計Argo瀏覽器的伯特·波斯（BertBos）合作，共同創(chuàng)造了CSS的最初版本。CSS的發(fā)展過程中，W3C組織對CSS的發(fā)展和標(biāo)準(zhǔn)化起到了關(guān)鍵作用，1996年12月，W3C推出了CSS規(guī)范的第一版本，1997年頒布了CSS1.0版本，而1998年發(fā)布了CSS2版本。蒂姆·伯納斯·李（TimBerners-Lee）

1

張鑫旭中國前端開發(fā)社區(qū)中的重要人物之一，以其深厚的專業(yè)知識和對CSS的深刻理解而聞名。他所著的《CSS世界》一書，不僅系統(tǒng)性地介紹了CSS的基礎(chǔ)概念和應(yīng)用方法，還深入探討了CSS在現(xiàn)代網(wǎng)頁設(shè)計中的核心作用和高級技巧。這本書成為了許多前端開發(fā)者學(xué)習(xí)和掌握CSS不可或缺的資源。知識準(zhǔn)備--課程引入張鑫旭

2id選擇器

ID選擇器是CSS中用于選擇具有特定ID屬性的HTML元素的一種選擇器。每個ID在頁面中應(yīng)該是唯一的。

ID選擇器的基本語法格式如下：

#elementId{/*CSS樣式規(guī)則*/}

這里：#符號表示這是一個ID選擇器；elementId是HTML元素的ID屬性值。知識準(zhǔn)備—id選擇器、偽元素選擇器和表格樣式1

2偽元素選擇器

偽元素選擇器是CSS中用來選擇和樣式化元素的特定部分或創(chuàng)建與元素相關(guān)的虛擬內(nèi)容的一種選擇器。它們以兩個冒號::開頭。

偽元素選擇器的基本語法格式如下：

selector::pseudo-element{

/*CSS樣式規(guī)則*/

}

這里：selector是基本選擇器，可以是元素選擇器、類選擇器或ID選擇器等；pseudo-element是偽元素選擇器的名稱。知識準(zhǔn)備—id選擇器、偽元素選擇器和表格樣式1

2常見的偽元素選擇器

::before 在元素的內(nèi)容前面插入新內(nèi)容 ::after 在元素的內(nèi)容后面插入新內(nèi)容 ::first-letter選擇元素內(nèi)文本的第一個字母 ::selection 選擇用戶選中的文本部分知識準(zhǔn)備—id選擇器、偽元素選擇器和表格樣式1

2表格

表格是網(wǎng)頁中展示數(shù)據(jù)的一種重要方式。CSS提供了多種屬性來增強表格的可讀性和美觀性，包括設(shè)置邊框、背景、列寬、行高以及單元格間距等。知識準(zhǔn)備—id選擇器、偽元素選擇器和表格樣式1

2表格元素選擇器

table

應(yīng)用于整個表格元素

thead

用于設(shè)置表格頭部（thead元素）的樣式 tbody用于設(shè)置表格主體（tbody元素）的樣式 tfoot針對表格底部（tfoot元素）的樣式設(shè)置 tr 用于設(shè)置表格中行（tr元素）的樣式 th 用于表頭單元格 td 用于普通單元格知識準(zhǔn)備—id選擇器、偽元素選擇器和表格樣式1

2基本表格樣式屬性

border

用于定義表格的邊框樣式，包括邊框的寬度、樣式和顏色border-collapse

控制表格的邊框是合并為單一線條還是保持分離width

指定表格的總寬度height

指定表格的高度background-color

用于設(shè)置表格或單元格的背景顏色border-collapse決定表格的邊框是合并為單一線條還是保持分離colspan 在td或th元素上使用，指定一個單元格橫跨的列數(shù)。rowspan 在td或th元素上使用，指定一個單元格縱跨的行數(shù)知識準(zhǔn)備—id選擇器、偽元素選擇器和表格樣式1

2知識準(zhǔn)備—id選擇器、偽元素選擇器和表格樣式1案例4-11

表格邊框的合并與分離

2知識準(zhǔn)備—id選擇器、偽元素選擇器和表格樣式1案例4-12

合并單元格

實戰(zhàn)演練—制作“BMI中國標(biāo)準(zhǔn)”網(wǎng)頁2【需求說明】

本次任務(wù)主要是利用HTML結(jié)構(gòu)設(shè)計、CSS樣式布局、ID選擇器和偽元素選擇器等知識點完成“BMI中國標(biāo)準(zhǔn)”網(wǎng)頁的制作。保存后瀏覽網(wǎng)頁，效果如圖所示：

實戰(zhàn)演練—制作“BMI中國標(biāo)準(zhǔn)”網(wǎng)頁2【制作思路】

"BMI中國標(biāo)準(zhǔn)"網(wǎng)頁制作思路可以分成4步來完成：首先制作頁面HTML結(jié)構(gòu)代碼：定義了網(wǎng)頁的基本骨架。其次編寫基礎(chǔ)CSS代碼，為網(wǎng)頁的body和header元素設(shè)置了基礎(chǔ)樣式。接著為頁面的各個部分添加樣式，包括字體、背景色、邊距和內(nèi)邊距等，確保了頁面的可讀性和美觀性。最后使用ID選擇器和偽元素選擇器增強頁面效果：通過ID選擇器為特定元素，如標(biāo)題和表格，應(yīng)用了定制化的樣式。同時，利用偽元素::before和::after在標(biāo)題前添加了特殊標(biāo)記。

實戰(zhàn)演練—制作“BMI中國標(biāo)準(zhǔn)”網(wǎng)頁2【制作過程】

1."BMI中國標(biāo)準(zhǔn)"網(wǎng)頁的HTML結(jié)構(gòu)代碼

實戰(zhàn)演練—制作“BMI中國標(biāo)準(zhǔn)”網(wǎng)頁2【制作過程】

2.編寫基礎(chǔ)的CSS代碼為網(wǎng)頁的body和header元素設(shè)置了基礎(chǔ)樣式。body采用Arial字體，行高1.6倍，確保文本易讀；移除外邊距和內(nèi)邊距，使內(nèi)容填充整個頁面寬度；文本顏色設(shè)為深灰，提高可讀性。header則采用鮮明藍色背景，白色文字，以增強視覺沖擊力，確保標(biāo)題醒目突出。通過在上下添加內(nèi)邊距，header與其他內(nèi)容分隔，并通過文本居中對齊，實現(xiàn)頁面的對稱美觀。

實戰(zhàn)演練—制作“BMI中國標(biāo)準(zhǔn)”網(wǎng)頁2【制作過程】

3.為頁面的各個部分添加樣式為網(wǎng)頁中的特定元素定義了清晰的樣式，增強了頁面的視覺效果和用戶體驗。#main-title移除了標(biāo)題的外邊距，使其緊密貼合頁面頂部。#bmi-intro通過添加內(nèi)邊距和淺灰色背景，為BMI介紹提供了清晰的信息框。#bmi-table設(shè)置了100%寬度和邊框合并，確保表格充滿容器且外觀整潔，其th和td通過統(tǒng)一的邊框、內(nèi)邊距和左對齊文本，提升了數(shù)據(jù)的可讀性，表頭背景則用淺灰色區(qū)分。最后，#footer通過居中對齊文本、添加內(nèi)邊距和使用深色背景與白色文字，創(chuàng)造了一個突出的頁腳區(qū)域。

實戰(zhàn)演練—制作“BMI中國標(biāo)準(zhǔn)”網(wǎng)頁2【制作過程】

4.使用ID選擇器和偽元素選擇器增強頁面效果利用偽元素::before和::after為網(wǎng)頁添加了視覺和法律聲明的增強。#main-title::before在主標(biāo)題前插入了黃色加粗的“【BMI】”標(biāo)記，通過content屬性實現(xiàn)，增加了標(biāo)題的吸引力。#footer::after在頁腳后添加了版權(quán)符號和書籍名稱，同樣使用content屬性，并以5像素的左邊距分隔，確保版權(quán)信息清晰可見。

進階訓(xùn)練—制作“課程表”網(wǎng)頁3【拓展學(xué)習(xí)指導(dǎo)】

網(wǎng)格布局（GridLayout）是CSS3的一部分，提供了一種在網(wǎng)頁上創(chuàng)建復(fù)雜二維布局的方法。容器：當(dāng)一個元素的display屬性被設(shè)置為grid時，這個元素就成為了一個網(wǎng)格容器。它定義了網(wǎng)格的行和列，形成了一個網(wǎng)格定義context。項目：在網(wǎng)格容器內(nèi)，直接子元素自動成為網(wǎng)格項目。這些項目可以被放置在容器的網(wǎng)格單元格中，它們可以占據(jù)一個或多個網(wǎng)格單元格。

23案例4-13

網(wǎng)格系統(tǒng)基礎(chǔ)布局進階訓(xùn)練—制作“課程表”網(wǎng)頁

進階訓(xùn)練—制作“課程表”網(wǎng)頁3【需求說明】

本次任務(wù)利用CSSGridLayout和媒體查詢等知識點，完成了一個響應(yīng)式的“課程表”網(wǎng)頁制作。網(wǎng)頁展示了一個5行6列的布局，頂部是跨列的標(biāo)題“時間/星期”，下方是一周五天的課程安排。通過CSSGrid的auto和repeat功能，實現(xiàn)了列的自適應(yīng)設(shè)計，同時gap屬性在項之間提供了間隔。響應(yīng)式設(shè)計確保了在寬度小于768px的屏幕上，課程表能夠智能調(diào)整為單列布局，優(yōu)化了移動設(shè)備上的顯示效果。整個課程表以整潔、清晰的格式呈現(xiàn)，便于用戶快速查找每天的課程信息。保存并瀏覽網(wǎng)頁，預(yù)覽效果如圖所示：

進階訓(xùn)練—制作“課程表”網(wǎng)頁3【制作思路】

"課程表"網(wǎng)頁制作思路是定義了一個名為course-schedule的課程表布局，使用CSSGridLayout來組織內(nèi)容。div元素被用作網(wǎng)格容器，其中包含多個子div元素，這些子元素代表課程表的不同部分。.header類定義了頭部單元格，其中.time用于顯示時間或星期，而.day用于表示周一至周五的每一天。.course-item類用于課程內(nèi)容的單元格，展示了具體的課程安排和時間。例如，時間段“8:00-9:40”后緊跟著是該時段的課程名稱，如“高等數(shù)學(xué)”、“英語”等。每個.course-item都直接放置在.course-schedule容器內(nèi)。

進階訓(xùn)練—制作“課程表”網(wǎng)頁3【制作過程】

1."課程表"網(wǎng)頁的HTML結(jié)構(gòu)代碼

進階訓(xùn)練—制作“課程表”網(wǎng)頁3【制作過程】

2.編寫基礎(chǔ)的CSS代碼將網(wǎng)格容器.course-schedule的display設(shè)置為grid，激活網(wǎng)格布局。grid-template-columns:autorepeat(5,1fr);創(chuàng)建六列，第一列為自動大小，其余五列為等寬。gap:10px;設(shè)置列與行之間的間隙。max-width:1200px;限制容器最大寬度并水平居中。padding和background設(shè)置內(nèi)邊距和背景色。box-shadow添加陰影效果。font-family指定默認(rèn)字體。

進階訓(xùn)練—制作“課程表”網(wǎng)頁3【制作過程】

3.細(xì)化網(wǎng)格內(nèi)各個項的樣式設(shè)置了課程表中不同部分的樣式。.header類為頭部元素設(shè)置了藍色背景、白色文字、內(nèi)邊距以及居中對齊。.time和.day類添加了邊框和粗體文字，以區(qū)分不同的時間/星期單元格。.course-item類為課程內(nèi)容單元格設(shè)置了內(nèi)邊距、淺灰色背景和邊框，同樣居中對齊。.title類通過grid-column屬性使標(biāo)題跨滿六列，并設(shè)置了深藍色背景。

進階訓(xùn)練—制作“課程表”網(wǎng)頁3【制作過程】

4.媒體查詢實現(xiàn)響應(yīng)式設(shè)計定義了一個媒體查詢，用于在屏幕寬度小于或等于768px時調(diào)整課程表的布局。.course-schedule的列布局由原來的六列改為單列布局，即grid-template-columns:1fr;，使所有內(nèi)容在一列內(nèi)垂直堆疊。.header和.course-item的grid-column屬性設(shè)置為1，意味著這些元素也將在小屏幕上占據(jù)整行，從而優(yōu)化移動端的顯示效果。設(shè)計并制作如圖4-38所示的“經(jīng)典汽車”欄目網(wǎng)頁。頁面使用div、h2、em、a、ul、li、img等元素制作“經(jīng)典汽車展示”網(wǎng)頁。頁面采用兩列布局，展示多款車型圖片。頁面頂部設(shè)有搜索欄，底部文字提及了車型評價和用戶心得。淺綠色背景賦予清新自然感。整體設(shè)計簡潔，突出車型特色，為用戶提供了直觀的汽車瀏覽體驗。這種布局設(shè)計不僅美觀，而且方便用戶快速瀏覽和選擇感興趣的汽車型號。4動手實踐—制作“經(jīng)典汽車”網(wǎng)頁4小結(jié)知識準(zhǔn)備——id選擇器、偽元素選擇器和表格樣式實戰(zhàn)演練——制作“BMI中國標(biāo)準(zhǔn)”網(wǎng)頁進階訓(xùn)練——制作“課程表”網(wǎng)頁動手實踐——“經(jīng)典汽車”的網(wǎng)頁模塊四CSS3基礎(chǔ)任務(wù)4文本樣式網(wǎng)頁制作CSSHTML知識準(zhǔn)備——文本樣式實戰(zhàn)演練——制作“散文欣賞”網(wǎng)頁文本樣式0201進階訓(xùn)練——制作“中華剪紙”網(wǎng)頁03動手實踐——制作“大學(xué)生專屬教程”的網(wǎng)頁041.掌握字體樣式屬性的使用2.掌握文本外觀屬性的使用3.掌握文本對齊屬性的使用4.掌握文本裝飾屬性的使用5.掌握文本縮進屬性的使用6.熟練文本樣式的應(yīng)用學(xué)習(xí)目標(biāo)：文本樣式1.結(jié)合中國傳統(tǒng)文化元素和現(xiàn)代設(shè)計理念，培養(yǎng)學(xué)生的文化自信和創(chuàng)新意識，鼓勵他們在網(wǎng)頁設(shè)計中融入中國特色，展現(xiàn)創(chuàng)新能力。2.通過實際的網(wǎng)頁設(shè)計項目，培養(yǎng)學(xué)生的社會責(zé)任感和團隊協(xié)作精神，使他們意識到設(shè)計工作對社會的服務(wù)價值。3.強化學(xué)生的審美素養(yǎng)，提升他們的藝術(shù)鑒賞力和設(shè)計能力。同時，激發(fā)學(xué)生的終身學(xué)習(xí)意識，鼓勵他們不斷更新知識和技能，以適應(yīng)快速變化的信息技術(shù)領(lǐng)域。思政目標(biāo)：文本樣式

知識準(zhǔn)備--課程引入1哈肯·維姆·萊（H?konWiumLie）在1994年提出了CSS的最初想法，并與當(dāng)時正在設(shè)計Argo瀏覽器的伯特·波斯（BertBos）合作，共同創(chuàng)造了CSS的最初版本。CSS的發(fā)展過程中，W3C組織對CSS的發(fā)展和標(biāo)準(zhǔn)化起到了關(guān)鍵作用，1996年12月，W3C推出了CSS規(guī)范的第一版本，1997年頒布了CSS1.0版本，而1998年發(fā)布了CSS2版本。蒂姆·伯納斯·李（TimBerners-Lee）

1

張鑫旭中國前端開發(fā)社區(qū)中的重要人物之一，以其深厚的專業(yè)知識和對CSS的深刻理解而聞名。他所著的《CSS世界》一書，不僅系統(tǒng)性地介紹了CSS的基礎(chǔ)概念和應(yīng)用方法，還深入探討了CSS在現(xiàn)代網(wǎng)頁設(shè)計中的核心作用和高級技巧。這本書成為了許多前端開發(fā)者學(xué)習(xí)和掌握CSS不可或缺的資源。知識準(zhǔn)備--課程引入張鑫旭

2字體樣式屬性

字體樣式屬性是CSS中用于定義網(wǎng)頁文本顯示方式的一系列屬性。這些屬性可以改變文本的字體大小、字體族、粗細(xì)、樣式等。字體大?。╢ont-size）用于設(shè)置文本的字體大小字體族（font-family）用于指定元素的字體族字體粗細(xì)（font-weight）用于設(shè)置文本的粗細(xì)字體樣式（font-style）用于設(shè)置文本的斜體樣式字體變體（font-variant）用于設(shè)置小型大寫字母的顯示方式簡寫屬性（font）允許你在一個聲明中設(shè)置多個字體屬性知識準(zhǔn)備—文本樣式1

2文本外觀屬性

文本外觀屬性是CSS中用于定義文本元素外觀的一系列屬性。文本顏色（color）用于設(shè)置文本的顏色文本間距（letter-spacing和word-spacing）用于設(shè)置字符之間的間距文本對齊（text-align）用于設(shè)置文本的水平對齊方式文本裝飾（text-decoration）用于為文本添加裝飾效果文本轉(zhuǎn)換（text-transform）用于控制文本的大小寫行高（line-height）用于設(shè)置文本的行間距文本縮進（text-indent）用于設(shè)置首行文本的縮進知識準(zhǔn)備—文本樣式1

實戰(zhàn)演練—制作“散文欣賞”網(wǎng)頁2【需求說明】

本次任務(wù)主要是利用HTML和CSS等知識點完成散文欣賞網(wǎng)頁的制作。頁面采用居中對齊的布局，具有背景圖和適當(dāng)?shù)奈谋究s進、行高設(shè)置，以增強閱讀體驗。保存后瀏覽網(wǎng)頁，效果如圖所示：

實戰(zhàn)演練—制作“散文欣賞”網(wǎng)頁2【制作思路】

“散文欣賞”網(wǎng)頁制作思路是用一個div元素作為容器，該div元素被賦予了"box"這個類名，包含散文標(biāo)題、作者信息、散文內(nèi)容和圖片信息等。h1元素定義了頁面的主標(biāo)題，這里是"故鄉(xiāng)"。span元素用來展示附加信息，如作者名"魯迅"。p元素包含兩個段落，第一個段落是散文的開頭，描述了一個生動的場景；第二個段落則是作者對過去的回憶。img元素用于插入圖片，src屬性指定圖片的路徑，但這里使用的是相對路徑"timg.jpg"。ul元素定義了一個無序列表，其中包含散文中提到的關(guān)鍵元素作為列表項li，每個列表項包含一個a元素。

實戰(zhàn)演練—制作“散文欣賞”網(wǎng)頁2【制作過程】

1.“散文欣賞”網(wǎng)頁的HTML結(jié)構(gòu)代碼

實戰(zhàn)演練—制作“散文欣賞”網(wǎng)頁2【制作過程】

2.編寫基礎(chǔ)CSS代碼為box類的div元素的設(shè)置樣式。寬度為600像素，為內(nèi)容提供固定寬度的容器。將.box內(nèi)所有文本水平居中對齊，適用于標(biāo)題和段落等。設(shè)置.box內(nèi)所有文本的默認(rèn)字體大小為14像素，影響可讀性。為.box設(shè)置背景圖像為"bg.jpg"，圖像水平重復(fù)鋪滿整個元素寬度，起始位置在元素的左下角。

實戰(zhàn)演練—制作“散文欣賞”網(wǎng)頁2【制作過程】

3.為各個子元素添加細(xì)節(jié)樣式為.box類中的<h1>元素設(shè)置背景顏色為淺灰色(#ddd)。為.box類中的p元素設(shè)置首行縮進24像素，行高為24像素，文本對齊方式為左對齊。為.box類中的ul元素設(shè)置文本對齊方式為左對齊，行高為1.4，適用于列表項的垂直間距。為.box類中的ul元素內(nèi)的<a>標(biāo)簽設(shè)置默認(rèn)文本顏色為深灰色(#666)，移除下劃線。為.box類中的ul元素內(nèi)的a元素在鼠標(biāo)懸停時改變文本顏色為藍色(#0000ff)，并添加下劃線，增強交互性。

進階訓(xùn)練—制作“中華剪紙”網(wǎng)頁3【拓展學(xué)習(xí)指導(dǎo)】

CSS中用于增強文本視覺效果的高級屬性，包括文本陰影、文本溢出處理和自定義字體的使用。文本陰影：用于為網(wǎng)頁上的文本添加陰影效果，增強視覺層次感和吸引力。text-shadow屬性的基本語法如下：text-shadow:[horizontal-offset][vertical-offset][blur-radius][spread-radius][color];horizontal-offset:水平偏移量，表示陰影相對于文本的水平位置。vertical-offset:垂直偏移量，表示陰影相對于文本的垂直位置。blur-radius:模糊半徑，表示陰影的模糊程度。spread-radius:擴展半徑，表示陰影的擴散大?。蛇x）。color:陰影的顏色。

進階訓(xùn)練—制作“中華剪紙”網(wǎng)頁3【拓展學(xué)習(xí)指導(dǎo)】

文本溢出處理：在網(wǎng)頁設(shè)計中，經(jīng)常會遇到文本內(nèi)容超出其容器寬度的情況。有效的文本溢出處理可以提升用戶體驗，確保信息的可讀性，同時保持頁面布局的整潔。overflow-wrap：控制長單詞或無法在容器內(nèi)完整顯示的URL的換行行為。overflow-wrap屬性的基本語法如下：overflow-wrap:normal|break-word;

進階訓(xùn)練—制作“中華剪紙”網(wǎng)頁3【拓展學(xué)習(xí)指導(dǎo)】

text-overflow：控制當(dāng)文本溢出時如何顯示，例如使用省略號或自定義字符串。text-overflow屬性的基本語法如下：text-overflow:clip|ellipsis|string;ellipsis:會在文本溢出時顯示省略號（...）。clip：直接裁剪超出部分。

進階訓(xùn)練—制作“中華剪紙”網(wǎng)頁3【拓展學(xué)習(xí)指導(dǎo)】

white-space：控制元素內(nèi)的空白如何處理。white-space屬性的基本語法如下：white-space:normal|nowrap|pre|pre-wrap|pre-line;。

進階訓(xùn)練—制作“中華剪紙”網(wǎng)頁3【拓展學(xué)習(xí)指導(dǎo)】

自定義字體是指在網(wǎng)頁上使用非瀏覽器默認(rèn)字體，以提供獨特的視覺體驗。通過CSS的@font-face規(guī)則，開發(fā)者可以加載并應(yīng)用在線字體或本地字體文件。@font-face規(guī)則語法：@font-face{font-family:'FontName';/*定義字體名，用于CSS中引用*/src:url('font-file-path.woff2')format('woff2'),/*指定字體文件路徑和格式*/url('font-file-path.woff')format('woff'),url('font-file-path.ttf')format('truetype');/*可以包含多個格式以增加兼容性*/ font-weight:normal;/*字體粗細(xì)*/ font-style:normal;/*字體風(fēng)格*/}

進階訓(xùn)練—制作“中華剪紙”網(wǎng)頁3【需求說明】

本次任務(wù)主要是利用CSS樣式表、自定義字體、文本陰影、背景漸變等知識點完成“中華剪紙”網(wǎng)頁的制作。網(wǎng)頁的效果是展示具有中國傳統(tǒng)文化特色的剪紙藝術(shù)，通過自定義字體和文本陰影增強標(biāo)題和段落的視覺效果，同時使用背景漸變技術(shù)為特定文本添加色彩豐富的背景效果。保存并瀏覽網(wǎng)頁，預(yù)覽效果如圖所示：

進階訓(xùn)練—制作“中華剪紙”網(wǎng)頁3【制作思路】

"中華剪紙"網(wǎng)頁制作思路是布局兩個具有web類的div容器，每個容器代表頁面中的一個主要內(nèi)容區(qū)塊。第一個div包含一個h3標(biāo)題和一個p段落，分別介紹了中華剪紙的起源和它在中國文化中的意義。第二個div包含一個帶有額外icon類的h3標(biāo)題，一個span元素顯示日期，以及一個img元素和另一個具有chinese-papercutting類的div?？梢苑殖?步來完成：首先制作頁面HTML結(jié)構(gòu)代碼，定義了頁面的主要內(nèi)容和布局框架；其次編寫基礎(chǔ)CSS代碼，設(shè)置頁面的字體、顏色、邊距和內(nèi)邊距等，為頁面提供基本的樣式；接著為頁面添加自定義字體和文本效果，如@font-face規(guī)則引入特色字體，text-shadow屬性為文本添加陰影，增強視覺效果；最后通過CSS樣式增強頁面細(xì)節(jié)，如利用background-clip和linear-gradient為特定文本創(chuàng)建彩色漸變背景效果。

進階訓(xùn)練—制作“中華剪紙”網(wǎng)頁3【制作過程】

1.“中華剪紙”網(wǎng)頁的HTML結(jié)構(gòu)代碼

進階訓(xùn)練—制作“中華剪紙”網(wǎng)頁3【制作過程】

2.編寫基礎(chǔ)CSS代碼定義了整個頁面和特定.web類的基本樣式。通用選擇器*將內(nèi)邊距和外邊距設(shè)置為0，消除了瀏覽器默認(rèn)的樣式差異。body選擇器設(shè)置了頁面的默認(rèn)字體大小和顏色。.web類定義了一個寬度為600px的容器，帶有1px的藍色邊框，內(nèi)邊距為15px，左邊距和上邊距分別為20px和5px。該容器隱藏了溢出內(nèi)容，行高和首行縮進設(shè)置為2em，增加了文本的可讀性。

進階訓(xùn)練—制作“中華剪紙”網(wǎng)頁3【制作過程】

3.為頁面添加自定義字體和文本效果@font-face規(guī)則引入了一個自定義字體myFonts，并指定了字體文件的路徑和樣式屬性，但font-size在@font-face中是無效的。.webh3選擇器為.web類中的h3標(biāo)簽設(shè)置了下邊框和內(nèi)邊距，并應(yīng)用了自定義字體。.webp選擇器為段落文本添加了文本陰影效果。.web.icon選擇器為帶有icon類的元素設(shè)置了背景圖像和文本縮進。.webspan選擇器定義了日期的字體樣式和外邊距。.webimg選擇器為圖片設(shè)置了寬度、內(nèi)邊距、背景色、邊框，并使其浮動到左側(cè)。

進階訓(xùn)練—制作“中華剪紙”網(wǎng)頁3【制作過程】

4.通過CSS樣式增強頁面細(xì)節(jié)定義了一個類.chinese-papercutting的樣式。它將字體族設(shè)置為微軟雅黑，作為首選字體，并指定了一個通用的無襯線字體sans-serif作為備選。顏色被設(shè)置為透明，這樣文字本身不會有顏色顯示。背景是一個從左到右的線性漸變，顏色從#e62b1e漸變到#eca3ee。background-clip屬性設(shè)置為text，意味著漸變背景將僅覆蓋文本，而不是整個元素的背景區(qū)域，從而創(chuàng)建一個文字顏色隨背景漸變變化的效果。設(shè)計并制作如圖4-46所示的“大學(xué)生專屬教程”欄目網(wǎng)頁。頁面使用div、h1、img、p、ul、li、a等元素制作了“大學(xué)生專屬教程”網(wǎng)頁。頁面結(jié)構(gòu)由一個新聞或教程的標(biāo)題、一個示例圖片、一段引導(dǎo)性文字和四個社團海報排版技巧的列表組成，具有視覺吸引力和信息指導(dǎo)性，滿足用戶獲取社團海報設(shè)計靈感和技巧的需求。4動手實踐—制作“大學(xué)生專屬教程”網(wǎng)頁4小結(jié)知識準(zhǔn)備——文本樣式實戰(zhàn)演練——制作“散文欣賞”網(wǎng)頁進階訓(xùn)練——制作“中華剪紙”網(wǎng)頁動手實踐——“大學(xué)生專屬教程”的網(wǎng)頁模塊四CSS3基礎(chǔ)任務(wù)5復(fù)合選擇器、通配符選擇器網(wǎng)頁制作CSSHTML知識準(zhǔn)備——復(fù)合選擇器、通配符選擇器實戰(zhàn)演練——制作“寓言故事”網(wǎng)頁復(fù)合選擇器、通配符選擇器0201進階訓(xùn)練——制作“中華武術(shù)”網(wǎng)頁03動手實踐——制作“網(wǎng)頁頁面設(shè)計思路”的網(wǎng)頁041.掌握復(fù)合選擇器的使用2.掌握通配符選擇器的使用學(xué)習(xí)目標(biāo)：復(fù)合選擇器、通配符選擇器1.結(jié)合中國傳統(tǒng)文化元素和現(xiàn)代設(shè)計理念，培養(yǎng)學(xué)生的文化自信和創(chuàng)新意識，鼓勵他們在網(wǎng)頁設(shè)計中融入中國特色，展現(xiàn)創(chuàng)新能力。2.通過實際的網(wǎng)頁設(shè)計項目，培養(yǎng)學(xué)生的社會責(zé)任感和團隊協(xié)作精神，使他們意識到設(shè)計工作對社會的服務(wù)價值。3.強化學(xué)生的審美素養(yǎng)，提升他們的藝術(shù)鑒賞力和設(shè)計能力。同時，激發(fā)學(xué)生的終身學(xué)習(xí)意識，鼓勵他們不斷更新知識和技能，以適應(yīng)快速變化的信息技術(shù)領(lǐng)域。思政目標(biāo)：復(fù)合選擇器、通配符選擇器

知識準(zhǔn)備--課程引入1哈肯·維姆·萊（H?konWiumLie）在1994年提出了CSS的最初想法，并與當(dāng)時正在設(shè)計Argo瀏覽器的伯特·波斯（BertBos）合作，共同創(chuàng)造了CSS的最初版本。CSS的發(fā)展過程中，W3C組織對CSS的發(fā)展和標(biāo)準(zhǔn)化起到了關(guān)鍵作用，1996年12月，W3C推出了CSS規(guī)范的第一版本，1997年頒布了CSS1.0版本，而1998年發(fā)布了CSS2版本。蒂姆·伯納斯·李（TimBerners-Lee）

1

張鑫旭中國前端開發(fā)社區(qū)中的重要人物之一，以其深厚的專業(yè)知識和對CSS的深刻理解而聞名。他所著的《CSS世界》一書，不僅系統(tǒng)性地介紹了CSS的基礎(chǔ)概念和應(yīng)用方法，還深入探討了CSS在現(xiàn)代網(wǎng)頁設(shè)計中的核心作用和高級技巧。這本書成為了許多前端開發(fā)者學(xué)習(xí)和掌握CSS不可或缺的資源。知識準(zhǔn)備--課程引入張鑫旭

2復(fù)合選擇器

復(fù)合選擇器是一種特殊的選擇器，它允許你將多個簡單選擇器組合在一起，以選擇特定的HTML元素。后代選擇器使用空格分隔兩個選擇器，表示后代元素的選擇基本語法格式：選擇器A選擇器B{樣式屬性:屬性值;}知識準(zhǔn)備—復(fù)合選擇器、通配符選擇器1

2復(fù)合選擇器

子選擇器使用>符號，用來選擇作為另一個元素直接子元素的元素。基本語法格式：選擇器A>選擇器B{樣式屬性:屬性值;}知識準(zhǔn)備—復(fù)合選擇器、通配符選擇器1

2復(fù)合選擇器

相鄰兄弟選擇器使用+符號，用來選擇緊接在另一個元素后的兄弟元素?；菊Z法格式：選擇器A+選擇器B{ 樣式屬性:屬性值;}知識準(zhǔn)備—復(fù)合選擇器、通配符選擇器1

2復(fù)合選擇器

通用兄弟選擇器使用~符號，用來選擇所有跟在另一個元素后的兄弟元素?；菊Z法格式：選擇器A~選擇器B{樣式屬性:屬性值;}知識準(zhǔn)備—復(fù)合選擇器、通配符選擇器1

2復(fù)合選擇器

屬性選擇器允許你根據(jù)元素的屬性或?qū)傩灾祦磉x擇元素。基本語法格式：選擇器[屬性名]{樣式屬性:屬性值;}知識準(zhǔn)備—復(fù)合選擇器、通配符選擇器1

2通配符選擇器

通配符選擇器是一種非常強大的工具，它能夠匹配文檔中的所有元素。通配符選擇器使用星號*表示基本語法格式：*{/*樣式規(guī)則*/}知識準(zhǔn)備—復(fù)合選擇器、通配符選擇器1

2同時應(yīng)用多個樣式

同時應(yīng)用多個樣式到頁面元素時，CSS的繼承和層疊機制確保了樣式的一致性和優(yōu)先級處理。CSS繼承是指某些CSS屬性值從父元素傳遞到子元素的過程。CSS層疊是指當(dāng)多個規(guī)則應(yīng)用于同一元素時，如何確定最終樣式的過程。知識準(zhǔn)備—復(fù)合選擇器、通配符選擇器1

實戰(zhàn)演練—制作“寓言故事”網(wǎng)頁2【需求說明】

本次任務(wù)主要是利用HTML、CSS等知識點完成“寓言故事”網(wǎng)頁的制作。網(wǎng)頁的效果是在居中的頁面布局中展示寓言故事集的標(biāo)題和導(dǎo)航菜單，每個寓言故事作為一個獨立的章節(jié)，配有背景圖片和文本內(nèi)容。保存后瀏覽網(wǎng)頁，效果如圖所示：

實戰(zhàn)演練—制作“散文欣賞”網(wǎng)頁2【制作思路】

"寓言故事集"網(wǎng)頁制作思路是由header、nav、section、footer等語義化元素組成，header元素包含了網(wǎng)站的標(biāo)題h1和導(dǎo)航欄nav，導(dǎo)航欄中有一個無序列表ul，列出了兩個故事的鏈接，指向頁面內(nèi)的不同部分，即#story1和#story2。section元素定義了頁面的主要內(nèi)容區(qū)域，每個section代表一個獨立的寓言故事。

實戰(zhàn)演練—制作“散文欣賞”網(wǎng)頁2【制作過程】

1.“寓言故事”網(wǎng)頁的HTML結(jié)構(gòu)代碼

實戰(zhàn)演練—制作“散文欣賞”網(wǎng)頁2【制作過程】

2.定義頁面基本樣式和頭部樣式body選擇器設(shè)置了頁面字體、行間距、顏色，并規(guī)定了頁面的寬度和居中顯示，同時添加了邊框。header選擇器為頁眉設(shè)置了背景和文字顏色，以及文本居中對齊。headerh1移除了標(biāo)題的外邊距。navul和navulli定義了導(dǎo)航列表的樣式，去除默認(rèn)的列表項目符號和內(nèi)邊距，將列表項顯示為行內(nèi)元素，并在項目之間添加了間隔。nava為導(dǎo)航鏈接設(shè)置了顏色和去除了下劃線。這些樣式共同作用，創(chuàng)建了一個簡潔、清晰的頁面頭部和導(dǎo)航菜單。

實戰(zhàn)演練—制作“散文欣賞”網(wǎng)頁2【制作過程】

3.為section元素設(shè)置樣式定義了.story類選擇器的樣式，用于設(shè)置故事內(nèi)容區(qū)域的外觀和布局。margin屬性為故事區(qū)域上下外邊距20px，無左右外邊距，確保頁面元素間有足夠的空間。padding屬性為故事文本內(nèi)邊距20px，創(chuàng)建舒適的閱讀空間。border屬性添加了1像素的灰色邊框。background屬性設(shè)置了背景圖片，background-size:cover;確保圖片覆蓋整個元素，而background-position-x:center;保證圖片在水平方向上居中。.storyp選擇器為段落設(shè)置了字體大小、行高和首行縮進，增強了文本的可讀性。

實戰(zhàn)演練—制作“散文欣賞”網(wǎng)頁2【制作過程】

4.添加交互效果.story:hover規(guī)則為故事內(nèi)容區(qū)域添加了懸停效果，當(dāng)鼠標(biāo)懸停時文本會加粗，增強視覺反饋。button選擇器定義了按鈕的樣式，包括背景顏色、文字顏色、內(nèi)邊距和光標(biāo)形狀，以提供清晰的按鈕視覺效果和交互提示。button:hover規(guī)則為按鈕添加懸停效果，改變背景顏色，以提供更明顯的交互反饋。.moral類設(shè)置了寓意段落的默認(rèn)不顯示和樣式，使用display:none;隱藏內(nèi)容，margin-top和font-style提供間距和字體樣式。footer選擇器將頁腳文本居中對齊，以保持頁面設(shè)計的整潔和一致性。

進階訓(xùn)練—制作“中華武術(shù)”網(wǎng)頁3【拓展學(xué)習(xí)指導(dǎo)】

網(wǎng)頁布局是構(gòu)建用戶界面的基礎(chǔ)，它決定了網(wǎng)頁內(nèi)容的組織和呈現(xiàn)方式。一個標(biāo)準(zhǔn)的網(wǎng)頁布局通常由以下幾個關(guān)鍵部分組成：（1）頂部區(qū)域：主要提供品牌識別和導(dǎo)航功能