第5章

常見布局流01學習目標02課程思政目標03知識點04本章練習PPT模板/moban/

學習目標理解不同布局流的特點及使用場景；鞏固使用標準流制作大體框架的布局能力；鞏固使用浮動流完成局部區(qū)域的容器布局能力；掌握相對定位、絕對定位、固定定位的區(qū)別及相應(yīng)的屬性設(shè)置；能合理定義定位流技術(shù)的參照容器；掌握元素浮動或定位后版面異常的解決方法。第5章

常見布局流1通過本章學習，要求達到以下既定目標：課程思政目標2“讓中國挺起脊梁的科學家”，緬懷老一輩科學家為中國的富強所貢獻的光輝事跡?！拔⒐?023”，凡人善舉，傳遞著普通人的溫暖，鼓勵每個人在生活中傳遞每一份看似微小實則有力的溫暖行為。了解本章成語的出處，理解成語含義與知識點理解的結(jié)合：“鱗次櫛比”，宿舍集體生活中，物品的擺放應(yīng)該也要整齊、規(guī)范?！疤祚R行空”，學習知識時要具備發(fā)散思維，多角度、不受約束地思考問題，往往能打開更多的知識之窗?！皬埑谟卸取?，校園生活宜有緊張有放松，合理調(diào)整學習狀態(tài)、個人心情?！皹凡凰际瘛?，強調(diào)家國情懷，中國人當有中國魂，勿因國外環(huán)境優(yōu)越而忘本。第5章

常見布局流3知識點5.1標準文檔流布局5.2浮動流布局相對定位5.3定位流布局第5章

常見布局流絕對定位固定定位5.4網(wǎng)格、彈性盒子等流派5.1標準文檔流布局3知識點5.1標準文檔流布局文檔流指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。并最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。標準文檔流主要通過盒模型，通過設(shè)置元素的display、width、height、margin、padding、border等屬性，來控制元素的大小和位置，具有靈活性強、易于控制的特點，常用于構(gòu)建頁面的基礎(chǔ)布局結(jié)構(gòu)。3知識點知識點：標準文檔流布局特點記憶關(guān)鍵詞：鱗次櫛比、秩序井然關(guān)鍵詞解析：認識標準文檔流，更像是庖丁解牛，所有元素按照從上到下，從左到右的編排規(guī)則。對于采用標準文檔流布局，簡單點可以理解為，一行或幾行采用一個大容器來搭建框架即可?！对娊?jīng)?周頌?良耜》：“獲之挃挃，積之栗栗。其崇如墉，其比如櫛。”鱗次櫛比——意思是像魚鱗和梳子齒那樣有次序地排列著，多用來形容房屋或船只等排列得很密很整齊。5.1標準文檔流布局3知識點【案例1】完成“寧波杉杉股份有限公司”所示的頁面框架結(jié)構(gòu)，如圖5-1所示。5.1標準文檔流布局頁頭海報區(qū)內(nèi)容區(qū)頁腳3知識點【案例2】完成“海瀾集團”所示的頁面框架結(jié)構(gòu)，如圖5-6所示。5.1標準文檔流布局頁頭（底圖為海報圖）

內(nèi)容區(qū)頁腳導(dǎo)航條3知識點【案例3】完成“稻花香集團”首頁的頁面框架結(jié)構(gòu)，如圖5-11所示。5.1標準文檔流布局5.2浮動流布局3知識點5.2浮動流布局浮動流布局是通過設(shè)置元素的float屬性，使其脫離正常布局流，并根據(jù)浮動方向排列在頁面中。浮動流布局常用于構(gòu)建多列布局、圖文混排等場景。需要注意的是，浮動布局會影響元素的高度計算和文本環(huán)繞等特性，需要謹慎使用。5.2浮動流布局3知識點知識點：浮動流布局特點記憶關(guān)鍵詞：天馬行空關(guān)鍵詞解析：浮動元素會脫離正常的文檔流，浮動在其他內(nèi)容之上。地面如同文檔流，浮動流元素浮在上空，可謂強調(diào)一個“浮”字。浮動流十分靈活，不受標準流約束。東漢?班固《漢書?禮樂志》：“太一況，天馬下，沾赤汗，沫流赭。志俶儻，精權(quán)奇，籋浮云，晻上馳?！焙笫罁?jù)此典故引申出成語“天馬行空”。天馬行空——指天馬奔馳于天空。形容才華橫溢，氣勢豪放，不受約束。也形容言論空泛，不著邊際。5.2浮動流布局3知識點【案例4】完成下圖所示的某個欄目的頁面布局，如圖5-16所示。內(nèi)容區(qū)導(dǎo)航（左浮動）內(nèi)容（右浮動）5.2浮動流布局3知識點【案例5】局部使用浮動流布局完成橫向?qū)Ш綏l效果，如圖5-25所示。5.2浮動流布局3知識點【案例6】打開“第5章-布局-浮動流4-素材.html”，使用浮動屬性完成ul、dl標簽內(nèi)各子項的排列，完成如圖5-29所示的“欄目一”和“站點地圖”區(qū)域的布局。5.2浮動流布局3知識點知識點：浮動流布局特點記憶關(guān)鍵詞：天馬行空關(guān)鍵詞解析：浮動元素會脫離正常的文檔流，浮動在其他內(nèi)容之上。地面如同文檔流，浮動流元素浮在上空，可謂強調(diào)一個“浮”字。浮動流十分靈活，不受標準流約束。東漢?班固《漢書?禮樂志》：“太一況，天馬下，沾赤汗，沫流赭。志俶儻，精權(quán)奇，籋浮云，晻上馳。”后世據(jù)此典故引申出成語“天馬行空”。天馬行空——指天馬奔馳于天空。形容才華橫溢，氣勢豪放，不受約束。也形容言論空泛，不著邊際。5.2浮動流布局3知識點【案例7】解決容器坍塌現(xiàn)象。為預(yù)防高度未設(shè)置等造成容器坍塌的情況，有時會在大容器的后方添加一個空白內(nèi)容的容器，專門用于清除浮動流，讓文檔回歸標準流布局。【案例8】使用ul標簽完成如圖5-36所示的圖文混排效果。5.2浮動流布局3知識點【解決策略】思路（一）：使用2個ul標簽，分別對圖、文字進行組織，如圖5-37所示。從圖文配對關(guān)系、js腳本節(jié)點控制、樣式維護的角度來看，都不合理。圖1配圖的文字1圖2配圖的文字2圖3配圖的文字3圖4配圖的文字4

5.2浮動流布局3知識點【解決策略】思路（二）：使用一個ul標簽，每張圖片和對應(yīng)文字放入在li標簽內(nèi)，如圖5-38所示。lililili圖1配圖的文字1圖2配圖的文字2圖3配圖的文字3圖4配圖的文字4我們采用思路二的方式完成本次練習。5.3定位流布局3知識點5.3定位流布局定位流布局將介紹以下這三種：相對定位（relative）絕對定位（absolute）固定定位（fixed）元素無論采用哪一種定位，該元素就會脫離正常的標準流，按設(shè)定的坐標值進行偏移。5.3定位流布局3知識點知識點：定位流布局特點記憶關(guān)鍵詞：樂不思蜀關(guān)鍵詞解析：元素脫離標準文檔流中原來的位置（元素的家），跑到其他地方，家也不愿意回了。相對定位方式，依然會把家的位置占著，寧愿空著也不會給其他元素使用。采用絕對定位和固定定位，會把原來的家園讓給其他元素。過多、復(fù)雜的相對/絕對定位設(shè)置也會帶來不可預(yù)測的布局災(zāi)難。東晉·裴松之注引《漢晉春秋》：“司馬文王與禪宴，為之作故蜀技，旁人皆為之感愴，而禪喜笑自若…….他曰，王問禪曰：‘頗思蜀否？'禪曰：‘此間樂，不思蜀?！睒凡凰际瘛缚鞓返貌辉偎寄钍駠?；比喻樂而忘返或樂而忘本留戀他鄉(xiāng)。5.3定位流布局3知識點5.3.1相對定位Relativerelative讀音——英[?rel?t?v]相對（relative）定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，可以通過設(shè)置垂直或水平位置，讓這個元素“相對于”它的起點進行移動。用句話理解相對定位的話，可以形容為“吃著皇糧不干事”。元素跑到其他定位點，而原來蹲的坑也不允許其他元素使用。說文雅點，可以用“尸位素餐”來形容。用法示例：#box_relative{position:relative;left:30px;top:20px;}5.3定位流布局3知識點【案例9】用相對定位來完成如圖5-41所示的容器布局。容器A容器B容器C容器A容器B容器C【案例10】如圖5-43所示的“欄目名稱2”容器處hover狀態(tài)下，該容器產(chǎn)生右移一小段，嘗試完成該特效的代碼。欄目名稱1欄目名稱2欄目名稱3欄目名稱1欄目名稱2欄目名稱35.3定位流布局3知識點5.3.2絕對定位Absoluteabsolute讀音——英[??bs?lu?t]絕對（absolute）定位使得元素從文檔流完全刪除，元素原先在正常文檔流中所占的空間會關(guān)閉。因為絕對定位的框與文檔流無關(guān)，所以它們可以覆蓋頁面上的其它元素?？梢酝ㄟ^設(shè)置z-index屬性來控制這些框的堆放次序。容器對象挪走后，空間釋放給后面，就好像該元素原來不存在一樣。注意：采用絕對定位的元素，切記要給它的其中一個祖先元素設(shè)置為相對定位，如同確定一個參照物來進行移動。用法示例：#box_relative{position:absolute;left:30px;top:20px;}5.3定位流布局3知識點【案例11】完成新聞版面中文字欄浮在圖片上方的效果，如圖5-46所示。5.3定位流布局3知識點【案例12】在案例11的基礎(chǔ)上，完成如圖5-48所示右上角的角標效果。這種裝飾元素經(jīng)常在購物網(wǎng)頁中見到，如圖片上添加了“爆款”、“熱門”等小圖標。5.3定位流布局3知識點【解決策略】思路一：在photoshop中將小圖標放到圖片中，對于少數(shù)幾張圖，且不需要經(jīng)常更新的網(wǎng)頁來說，確實可行。但對于門戶網(wǎng)站圖片數(shù)達天量級別的場景來說，顯然費勁又破壞了原始圖像。思路二：用絕對定位方式，在圖片右上角增加一個容器，角標圖片以容器背景圖形式出現(xiàn)。為什么采用背景圖，而不是直接插入img標簽，原因在于以下兩點：良好的網(wǎng)頁代碼因遵循“內(nèi)容與形式分離”，內(nèi)容指的是HTML中的元素（網(wǎng)頁中告訴瀏覽者的實際信息），形式指的是這些元素的外觀（是否美觀，其實并不影響信息的獲?。?。裝飾類的圖標作為展示的外觀、形式，應(yīng)當作為容器背景圖出現(xiàn)。從維護角度出發(fā)，如果該頁面中有上百張圖片需要加角標圖片，采用HTML結(jié)構(gòu)中插入img標簽的話，意味著要多寫上百個img標簽。此外，還要考慮角標圖片文件更名的情況。這里，我們采用思路二的方式完成該練習，5.3定位流布局3知識點5.3.3固定定位Fixedfixed讀音——英[f?kst]固定（fixed）定位元素會脫離標準流,不占用布局中的位置,漂浮在任何元素上方。固定定位只相對于瀏覽器可視窗口進行定位，不管瀏覽器大小或者滾屏多少,都是基于可視窗口顯示，與父元素沒有任何關(guān)系，可以理解為“以瀏覽器為參照物，和父元素沒有任何關(guān)系”。固定定位的應(yīng)用場景主要有固定導(dǎo)航、固定側(cè)邊欄、廣告。用法示例：#to-top{position:fixed;right:50px;bottom:50px;}5.3定位流布局3知識點【案例13】完成如圖5-50所示的網(wǎng)頁頁腳區(qū)域附件的“返回頂部”鏈接。5.3定位流布局3知識點【案例14】完成如圖5-53所示的頁頭固定定位在頁面頂部的效果。5.3定位流布局3知識點【案例15】觀察下面兩張圖，如圖5-55、圖5-56所示，完成瀏覽器窗口滾屏期間，導(dǎo)航欄吸頂（吸附）效果。滾屏前滾屏后5.4網(wǎng)格、彈性盒子等流派3知識點5.4網(wǎng)格、彈性盒子等流派這些布局流派特別是在響應(yīng)式布局和導(dǎo)航欄布局中經(jīng)常使用，所謂響應(yīng)式布局，就是面對不同分辨率的設(shè)備，能靈活自我調(diào)整布局的技術(shù)。當然這些內(nèi)容不是三言兩語可以介紹的清楚，需要讀完本書后自行學習。5.4網(wǎng)格、彈性盒子等流派3知識點網(wǎng)格流（GridLayout）簡單點理解就是，在一個被聲明為網(wǎng)格的容器中，其所有子元素自動被認定為網(wǎng)格單元格，而這些網(wǎng)格單元格在沒有被顯式設(shè)置明確位置時，瀏覽器將會自動為這些網(wǎng)格單元格的位置進行計算，按照元素出現(xiàn)的先后順序，依次從左向右，或從上到下排列，如圖5-58所示。5.4網(wǎng)格、彈性盒子等流派3知識點再比如，以Bootstrap柵格系統(tǒng)的網(wǎng)格流技術(shù)，常見的柵格布局有12柵格、16柵格。不管瀏覽器窗口、容器多大，以將其寬度劃分成12柵格，只需要申明元素占N個柵格寬度來進行定位，并非之前所學的以px像素值為寬度。彈性盒子（FlexLayout）布局，其核心原理是將容器內(nèi)的子元素排列在一個或多個軸上，同時保持它們之間的對齊和分布。Flexbox模型引入了兩個主要軸：主軸和交叉軸，控制彈性項目在主軸和交叉軸方向上的對齊和分布。5.4網(wǎng)格、彈性盒子等流派3知識點知識點：響應(yīng)式布局記憶關(guān)鍵詞：張弛有度關(guān)鍵詞解析：網(wǎng)格流和彈性盒子流主要是一種寬度自適應(yīng)技術(shù)，針對不同分辨率的設(shè)備來自行調(diào)整布局?！抖Y記》張而不弛，文武弗能也；弛而不張，文武弗為也。一張一弛，文武之道也。張弛有度——指的是松緊有度，收放自如。5.5基礎(chǔ)練習4本章練習【練習1】絕對定位中的z-index屬性可以幫助我們決定元素的上下重疊順序。利用z-index屬性將多張圖片層疊在一起，效果如圖5-59所示。5.5基礎(chǔ)練習4本章練習【練習2】以下兩個大容器的位置重疊，構(gòu)成選項卡。實現(xiàn)如圖5-63所示的選項卡切換效果?！窘鉀Q策略】“要聞”、“廣州新聞”分別用兩個面積相同的容器裝內(nèi)容，兩個容器采用絕對定位方式重疊。其中一個容器設(shè)置顯示的時候，另外一個容器隱藏，或者是更改兩個容器的z-index屬性，從而完全覆蓋。5.6擴展練習4本章練習【練習1】完成如圖5-69所示的“最新要聞”區(qū)域浮在海報上的效果。5.6擴展練習4本章練習【練習2】運用標準流、浮動流、定位流布局知識，完成如圖5-70所示效果。本章結(jié)束高質(zhì)量的代碼就是對程序自己最好的注釋。當你打算要添加注釋時，問問自己，“我如何能改進編碼以至于根本不需要添加注釋？”改進你的代碼，然后才是用注釋使它更清楚?！猄teveMcConnell謝謝觀看第6章

個人網(wǎng)頁布局實戰(zhàn)01學習目標02課程思政目標03知識點04本章練習PPT模板/moban/

學習目標掌握對頁面效果圖進行準確的切片，輸出成所需的圖片格式；強化對圖片文件進行合理地命名；培養(yǎng)能完成個人網(wǎng)站的頁面布局能力；培養(yǎng)頁面布局過程中排錯、糾錯的能力；進一步培養(yǎng)代碼整理的習慣。第6章

個人網(wǎng)頁布局實戰(zhàn)1通過本章學習，要求達到以下既定目標：課程思政目標2“切片”練習，強調(diào)“精確到一個像素”的精度，培養(yǎng)學生嚴謹治學的態(tài)度?！拔淖炙夭牡奶崛　?，要養(yǎng)成善于借助周邊工具來快速完成項目的職業(yè)素質(zhì)?！按a整理”階段，培養(yǎng)學生對細節(jié)的認真考究，避免虎頭蛇尾的行為。個人獨立完成專題練習，培養(yǎng)學生的獨立意識，強化與他人溝通的能力。第6章

個人網(wǎng)頁布局實戰(zhàn)3知識點6.1將網(wǎng)頁截圖進行切片6.2網(wǎng)站目錄、文件整理6.3搭建項目并進行頁面布局6.4代碼整理第6章

個人網(wǎng)頁布局實戰(zhàn)6.1將網(wǎng)頁截圖進行切片3知識點6.1將網(wǎng)頁截圖進行切片將如圖6-1所示的效果圖進行切片，要求圖片盡可能少的空白區(qū)域以減少圖片文件大??；圖片尺寸盡可能湊個整數(shù)或偶數(shù)以方便計算盒子的相關(guān)間距；生活照片類圖片采用jpg格式，圖標類圖片盡可能采用支持透明底的png格式。6.1將網(wǎng)頁截圖進行切片3知識點（1）在photoshop軟件中打開“unit6-img\教材插圖\圖6-1單頁面網(wǎng)站效果.png”，在“視圖”菜單中激活“標尺”選項。（2）觀察圖片，明確哪些內(nèi)容是需要輸出為圖片格式。一句話表述“可以用簡單的css樣式實現(xiàn)的內(nèi)容原則上就不要輸出圖片”。（3）建立第一根參考線，要求參考線盡可能貼近圖像內(nèi)容，減少圖像文件大小，如圖6-2所示。6.1將網(wǎng)頁截圖進行切片3知識點（4）使用框選工具，建立選區(qū)后，用上下光標鍵調(diào)整圖標在選區(qū)中間，如圖6-3所示。6.1將網(wǎng)頁截圖進行切片3知識點有了這個選區(qū)作為定位，Photoshop默認對象之間有磁吸（吸附）功能，我們可以建立另外上、下、右三根參考線了，如圖6-4所示。有了這個選區(qū)作為定位，Photoshop默認對象之間有磁吸（吸附）功能，我們可以建立另外上、下、右三根參考線了，如圖6-4所示。6.1將網(wǎng)頁截圖進行切片3知識點（5）使用切片工具給各個分割好的區(qū)域進行切片，并且命名切片，如圖6-7所示。圖標類命名一般為icon+序號或者icon+英文關(guān)鍵字。6.1將網(wǎng)頁截圖進行切片3知識點（6）選擇“文件”-“輸出為web所用格式”，在如圖6-8所示的對話框中，檢查一下輸出的格式，點擊“存儲”。6.1將網(wǎng)頁截圖進行切片3知識點在彈出的文件存儲對話框中，切片切記選中為“所有用戶切片”，如圖6-9所示。6.2網(wǎng)站目錄、文件整理3知識點6.2網(wǎng)站目錄、文件整理站點根目錄文件夾命名為“site”或者“website”，里面包含如圖6-11所示的“css”、“images”兩個文件夾，將切圖得到的圖片放入在images文件夾中。6.3搭建項目并進行頁面布局3知識點6.3搭建項目并進行頁面布局效果圖屬于文字類頁面，頁頭劃分的不是很明確，有點類似長篇文章結(jié)構(gòu)，所以我們將用<section>區(qū)塊標簽設(shè)計，當然也可以采用傳統(tǒng)的<div>標簽搭建主要框架。嚴格做到以下幾點要求：用注釋標注各大容器的結(jié)構(gòu)和css樣式范圍。盡可能的簡化HTML結(jié)構(gòu)，不添加非必須的父容器。定義通用樣式，可以省去許多代碼量。寫css選擇器時，盡量在每個選擇器前面加上統(tǒng)一的父級id或class，看起來會非常整齊，便于維護。每個容器應(yīng)該填寫height屬性，以免出現(xiàn)坍塌。給大的容器添加顏色各異的底色，這會有助于及時判定異常所在。寫完大的容器對應(yīng)的HTML代碼后，及時調(diào)試看結(jié)果，結(jié)果無誤后在hbuilder中將這完成的部分代碼進行折疊，將會省去許多滾屏時間。3知識點（1）搭建第一個版塊<section>容器的HTML結(jié)構(gòu)，代碼如圖6-12所示。6.3搭建項目并進行頁面布局（2）編寫對應(yīng)css樣式代碼，如圖6-13所示。3知識點（3）搭建第二個版塊<section>容器的HTML結(jié)構(gòu)，代碼如圖6-14所示。6.3搭建項目并進行頁面布局3知識點（4）編寫對應(yīng)的CSS代碼，如圖6-15所示。6.3搭建項目并進行頁面布局3知識點（5）搭建第三個版塊<section>容器的HTML結(jié)構(gòu)，代碼如圖6-16所示。6.3搭建項目并進行頁面布局3知識點（6）編寫對應(yīng)的CSS代碼，如圖6-17所示。6.3搭建項目并進行頁面布局3知識點（7）搭建第四個版塊<section>容器的HTML結(jié)構(gòu)，代碼如圖6-18所示。6.3搭建項目并進行頁面布局3知識點（8）編寫對應(yīng)的CSS代碼，如圖6-19所示。6.3搭建項目并進行頁面布局3知識點（9）制作頁腳部分，HTML結(jié)構(gòu)代碼如圖6-20所示。6.3搭建項目并進行頁面布局3知識點（10）編寫對應(yīng)的CSS代碼，如圖6-21所示。6.3搭建項目并進行頁面布局我們回滾屏幕到“版塊四”的CSS樣式中，修改代碼如圖6-22所示。3知識點6.3搭建項目并進行頁面布局3知識點針對箭頭變大的情況，修改個別屬性，代碼如圖6-23所示。6.3搭建項目并進行頁面布局3知識點（11）保存文件，預(yù)覽檢查箭頭樣式無誤后，繼續(xù)完成右側(cè)部分對應(yīng)CSS代碼，如圖6-24所示。6.3搭建項目并進行頁面布局6.4代碼整理3知識點6.4代碼整理接近布局的最終效果的時候，將輔助用的邊框、背景色等屬性進行刪除，并再次預(yù)覽頁面效果。接下來要將內(nèi)置樣式表修改為外部樣式表。最大的好處，是可以將這些樣式分享給這個網(wǎng)站的其他頁面使用，盡管這個網(wǎng)站只有一個頁面。注意，改為外部樣式表后，圖片的src屬性大概率因路徑調(diào)整而要修改。6.4代碼整理3知識點（1）在hbuilder的項目管理器中，css文件夾下新建一個名字為“style”的css文件，如圖6-25所示。6.4代碼整理3知識點（2）打開“style.css”文件，將index.html的<style>標簽內(nèi)所有代碼復(fù)制到里面，如圖6-26所示。6.4代碼整理3知識點（3）修改圖片路徑。由于圖像文件有點多，我們盡可能采用軟件的“替換”功能快速完成，點擊“查找”菜單的“替換”命令，在窗體右上角錄入以下信息后，記得將文件存盤，如圖6-27所示。（4）在index.html中增加<link>標簽鏈接外部樣式表，代碼如圖6-28所示。6.4代碼整理3知識點（5）將index.html和style.css保存一下，預(yù)覽最終的頁面效果。6.5擴展練習4本章練習【練習1】打開資源包中的“第6章擴展練習\練習1\單頁面?zhèn)€人網(wǎng)站-2.png”文件，觀察如圖6-29所示的頁面效果，按本章講授的知識點進行布局。4本章練習【練習2】打開資源包“第6章擴展練習\練習2\獨立完成的專題練習”文件夾，內(nèi)有50張帶編號的網(wǎng)頁截圖，如圖6-30所示，請按學號挑選對應(yīng)編號的網(wǎng)頁截圖來還原網(wǎng)頁。6.5擴展練習本章結(jié)束程序應(yīng)該是寫給其他人讀的，讓機器來運行它只是一個附帶功能?！狧aroldAbelson&GeraldJaySussman謝謝觀看第7章CSS進階知識01學習目標02課程思政目標03知識點04本章練習PPT模板/moban/

學習目標理解外部樣式表、內(nèi)部樣式表的特點；進一步了解CSS樣式優(yōu)先級別；重點掌握關(guān)系選擇器、屬性選擇器、偽類選擇器、偽元素選擇器的用法；掌握過渡效果的屬性設(shè)置；掌握@keyframes規(guī)則以實現(xiàn)動畫效果；進一步強化設(shè)置樣式時能挑選恰當?shù)倪x擇器的能力。第7章CSS進階知識1通過本章學習，要求達到以下既定目標：課程思政目標2“疊矩重規(guī)”，強調(diào)如同樣式層疊一樣，專業(yè)知識也都是前后銜接，知識點有所重復(fù)介紹。“子承父業(yè)”，非物質(zhì)文化遺產(chǎn)，是中華文明綿延傳承的生動見證，許多非遺因為后輩無人繼承導(dǎo)致消失在歷史長河?！笆肿阒椤?，促進各民族廣泛交往交流交融，促進各民族在理想、信念、情感、文化上的團結(jié)統(tǒng)一，守望相助、手足情深。民族關(guān)系處理不當，容易產(chǎn)生如俄烏戰(zhàn)爭、盧旺達內(nèi)戰(zhàn)等局面。“有的放矢”，眾所周知，中國外交部的發(fā)言一直是有的放矢，比如關(guān)于新冠病毒溯源問題。第7章CSS進階知識案例中的唐詩、宋詞、元曲，屬于中國五千年文化的瑰寶，提升對漢語文化的自豪感。了解本章成語的出處，理解成語含義與知識點理解的結(jié)合：3知識點6.1外部樣式表6.2進一步了解CSS樣式優(yōu)先權(quán)6.3掌握更多的CSS選擇器6.4CSS過渡與動畫第7章CSS進階知識關(guān)系選擇器屬性選擇器偽類選擇器偽元素選擇器過渡效果transition@keyframes規(guī)則7.1外部樣式表3知識點7.1外部樣式表因為案例內(nèi)容代碼量不大，前建議初學者先在文件內(nèi)部寫，等完全寫完樣式后，才采用外部css文件的寫法。一個復(fù)雜的網(wǎng)站，主頁、欄目頁、詳情頁有自己的css外部文件，但很多樣式可以在許多文件中共享使用，所以在實際網(wǎng)站中，往往一個HTML頁面鏈接了多個外部樣式表，如圖7-1所示。7.1外部樣式表3知識點知識點：外部樣式表的樣式復(fù)用記憶關(guān)鍵詞：疊矩重規(guī)關(guān)鍵詞解析：許多html文件使用到的重復(fù)的css樣式，采用外部樣式表存放，可謂“重規(guī)”。外部樣式表有若干個，當一個html文件引用了多個外部樣式表，換言之就是有多個外部樣式的若干個樣式一起疊加在該文件中，可謂“疊矩”?！度龂尽な駮むS正傳》：“君臣協(xié)美于朝，黎庶欣戴于野，動若重規(guī)，靜若迭矩。”疊矩重規(guī)——意思是規(guī)與規(guī)相重，矩矩與相迭，度數(shù)相同，完全符合。原比喻動靜合乎法度或上下相合，后形容模仿、重復(fù)。7.2進一步了解CSS樣式優(yōu)先權(quán)3知識點7.2進一步了解CSS樣式優(yōu)先權(quán)從樣式表代碼所在位置來說：內(nèi)部樣式表比外部樣式表優(yōu)先。從樣式表文件內(nèi)部來說：

!important>內(nèi)聯(lián)樣式（行內(nèi)樣式）>ID選擇器>類選擇器>元素選擇器（標簽選擇器）7.3掌握更多的CSS選擇器4本章練習7.3掌握更多的CSS選擇器CSS包含了數(shù)十種選擇器，只要學習過程中我們碰到與我們所學知識不同的選擇器，屆時在百度搜索相關(guān)資料。7.3.1關(guān)系選擇器關(guān)系選擇器是能夠根據(jù)其它元素的關(guān)系選擇適合的元素選擇器。關(guān)系選擇器分為子元素選擇器、后代選擇器、相鄰兄弟選擇器、兄弟元素選擇器。后代選擇器我們在前面的章節(jié)大量使用，這里就不論述了。3知識點1.子元素選擇器子元素選擇器作用是找到指定標簽的直接子元素。兩個選擇器之間使用“>”號連接，中間不要留空格，否則選擇器無法生效。用法示例：

.footer>p{color:red;}先找到類名為".footer"的標簽，然后在這個標簽中查找所有名稱叫做"p"的兒子元素。7.3掌握更多的CSS選擇器3知識點知識點：子元素選擇器特點記憶關(guān)鍵詞：子承父業(yè)關(guān)鍵詞解析：子元素選擇器只會查找兒子，不會查找其他嵌套的標簽，簡單地說，父親元素尋找的傳承目標只能是兒子，不能是孫子、曾孫等隔代傳承。7.3掌握更多的CSS選擇器宋·釋道原《景德傳燈錄·利山和尚》：“僧問：不歷僧只獲法身，請師直指。師云：子承父業(yè)?！弊映懈笜I(yè)——意思是指兒子繼承父親的事業(yè)。3知識點【案例1】請嘗試如圖7-4所示的代碼，并在子元素選擇器的“>”前面添加空格后再預(yù)覽效果。7.3掌握更多的CSS選擇器3知識點2.相鄰兄弟選擇器相鄰兄弟選擇器可選擇緊接在另一元素后的元素，強調(diào)后者與前者是相鄰關(guān)系，且二者有相同父元素?？梢岳斫獬桑盒珠L+第一個弟弟。例如，如果要增加緊接在h1元素（哥哥）后緊接著出現(xiàn)的段落p元素（弟弟）的文字顏色，可以這樣寫：h1+p{color:red;}7.3掌握更多的CSS選擇器3知識點知識點：相鄰兄弟選擇器特點記憶關(guān)鍵詞：近水樓臺關(guān)鍵詞解析：兄弟元素選擇器只會選中與哥哥（“+”號前面的元素）緊挨著的弟弟，而且這個弟弟符合“+”號后方指定的類型。7.3掌握更多的CSS選擇器宋·俞文豹《清夜錄》：“范文正公鎮(zhèn)錢塘，兵官皆被薦，獨巡檢蘇麟不見錄，乃獻詩云：‘近水樓臺先得月，向陽花木易逢春?！苯畼桥_——指靠近水邊的樓臺；比喻由于接近某人或者事物，而搶先得到某種利益或便利。3知識點3.兄弟元素選擇器兄弟元素選擇器是選擇當前元素的所有同級元素?？梢岳斫獬桑盒珠L~所有弟弟。例如，如果要增加緊接在h1元素后出現(xiàn)的所有段落p元素的行高，可以這樣寫：h1~p{line-height:1.5em;} 7.3掌握更多的CSS選擇器3知識點知識點：兄弟元素選擇器特點記憶關(guān)鍵詞：手足之情關(guān)鍵詞解析：與相鄰兄弟選擇器不同，兄弟元素選擇器不僅關(guān)心緊挨著參考元素的下一個兄弟，還關(guān)心所有在參考元素之后的所有兄弟。正如二哥分糖果時，只要是他的任何弟弟妹妹，都會收到糖果，但這位哥哥并不會把糖果留給大哥和自己。7.3掌握更多的CSS選擇器唐·李華《吊古戰(zhàn)場文》：“誰無兄弟，如足如手?！彼巍ぬK轍《為兄軾下獄上書》：“臣竊哀其志，不勝手足之情?！笔肿阒椤馑际潜扔餍值艿母星楹芎?。3知識點【案例2】使用兄弟元素選擇器完成如圖7-6所示的特定行的樣式。7.3掌握更多的CSS選擇器3知識點7.3.2屬性選擇器屬性選擇器是CSS中一種強大的選擇器，它允許我們根據(jù)元素的屬性及屬性值來選擇特定的元素，從而實現(xiàn)精準的樣式控制。它主要的應(yīng)用場景：為表單字段設(shè)置統(tǒng)一樣式、模塊化CSS以避免命名沖突、標識表單控件的不同交互狀態(tài)、定制多語言環(huán)境下的文本展示、響應(yīng)不同媒體查詢條件等。屬性選擇器寫法為[屬性]，用法示例：a[href]{color:red;}/*只對有href屬性的a元素應(yīng)用樣式*/7.3掌握更多的CSS選擇器3知識點知識點：屬性選擇器特點記憶關(guān)鍵詞：有的放矢關(guān)鍵詞解析：CSS屬性選擇器允許針對具有特定屬性或?qū)傩灾档脑貋響?yīng)用樣式。通俗理解成針對具有特定“屬性箭靶”的元素來“發(fā)射”樣式規(guī)則的。7.3掌握更多的CSS選擇器宋代葉適《水心別集十五終論》：“論立于此，若射之有的也，或百步之外，或五十步之外，的必先立，然后挾弓注矢以從之?！庇械姆攀浮馑际欠偶獙拾凶?。比喻說話做事有針對性。3知識點常見的大部分用法如表7-1所示。7.3掌握更多的CSS選擇器寫法作用范例[屬性]選擇所有具有指定屬性的元素，不論其屬性值為何。選擇所有帶有'type'屬性的元素[type]{……}[屬性="值"]選擇屬性值完全等于指定值的元素。選擇href屬性值完全等于指定URL的元素[href=""]{……}[屬性^="值"]選擇屬性值以指定值開始的元素。選擇href屬性值以'https://'開始的元素[href^="https://"]{……}[屬性$="值"]選擇屬性值以指定值結(jié)束的元素。選擇href屬性值以'.pdf'結(jié)束的元素[href$='.pdf']{……}[屬性*="值"]選擇屬性值包含指定字符串的元素。選擇title屬性值包含'hello'字符串的元素[title*='hello']{……}3知識點【案例3】敲入如圖7-9所示代碼，嘗試屬性選擇器的作用。7.3掌握更多的CSS選擇器3知識點7.3.3偽類選擇器7.3掌握更多的CSS選擇器偽類選擇器，是一種特殊的選擇器，它用來選擇元素在特定狀態(tài)下的樣式。這些特定狀態(tài)并不是由文檔結(jié)構(gòu)決定的，而是由用戶行為（如點擊、懸停）或元素的狀態(tài)（如被訪問、被禁用）來定義的。偽類選擇器包含數(shù)十種選擇器，大體包括以下三大類：結(jié)構(gòu)性偽類選擇器結(jié)構(gòu)性偽類選擇器主要用于選取DOM樹中特定位置的元素。狀態(tài)偽類選擇器狀態(tài)偽類選擇器主要用于選取具有特定交互狀態(tài)的元素。表單相關(guān)偽類選擇器表單相關(guān)偽類選擇器主要用于選取與表單相關(guān)的特定元素。3知識點知識點：偽類選擇器特點記憶關(guān)鍵詞：千變?nèi)f化關(guān)鍵詞解析：偽類選擇器可以根據(jù)不同的條件和狀態(tài)來選擇元素，這些條件和狀態(tài)可以是動態(tài)的、交互的，甚至是基于文檔結(jié)構(gòu)的。因此，偽類選擇器在CSS中的應(yīng)用就像千變?nèi)f化的魔法，能夠根據(jù)不同的場景和需求，以靈活多變的方式為元素應(yīng)用樣式。7.3掌握更多的CSS選擇器《列子·周穆王》：“乘虛不墜，觸實不硋，千變?nèi)f化，不可窮極?！鼻ё?nèi)f化——比喻變化很多。3知識點以下幾種常見的偽類選擇器。1.:hover選擇器

:hover選擇器通常用于超鏈接元素，也可以用于大部分HTML標簽。如果應(yīng)用在a元素上，通常有a:active，a:hover,a:link,a:visited四種狀態(tài)，但實際上，通常只需要設(shè)置a:hover狀態(tài)即可。其他狀態(tài)可以由a對應(yīng)標簽選擇器中設(shè)置對應(yīng)屬性就可以達到現(xiàn)行的主流效果。7.3掌握更多的CSS選擇器【案例4】設(shè)計如圖7-11所示的導(dǎo)航條的級聯(lián)菜單出現(xiàn)效果。3知識點2.:nth-of-type(n)選擇器和:nth-last-of-type()選擇器:nth-of-type(n)選擇器匹配“同類型中的第n個同級兄弟元素”。:nth-last-of-type(n)選擇器匹配“同類型中的倒數(shù)第n個同級兄弟元素”。括號內(nèi)的數(shù)字n也可以采用odd、even關(guān)鍵字，分別指的是奇數(shù)、偶數(shù)位置。7.3掌握更多的CSS選擇器【案例5】完成如圖7-14所示的文字效果。3知識點3.:first-child選擇器與:last-child選擇器:first-child是css中的一個選擇器，其作用是用于選擇它的父元素中的第一個子元素。用法示例：p:first-child{……}:last-child選擇器用來匹配父元素中最后一個子元素。單是從字面上看起來挺容易理解的，但實際隱藏了另外一個條件“這第一個子元素剛好是本身”。比如：li:first-child選擇器，一是要求從li元素的父元素挑第一個子元素，二是要求這第一個子元素還得必須是li元素。7.3掌握更多的CSS選擇器【案例6】打開上個《江城子·密州出獵》的練習，增加如圖所示的代碼。3知識點4.:nth-child(n)和:nth-last-child(n)選擇器:nth-child(n)選擇器匹配“父元素的第n個子元素，不論元素的類型”。:nth-last-child(n)選擇器匹配“父元素的倒數(shù)第n個子元素，不論元素的類型”。注意這里說的“不論元素的類型”指的是“任何類型的元素都要納入n的計數(shù)內(nèi)”，但不是說“任何類型的元素都可以相應(yīng)你的選擇器”。這兩種選擇器同樣也可以擁有odd、even關(guān)鍵字。7.3掌握更多的CSS選擇器【案例7】敲入如圖7-18所示的代碼，然后分析出現(xiàn)的預(yù)覽效果。3知識點7.3掌握更多的CSS選擇器3知識點7.3.4偽元素選擇器7.3掌握更多的CSS選擇器偽元素選擇器是Web設(shè)計中一個非常有用的工具，它允許開發(fā)者在不改變HTML結(jié)構(gòu)的情況下，通過CSS為元素添加裝飾性內(nèi)容和視覺效果，從而豐富網(wǎng)頁的視覺表現(xiàn)力和用戶體驗。以下是一些具體的應(yīng)用場景：添加裝飾性圖標或符號。面包屑導(dǎo)航。在面包屑導(dǎo)航中，可以使用偽元素來連接各個頁面之間的鏈接，如使用"?"符號連接頁面，使用"/"符號分隔頁面鏈接等。創(chuàng)建裝飾性邊框或背景：通過設(shè)置偽元素的樣式，可以為其添加邊框、背景色或其他視覺效果，從而增強元素的視覺吸引力。3知識點7.3掌握更多的CSS選擇器我們將介紹最常見的二種偽元素選擇器，分別為::before偽元素選擇器、::after偽元素選擇器。在早期的CSS規(guī)范中，偽元素選擇器使用單冒號（:）來表示，CSS3規(guī)范更新了語法，要求使用雙冒號（::）來表示偽元素選擇器。兩者的區(qū)別在于使用的單冒號（:）和雙冒號（::）。::before和:before是偽元素選擇器，用于在目標元素的前面插入內(nèi)容。內(nèi)容（content）屬性可以為空，只為設(shè)置樣式。::after和:after用于在目標元素的后面插入內(nèi)容。內(nèi)容（content）屬性也可以為空。用法示例：p::before{content:"臺詞";color:red;}p::after{content:"";display:block;width:30px;height:30px;}3知識點7.3掌握更多的CSS選擇器知識點：偽元素選擇器特點記憶關(guān)鍵詞：無中生有關(guān)鍵詞解析：::before、::after偽元素選擇器可以在不影響html結(jié)構(gòu)的情況下，憑空添加一個元素，通過樣式中的content屬性賦予元素的內(nèi)容，照常設(shè)置其他css屬性即可?！皞巍币部梢岳斫獬伞耙粋€并不真實存在于html結(jié)構(gòu)”的元素。春秋·李耳《老子》：“天下萬物生于有，有生于無?！睙o中生有——本來是道家的哲學思想，后來人們用它的字面意思，一般形容憑空捏造。3知識點7.3掌握更多的CSS選擇器【案例8】完成如圖7-20所示的熱搜榜版面效果。3知識點7.4CSS過渡與動畫7.4CSS過渡與動畫7.4.1過渡效果transitiontransition讀音——英[tr?n?z??n]之前我們在個別案例中使用了transition屬性產(chǎn)生過渡動態(tài)效果。它可以讓元素的某個屬性在一定的時間內(nèi)平滑地從一個值變化到另一個值。這種變化可以是顏色、大小、位置等任何可以改變的屬性。下面的代碼先建構(gòu)了一個100px*100px的紅色<div>元素。該元素樣式中為width屬性指定了過渡效果，持續(xù)時間為2秒；當光標浮在該元素上方時，該元素的width設(shè)置為300px，這就產(chǎn)生了width值變化的過程，也就激活了transition屬性，讓這個變化過程進行對應(yīng)的動態(tài)效果。div{width:100px;height:100px;background:red;transition:width2s;}div:hover{width:300px;}3知識點如果hover狀態(tài)下除了width屬性外，還有若干個屬性值發(fā)生變化，我們也可以將transition:width2s;改寫為transition:all2s;這里的all就是指“產(chǎn)生變化的所有屬性”。其實這是一種簡寫形式，里面涉及到了若干個屬性，通常延遲屬性沒必要寫。transition簡寫形式的用法示例：transition:屬性過渡持續(xù)時間速度曲線延遲;但個別屬性是不允許有過渡過程的，比如期待一個元素從不可見到慢慢可見，采用了display:none;狀態(tài)轉(zhuǎn)入display:block;，這實際是無法生效的。我們換一下思路，可以采用不透明度opacity:0;狀態(tài)轉(zhuǎn)入opacity:1;，或者采用位置偏移、增加父容器去響應(yīng)等等的方式。7.4CSS過渡與動畫3知識點1.速度曲線屬性transition-timing-functiontransition-timing-function屬性可接受以下值：ease-規(guī)定過渡效果，先緩慢地開始，然后加速，然后緩慢地結(jié)束（默認）linear-規(guī)定從開始到結(jié)束具有相同速度的過渡效果ease-in-規(guī)定緩慢開始的過渡效果ease-out-規(guī)定緩慢結(jié)束的過渡效果ease-in-out-規(guī)定開始和結(jié)束較慢的過渡效果cubic-bezier(n,n,n,n)-允許您在三次貝塞爾函數(shù)中定義自己的值2.延遲時間transition-delaytransition-delay屬性理解成動畫啟動之前有自行設(shè)定秒數(shù)的延遲時長。7.4CSS過渡與動畫3知識點【案例9】為如圖7-23所示的子菜單出現(xiàn)過程設(shè)置過渡效果。7.4CSS過渡與動畫3知識點7.4CSS過渡與動畫7.4.2@keyframes規(guī)則keyframes讀音——[‘ki?‘fre?m]CSS3的@keyframes規(guī)則用于創(chuàng)建動畫。允許你創(chuàng)建一個或多個關(guān)鍵幀，每個關(guān)鍵幀可以設(shè)置不同的樣式，從而在動畫過程中改變元素的樣式。例如，你可以定義一個動畫，使得一個元素的顏色在動畫過程中從紅色直接跳轉(zhuǎn)成藍色，再由藍色變成綠色，最后變成黑色。在@keyframes規(guī)則中，你可以使用百分比來指定動畫的不同階段，例如0%、25%、50%、75%和100%等，這些百分比表示動畫的不同階段，0％是開頭動畫，100％是當動畫完成。在每個階段，你可以設(shè)置元素的樣式，如顏色、位置等。注意，除了設(shè)置@keyframes規(guī)則之外，還要使用animation屬性來綁定動畫。3知識點7.4CSS過渡與動畫animation屬性是一個簡寫屬性，用于設(shè)置六個動畫屬性：animation-name屬性為@keyframes動畫規(guī)定名稱。animation-duration定義動畫完成一個周期所需要的時間，以秒或毫秒計。animation-timing-function規(guī)定動畫的速度曲線。animation-delay屬性定義動畫何時開始。animation-iteration-count屬性定義動畫的播放次數(shù)。取值為infinite時無限次播放。animation-direction屬性定義是否應(yīng)該輪流反向播放動畫。取值為alternate時反向。最簡潔的格式可以為：animation：keyframes規(guī)則的名稱+動畫一次所用時間+循環(huán)播放次數(shù)3知識點7.4CSS過渡與動畫【案例10】敲入如圖7-26所示代碼，仔細觀察運行效果并回答問題。3知識點7.4CSS過渡與動畫【案例11】打開“第7章過渡效果.html”，給子菜單添加下拉過程動畫的效果。4本章練習【練習1】打開溫氏集團的新聞欄目頁/GroupNews/list.aspx，觀察如圖7-28所示的區(qū)域，先思考該區(qū)域的布局結(jié)構(gòu)。7.5擴展練習本章結(jié)束最初90%的開發(fā)工作將會用去你最初90%的開發(fā)時間。剩下的10%的開發(fā)量將會用去你另外一個90%的開發(fā)時間?！猅omCargill謝謝觀看第8章

商業(yè)網(wǎng)站布局實戰(zhàn)01學習目標02課程思政目標03知識點04本章練習PPT模板/moban/

學習目標掌握在企業(yè)官網(wǎng)搜集所需圖片、文字、視頻素材的能力；培養(yǎng)能獨立完成企業(yè)網(wǎng)站首頁、欄目頁、詳情頁的能力；了解原型法開發(fā)的特點，并能應(yīng)用到本項目中；強化代碼復(fù)用的意識，包括“快速復(fù)制、粘貼、插入技巧”、“樣式的復(fù)用”、“選擇器的并列申明”、“內(nèi)部樣式表轉(zhuǎn)外部樣式表”等。培養(yǎng)在復(fù)雜頁面布局工作中書寫代碼縮進、充分注釋的習慣。強調(diào)Hbuilder軟件的相關(guān)快捷鍵操作，用以大幅提高編程效率。第8章

商業(yè)網(wǎng)站布局實戰(zhàn)1通過本章學習，要求達到以下既定目標：課程思政目標2通過了解寧德時代的發(fā)展歷程，幫助學生理解和認同社會主義核心價值觀念，樹立正確的價值取向?！靶侣剻谀宽摗焙汀靶侣勗斍轫摗钡木毩?，引導(dǎo)學生關(guān)注社會熱點問題、業(yè)界發(fā)展趨勢，提高學生的公民意識和社會責任感，引導(dǎo)學生積極投身于社會建設(shè)和發(fā)展。差異化網(wǎng)頁實操項目，培養(yǎng)學生的創(chuàng)新意識，和求真務(wù)實、開拓進取的精神。第8章

商業(yè)網(wǎng)站布局實戰(zhàn)3知識點8.1確定研究目標8.2搜集相關(guān)圖文素材初步搭建頁面主要容器的HTML結(jié)構(gòu)原型優(yōu)化階段代碼整理階段8.3網(wǎng)站目錄及文件的搭建、整理8.4制作首頁布局第8章

商業(yè)網(wǎng)站布局實戰(zhàn)3知識點8.5設(shè)計一級欄目頁面8.6設(shè)計詳情頁布局復(fù)用首頁中的相關(guān)代碼頁頭區(qū)的設(shè)計內(nèi)容區(qū)容器的布局往內(nèi)容區(qū)添加圖文混排內(nèi)容給內(nèi)容區(qū)底部添加上下文章的鏈接代碼的整理第8章

商業(yè)網(wǎng)站布局實戰(zhàn)準備工作復(fù)用首頁中有用的代碼及樣式更新海報區(qū)代碼內(nèi)容區(qū)的設(shè)計CSS代碼的整理及樣式表外聯(lián)8.1確定研究目標3知識點8.1確定研究目標作為初次完整地還原網(wǎng)站若干頁面的項目，我們搜索若干個公司官網(wǎng)做個比較，選擇頁面內(nèi)容量不太大，涉及的知識不太超過我們課程所學內(nèi)容的官網(wǎng)；從技術(shù)難度而言，要具備一定挑戰(zhàn)性，盡可能還原網(wǎng)頁布局、交互效果。最終要求完成企業(yè)網(wǎng)站首頁、某一欄目頁、詳情頁的布局。本章節(jié)將對“寧德時代”官網(wǎng)進行一個頁面布局還原實踐。8.2搜集相關(guān)圖文素材3知識點8.2搜集相關(guān)圖文素材盡可能從“寧德時代”各目標頁面中搜集對應(yīng)圖片、文字素材。圖片素材收集工作要求：圖片素材收集過程中，如發(fā)現(xiàn)圖片是svg，或者采用bootstrap引入圖標的手法，在這里，我們都統(tǒng)一在Photoshop處理為透明底的png文件格式。如果網(wǎng)頁中包含大量尺寸一致的小圖標圖片，我們也將所有圖標在Photoshop中整合成一個透明底的png文件，目的是采用精靈圖手法來設(shè)計其表現(xiàn)。若交互效果設(shè)計圖標變色的，也可以很方便講所有圖標集中更改顏色?？梢杂脼g覽器中的“保存為網(wǎng)頁”命令，快速地下載大部分圖片素材，個別無法下載或另存的圖片需要選擇“審查元素”命令進入“開發(fā)者模式”，在“元素”、“樣式”面板中找到對應(yīng)的圖片地址。3知識點文字素材收集工作要求：在網(wǎng)頁中直接拖曳光標，選中所有圖文后進行復(fù)制，然后粘貼在記事本文檔，這樣就得到純粹的文字信息，切記不要連圖一塊粘貼到word、wps文檔中。若網(wǎng)頁禁用復(fù)制命令，可以關(guān)閉瀏覽器的JavaScript腳本運行功能。倘若依然解決不了，可以采用企業(yè)微信等工具進行截屏，利用軟件內(nèi)置的文字識別功能來獲取文字。8.2搜集相關(guān)圖文素材3知識點8.3網(wǎng)站目錄及文件的搭建、整理站點根目錄結(jié)構(gòu)8.3網(wǎng)站目錄及文件的搭建、整理新聞欄目對應(yīng)的目錄結(jié)構(gòu)首頁涉及的圖片集8.4制作首頁布局3知識點8.4制作首頁布局企業(yè)官網(wǎng)截圖的首頁效果圖如圖所示。我們采用軟件編程領(lǐng)域中的“原型法”開發(fā)策略。原型法的基本思想：首先由用戶與系統(tǒng)分析設(shè)計人員合作，在短期內(nèi)定義用戶的基本需求，開發(fā)出一個功能不十分完善、實驗性的、簡易的應(yīng)用軟件系統(tǒng)的基本框架，稱之為原型。接著運行這個原型，再不斷評價和改進原型，使之逐步完善。其開發(fā)過程是多次重復(fù)、不斷演進的過程。3知識點8.4.1初步搭建頁面主要容器的HTML結(jié)構(gòu)1.制作頁頭區(qū)域內(nèi)容。（1）編寫頁頭區(qū)域?qū)?yīng)HTML代碼，如圖8-5所示。8.4制作首頁布局3知識點2.編寫對應(yīng)的CSS代碼，如圖8-6所示。8.4制作首頁布局3知識點（3）保存文件，預(yù)覽的效果如圖8-7所示。8.4制作首頁布局3知識點2.制作主內(nèi)容區(qū)域布局。（1）編寫主內(nèi)容區(qū)域?qū)?yīng)HTML代碼，如圖8-8所示。8.4制作首頁布局3知識點（2）編寫對應(yīng)的CSS代碼，如圖8-9所示。8.4制作首頁布局（3）保存文件，預(yù)覽的效果如圖8-10所示。3知識點3.制作頁腳部分布局。（1）編寫頁腳區(qū)域?qū)?yīng)HTML代碼，如圖8-11所示。8.4制作首頁布局3知識點（2）編寫對應(yīng)的CSS代碼，如圖8-12所示。8.4制作首頁布局3知識點（3）保存文件，預(yù)覽的效果如圖8-13所示。8.4制作首頁布局3知識點8.4.2原型優(yōu)化階段8.4制作首頁布局1.靜態(tài)CSS代碼的優(yōu)化CSS代碼盡可能把通用樣式、頁頭樣式、內(nèi)容區(qū)樣式、頁腳樣式對應(yīng)代碼集中放置。（1）頁頭區(qū)樣式的微調(diào)，代碼如圖8-14所示。3知識點（2）內(nèi)容區(qū)樣式的微調(diào)，代碼如圖8-15所示。8.4制作首頁布局3知識點（3）頁腳區(qū)樣式的微調(diào)，代碼如圖8-16所示。8.4制作首頁布局3知識點2.交互效果的優(yōu)化按照由簡入繁的過程，我們先把簡單的交互效果完成，剩下以下的三處交互需要我們留意的。（1）盒子陰影樣式box-shadow，能為元素添加投影效果，對應(yīng)的位置如圖8-17所示。8.4制作首頁布局對應(yīng)的代碼為：.newsli:hover{box-shadow:25px0px20px-10px#999;}/*box-shadow元素加陰影:x軸偏移量25pxy軸0模糊半徑20px擴散半徑-10px（內(nèi)縮）陰影顏色*/注意反復(fù)調(diào)整box-shadow的前四個參數(shù)，可正值也可負值。3知識點之前我們學習過如何將子菜單項縱向一個個放置在li元素下方。但在這個案例中，要將子菜單項橫向排列，無非就是控制左浮動。但難點是后面的背景白色，如果要將白色做出通欄（整個瀏覽器寬度）的話，顯然我們還要借助一個父容器來實現(xiàn)。修改HTML對應(yīng)代碼，先制作一個子菜單，做好效果后以此類推。對應(yīng)的HTML代碼如圖8-20所示。8.4制作首頁布局3知識點調(diào)整對應(yīng)的CSS代碼，如圖8-21所示。8.4制作首頁布局預(yù)覽效果如圖8-22所示，看看是否達到預(yù)期。同樣方法，給“研發(fā)”、“品牌”、“關(guān)于我們”添加對應(yīng)的HTML代碼。3知識點3.語言選擇區(qū)域的代碼優(yōu)化、搜索區(qū)域的設(shè)計思路。語言選擇區(qū)域，由于盒子面積跟前面導(dǎo)航子菜單面積樣式很多不一樣，加上代碼量現(xiàn)在有點多，我們建議不要采用復(fù)用樣式，還是另外再申明一個新樣式可能效率更高。修改后的HTML代碼如圖8-23所示。8.4制作首頁布局3知識點對應(yīng)的CSS代碼如圖8-24所示。8.4制作首頁布局搜索區(qū)域的實現(xiàn)，不要求完成對應(yīng)效果。這里大體說一下設(shè)計思路：第一個思路，按照前面子菜單項的做法。第二個思路,使用js腳本，通過點擊“搜索”的放大鏡圖標，將原來隱藏的子菜單容器顯示出來。當然這需要百度搜索一下相關(guān)知識，搜索關(guān)鍵詞可以為“javascript顯示指定元素”，也可以簡寫成“js顯示指定元素”。3知識點8.4.3代碼整理階段將輔助判定元素區(qū)域的背景色、邊框去除，檢查效果是否達成預(yù)期，最后將轉(zhuǎn)外聯(lián)樣式，更新圖片路徑。最終的HTML代碼如圖所示。8.4制作首頁布局3知識點8.4制作首頁布局3知識點8.4制作首頁布局3知識點8.4制作首頁布局3知識點8.4制作首頁布局最終index.css文件對應(yīng)的樣式代碼如圖8-26所示。3知識點8.4制作首頁布局3知識點8.4制作首頁布局3知識點8.4制作首頁布局3知識點8.5設(shè)計一級欄目頁面8.5設(shè)計一級欄目頁面完成首頁后，一級欄目頁就容易多了，畢竟頁面中工作量大的頁頭、頁腳保持與首頁相同代碼，只需要把內(nèi)容區(qū)完成即可。8.5.1準備工作本節(jié)的目標是完成“寧德時代”官網(wǎng)的“新聞”欄目頁，先登錄對應(yīng)頁面觀察頁面效果，如圖8-27所示。3知識點8.5設(shè)計一級欄目頁面將所需的圖片、圖標保存到news的img文件夾中，如圖8-28所示。3知識點8.5設(shè)計一級欄目頁面8.5.2復(fù)用首頁中有用的代碼及樣式在Hbuilder中把index.html首頁的代碼全部復(fù)制到“news.html”，保留頁頭、頁腳區(qū)的代碼，刪除掉“內(nèi)容區(qū)”的HTML代碼。由于內(nèi)容區(qū)的布局版面完全不同，如果內(nèi)容區(qū)的容器依然叫“content”的話，通過外部樣式表勢必會把首頁的content樣式激活，所以我們需要將該頁面的內(nèi)容區(qū)容器class名稱修改成content-news。此外，還需要修改外部樣式表的路徑。修改后的HTML代碼（部分代碼已折疊）如圖8-29所示。3知識點8.5設(shè)計一級欄目頁面文件保存后的預(yù)覽效果如圖8-30所示。3知識點8.5設(shè)計一級欄目頁面8.5.3更新海報區(qū)代碼由于index.css保留了海報區(qū)背景圖的設(shè)定，而一級頁面的海報區(qū)的元素、布局發(fā)生變化。所以我們可以采用在一級頁面news.html寫上同樣名稱的內(nèi)部樣式，覆蓋掉index.css的海報區(qū)樣式。1.在index.css中，找到包含海報圖的#header樣式，將這塊代碼復(fù)制到news.html的<style>標簽內(nèi)部，如圖8-31所示。3知識點8.5設(shè)計一級欄目頁面2.修改背景圖路徑及背景圖的尺寸大小，如圖8-32所示，并預(yù)覽效果。3.在海報上添加上“新聞”標題文字、“首頁>新聞”導(dǎo)航，這類型的導(dǎo)航我們俗稱“面包屑導(dǎo)航”，形容這導(dǎo)航內(nèi)容只有一小塊，比喻成小碎屑。先折疊主導(dǎo)航代碼，看清楚主導(dǎo)航的HTML代碼在什么位置終止，然后再它后方添加一個兄弟容器，如圖8-33、圖8-34所示。3知識點8.5設(shè)計一級欄目頁面對應(yīng)的CSS代碼如圖8-35所示。3知識點8.5設(shè)計一級欄目頁面文件保存后預(yù)覽的效果如圖8-36所示。3知識點8.5設(shè)計一級欄目頁面8.5.4內(nèi)容區(qū)的設(shè)計（1）老規(guī)矩，先完成容器大體布局，對應(yīng)的HTML代碼如圖8-37所示。對應(yīng)的CSS代碼如圖8-38所示。3知識點8.5設(shè)計一級欄目頁面（2）先給第一個li容器添加元素，完成效果后給其他li也添加相同內(nèi)容，期間采用復(fù)制完整的第一個容器對應(yīng)的代碼，再修改圖片及文字內(nèi)容，提高編寫效率。對應(yīng)的代碼如圖8-39所示。對應(yīng)的CSS代碼如圖8-40所示。3知識點8.5設(shè)計一級欄目頁面文件保存后，預(yù)覽的效果如圖8-41所示。3知識點8.5設(shè)計一級欄目頁面（3）制作圖片區(qū)域的交互效果。li元素底部有一條灰色細線，光標移動到li元素上方時，容器底部灰色細線上方出現(xiàn)一條位置重疊的藍色細線，藍色細線沿用load進度條的效果，從寬度0到100%。實現(xiàn)的思路分析：思路一：如果采用li元素設(shè)置下邊框的方式，hover狀態(tài)時改變?yōu)樗{色。即便顏色能從灰色過渡到藍色，也無法做到藍色寬度一點點增加的動態(tài)效果。如果對設(shè)置下邊框的做法仍不死心，我們要搜索相關(guān)案例，明確一些邊框能否支持漸變，漸變色樣式是否支持transition過渡效果。思路二：給li添加一個父容器，父容器高度比li容器高度多1個像素，再考慮能否實現(xiàn)。但這做法無疑會破壞我們現(xiàn)階段的HTML結(jié)構(gòu)，即便可行也不劃算。3知識點8.5設(shè)計一級欄目頁面思路三：用并列的兩個1px高的空白容器，一個灰色背景色，一個藍色背景色，它倆采用絕對定位方式實現(xiàn)位置的重疊，hover狀態(tài)時把藍色容器顯示出來，并將width屬性做一個過渡效果。思路四：在HTML結(jié)構(gòu)中，添加嵌套的1px高的父子容器，父容器采用灰色背景色，子容器藍色背景，子容器的width屬性做transition過渡。綜合考慮，我們采用思路三的方式最簡單有效。對應(yīng)的CSS代碼如圖8-42所示。3知識點8.5設(shè)計一級欄目頁面預(yù)覽效果后，新聞li元素的交互效果無誤，但發(fā)現(xiàn)頁頭頂部導(dǎo)航雖然固定定位在頂部，但是在滾屏時，下方的圖片內(nèi)容卻覆蓋到導(dǎo)航欄上的異常，估計主內(nèi)容區(qū)個別元素采用定位、浮動后被分配了一個較大的z-index值，或者設(shè)置了比z-index零的默認值還大的數(shù)值導(dǎo)致。我們在樣式中申明頂部導(dǎo)航容器的z-index為一個足夠大的數(shù)值（估算比頁面元素數(shù)量多即可，通常采用999、9999），如圖8-43所示。3知識點8.5設(shè)計一級欄目頁面（4）到此我們就完成新聞列表項的效果。接下來制作“頁碼”部分，效果如圖8-44所示。對應(yīng)的HTML代碼如圖8-45所示。3知識點8.5設(shè)計一級欄目頁面初步寫了一下樣式，如圖8-46所示，預(yù)覽后發(fā)現(xiàn)出現(xiàn)異常，如圖8-47所示。提問：這是什么原因?qū)е马摯a區(qū)容器跑到content-news容器的頂部？3知識點8.5設(shè)計一級欄目頁面解決方式：在內(nèi)容區(qū)樣式中，增加一行代碼：#content-news.news-list{height:1700px;}，如圖8-48所示，這個小插曲告訴我們，給容器設(shè)置高度是非常有必要的。對應(yīng)的CSS代碼如圖8-49所示。3知識點8.5設(shè)計一級欄目頁面將文件保存后，預(yù)覽效果如圖8-50所示。3知識點8.5設(shè)