第8章

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

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

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

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

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

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