《HTML5+CSS3網(wǎng)頁制作》課件-模塊九 綜合實戰(zhàn)項目

模塊九綜合實戰(zhàn)項目任務1原生響應式站點布局網(wǎng)頁制作CSSHTML首頁頭部區(qū)布局首頁正文及版權布局原生響應式站點布局0201列表頁布局03項目進度監(jiān)控04項目心得051.掌握響應式頁面的開發(fā)

2.掌握CSS3媒體查詢的應用原生響應式站點布局學習目標：

1.強化責任意識，使其在開發(fā)過程中注重用戶體驗，培養(yǎng)對學生對社會責任的認識，理解優(yōu)秀設計對于社會的意義。2.提高團隊協(xié)作能力，使其在項目實戰(zhàn)中，通過小組合作的形式，加強學生的溝通和協(xié)作能力，培養(yǎng)團隊精神。

3.強化法律意識，在網(wǎng)頁圖標和字體圖標的應用過程中，提醒學生注意版權問題，增強他們的法律意識。原生響應式站點布局思政目標：

首頁頭部區(qū)布局—需求說明1本次任務主要是用HTML5結構化元素、媒體查詢、定位、浮動、偽類選擇器、無序列表等知識點完成原生響應式站點的首頁頭部區(qū)布局，分為導航欄和主題圖片兩部分。電腦端的預覽效果如下圖所示。

2平板端導航欄中的“網(wǎng)站首頁”和“招商加盟”被隱藏，預覽效果如下圖所示。首頁頭部區(qū)布局—需求說明1

2手機端LOGO出現(xiàn)在屏幕頂端，導航欄居下并只顯示“公司簡介”、“新聞動態(tài)”和“產(chǎn)品展廳”3個重要欄目，預覽效果如下圖所示。首頁頭部區(qū)布局—需求說明1

2首頁頭部區(qū)布局的制作思路為用header元素作為首頁頭部區(qū)容器，里面的導航欄用nav元素做容器，包含用h1元素包裹的LOGO圖標和含有七個導航項的ul元素，使用浮動實現(xiàn)左右分布。主題圖片用類名為banner的div元素作為容器，里面包含一個img元素作為主題圖片。使用媒體查詢實現(xiàn)響應式布局。

可以分成五步來完成：首先做好新項目創(chuàng)建的準備工作；其次新建index.html，制作首頁頭部區(qū)的HTML結構代碼；接著編寫基礎CSS代碼；隨后編寫導航欄和主題圖片的樣式；最后使用媒體查詢，實現(xiàn)響應式布局。首頁頭部區(qū)布局—制作思路1

21.新項目創(chuàng)建的準備工作首頁頭部區(qū)布局—制作步驟1

22.

新建index.html，制作首頁頭部區(qū)的HTML結構代碼首頁頭部區(qū)布局—制作步驟1

23.編寫基礎CSS代碼首頁頭部區(qū)布局—制作步驟1

24.編寫導航欄和主題圖片的樣式首頁頭部區(qū)布局—制作步驟1

25.使用媒體查詢，實現(xiàn)響應式布局首頁頭部區(qū)布局—制作步驟1

首頁正文及版權布局—需求說明2本次任務主要是用HTML5結構化元素、媒體查詢、定位、浮動、偽類選擇器、無序列表等知識點完成原生響應式站點的首頁正文及版權布局，分為首頁正文和底部導航及版權兩部分。電腦端的預覽效果如下圖所示。

首頁正文及版權布局—需求說明2平板端產(chǎn)品系列和新聞動態(tài)上下排列且各自占滿整屏，產(chǎn)品圖片放大顯示，預覽效果如下圖所示。

首頁正文及版權布局—需求說明2手機端呈現(xiàn)的排列結果和平板端基本相同，不同之處在于產(chǎn)品圖片會縮小，新聞列表文本超出的部分會被截斷且用省略號代替，版權區(qū)域隱藏了底部導航，直接顯示版權內(nèi)容，預覽效果如下圖所示。

首頁正文及版權布局—制作思路2

首頁正文及版權布局的制作思路為用main元素作為首頁正文容器，包含應用類名為product的div元素定義產(chǎn)品系列部分，類名為news的div元素定義新聞動態(tài)部分，使用浮動實現(xiàn)左右分布。產(chǎn)品系列部分包含用h2元素包裹的兩張圖片（一張代表“產(chǎn)品系列”的標題，另一張代表“更多”的鏈接）和含有三個列表項的ul元素，每個列表項是一張產(chǎn)品圖片。新聞動態(tài)部分包含用h2元素包裹的兩張圖片（一張代表“新聞動態(tài)”的標題，另一張代表“更多”的鏈接）、用p元素介紹公司的背景信息和列出了三條新聞摘要的ul元素，每條新聞包含一個日期和標題，點擊標題會跳轉到相應的新聞頁面。

底部導航及版權用footer元素作為容器，底部導航用類名為min-bar的div為容器，包含一系列鏈接，指向關于公司和聯(lián)系方式的相關頁面。版權部分用p元素實現(xiàn)。使用媒體查詢實現(xiàn)響應式布局。

可以分成三步來完成：首先制作首頁正文及版權的HTML結構代碼；其次編寫首頁正文和底部導航及版權的樣式；最后使用媒體查詢，實現(xiàn)響應式布局。

首頁正文及版權布局—制作過程21.制作首頁頭部區(qū)的HTML結構代碼

首頁正文及版權布局—制作過程22.編寫首頁正文和底部導航及版權的樣式

首頁正文及版權布局—制作過程23．使用媒體查詢，實現(xiàn)響應式布局

列表頁布局—需求說明3本次任務主要是用代碼復用、HTML5結構化元素、媒體查詢、定位、浮動、偽類選擇器、無序列表、下拉列表等知識點完成原生響應式站點的列表頁布局，列表頁的頭部及版權區(qū)與首頁是一樣的，正文區(qū)是不一樣的。列表區(qū)的正文分為側邊欄、產(chǎn)品搜索和產(chǎn)品列表三部分。電腦端隱藏產(chǎn)品搜索部分，預覽效果如右圖所示。

列表頁布局—需求說明3平板端也隱藏產(chǎn)品搜索部分，并且調整側邊欄和產(chǎn)品列表部分的寬度來適用平板端，預覽效果如右圖

列表頁布局—需求說明3手機端將側邊欄整體隱藏，顯示產(chǎn)品搜索部分，同時修改產(chǎn)品列表的寬度，預覽效果如右圖所示。

列表頁布局—制作思路3列表頁布局的制作思路為頭部及版權區(qū)與首頁是一樣的，直接復用首頁的HTML和CSS代碼即可。正文區(qū)用main元素作為容器，包含用aside元素包裹的側邊欄，應用類名為search-mobile的div元素定義的產(chǎn)品搜索部分和應用類名為product-list的div元素定義的產(chǎn)品列表部分。在電腦端和平板端不顯示產(chǎn)品搜索部分，側邊欄和產(chǎn)品列表部分使用浮動實現(xiàn)左右分布。在手機端不顯示側邊欄部分，產(chǎn)品搜索部分和產(chǎn)品列表上下排列。側邊欄部分分為產(chǎn)品分類和咨詢搜索兩部分，上下排列。產(chǎn)品分類用類名為product-category的div元素作為容器，h3元素作為標題，5個列表項的無序列表代表產(chǎn)品分類。咨詢搜索部分用類名為search的div元素作為容器，同樣h3元素作為標題，包裹在類名為search-items的div元素中的表單實現(xiàn)咨詢搜索功能，表單包含兩個類型為text和image的input元素。產(chǎn)品搜索部分用類名為search-mobile的div元素作為容器，em元素作為提示信息，包含兩個類型為text和image的input元素的表單實現(xiàn)產(chǎn)品搜索功能。產(chǎn)品列表部分包含了應用類名為breadCrumb的div元素實現(xiàn)的面包屑導航、用ul元素表示的產(chǎn)品列表以及應用類名為paging的div元素實現(xiàn)的分頁組件。面包屑導航用em元素突出顯示提示信息，span元素包含面包屑的具體內(nèi)容，指示用戶當前位置產(chǎn)品列表。產(chǎn)品列表中每個列表項包含產(chǎn)品圖片和名稱，以及相關的鏈接。分頁組件則使用a元素和select元素來實現(xiàn)頁面導航和頁碼選擇的功能?？梢苑殖伤牟絹硗瓿桑菏紫葟陀檬醉擃^部及版權區(qū)HTML和CSS代碼；其次制作列表頁正文部分的HTML結構代碼；接著編寫列表頁正文部分的樣式；最后使用媒體查詢，實現(xiàn)響應式布局。

列表頁布局—制作過程3復用首頁頭部及版權區(qū)2.

制作列表頁正文部分的HTML結構代碼，預覽效果上部分如左圖所示，預覽效果下部分如右圖所示。

列表頁布局—制作過程33.

編寫列表頁正文部分的樣式

列表頁布局—制作過程34.使用媒體查詢，實現(xiàn)響應式布局，在電腦端的預覽效果如左圖所示，在平板端的預覽效果如中圖所示，在手機端的預覽效果如右圖所示。

項目進度監(jiān)控4任務計劃工時實際工時完成進度（百分比）責任人備注首頁頭部布局

首頁正文及版權布局

列表頁布局

項目心得5

從收獲、問題、解決思路、知識點不足、功能擴展等方面寫項目心得。小結首頁頭部區(qū)布局首頁正文及版權布局列表頁布局項目進度監(jiān)控、項目心得模塊九綜合實戰(zhàn)項目任務2移動端商城網(wǎng)站布局網(wǎng)頁制作CSSHTML知識準備——移動端商城網(wǎng)站布局首頁頭部移動端商城網(wǎng)站布局0201首頁輪播圖03首頁導航欄04首頁正文標題05首頁正文內(nèi)容首頁數(shù)碼產(chǎn)品及標簽欄移動端商城網(wǎng)站布局0706商品分類頁08購物車09購物車交互功能10商品列表頁商品詳情頁移動端商城網(wǎng)站布局1211商品詳情頁交互功能13項目進度監(jiān)控14項目心得151.掌握移動端視口設置、重置瀏覽器默認樣式、網(wǎng)頁圖標、精靈圖、字體圖標

2.掌握移動端網(wǎng)站布局的應用

3.掌握瀏覽器開發(fā)者工具的使用移動端商城網(wǎng)站布局學習目標：

1.強化責任意識，使其在開發(fā)過程中注重用戶體驗，培養(yǎng)對學生對社會責任的認識，理解優(yōu)秀設計對于社會的意義。2.提高團隊協(xié)作能力，使其在項目實戰(zhàn)中，通過小組合作的形式，加強學生的溝通和協(xié)作能力，培養(yǎng)團隊精神。

3.強化法律意識，在網(wǎng)頁圖標和字體圖標的應用過程中，提醒學生注意版權問題，增強他們的法律意識。移動端商城網(wǎng)站布局思政目標：

知識準備——移動端視口設置1

視口在網(wǎng)頁設計與瀏覽體驗中扮演著至關重要的角色，它是瀏覽器用于展示頁面內(nèi)容的實際屏幕區(qū)域，其大小隨設備類型的不同而有所差異。

視口分為布局視口、視覺視口和理想視口。

知識準備——移動端視口設置1移動端的視口設置是一項通過在網(wǎng)頁文檔頭部嵌入meta元素來進行精確控制的功能，以適應不同移動設備屏幕尺寸和分辨率的需求。Viewportmeta元素的設置僅適用于移動端瀏覽器，對傳統(tǒng)的PC端瀏覽器并不起作用。<metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>屬性名取值描述widthdevice-width或正整數(shù)定義視口的寬度，單位為像素，一般為device-width：表示寬度為設備屏幕的寬度heightdevice-width或正整數(shù)定義視口的高度，單位為像素，一般不用寫initial-scale[0.0-10.0]定義初始縮放值，一般設置為1.0minimum-scale[0.0-10.0]定義放大最大比例，它必須小于或等于maximum-scale設置maximum-scale[0.0-10.0]定義縮小最小比例，它必須大于或等于minimum-scale設置user-scalableyes/no定義是否允許用戶手動縮放頁面，默認值yesinteractive-widgetresizes-visual、resizes-content或overlays-content指定交互式UI組件（如虛擬鍵盤）對頁面視口的影響

知識準備——移動端視口設置1優(yōu)化網(wǎng)頁內(nèi)容的布局與尺寸設置，以適應廣泛設備的顯示需求，成為提升用戶體驗的關鍵。以下為幾項核心設計原則：（1）避免固定寬度的大尺寸元素（2）實現(xiàn)內(nèi)容的自適應布局（3）利用CSS媒體查詢優(yōu)化不同屏幕尺寸的體驗（4）注意絕對定位元素的尺寸控制

知識準備——重置瀏覽器默認樣式1

重置瀏覽器默認樣式的在英文里被稱為CSSReset，主要原因是現(xiàn)在的瀏覽器很多，并且每個瀏覽器都有自己的默認樣式，這樣就會導致一個頁面在多個瀏覽器下顯示產(chǎn)生差異，所以我們需要做一些處理使網(wǎng)頁在每個瀏覽器下的顯示效果一致。為什么要重置瀏覽器默認樣式

知識準備——重置瀏覽器默認樣式1怎樣進行重置瀏覽器默認樣式

每當開始一個新項目，第一步就是應當重置瀏覽器默認樣式，并把它們寫到一個CSS文件中去，這個CSS文件沒有統(tǒng)一的命名，常見的命名有Normalize.css、reset.css、base.css和style.css?，F(xiàn)成的重置瀏覽器默認樣式文件網(wǎng)絡上很多，也能很方便地獲取大型網(wǎng)站的重置瀏覽器默認樣式文件。直接使用現(xiàn)成的重置瀏覽器默認樣式文件會導致后期各種離奇bug的發(fā)生，濫用不如不用，最好還是自己寫一個重置瀏覽器默認樣式文件，并且要明白每一個樣式都是用來做什么的。

知識準備——重置瀏覽器默認樣式1怎樣進行重置瀏覽器默認樣式

升級到了2.0版本，它的重置樣式是非常通用的。例如，元素沒有任何默認顏色或背景設置。這個自2011年后就沒再更新，但也能給我們提供一些思路。

reset.css官方地址：/eric/tools/css/reset/

知識準備——重置瀏覽器默認樣式1怎樣進行重置瀏覽器默認樣式移動端CSS初始化推薦使用normalize.css官網(wǎng)地址：http://necolas.github.io/normalize.css保留有用的瀏覽器默認值，而不是刪除它們?yōu)楦嗟腍TML元素規(guī)范化樣式糾正和常見的瀏覽器不一致的錯誤通過細微的改進來提高可用性和使用注釋和詳細的文檔解釋代碼設計目標：

現(xiàn)代的、兼容html5的CSS重置替代方案，是研究團隊花了100多個小時深入研究現(xiàn)代瀏覽器樣式之間差異后的作品，被Twitter,GitHub,Bootstrap等許多有名的公司以某種形式使用.可在HTML元素的默認樣式中提供更好的跨瀏覽器一致性。

知識準備——重置瀏覽器默認樣式1幾個實用的重置樣式

來看一下margin和padding值的重置，以前是這樣重置的，現(xiàn)在變成這樣的。使用前者可以簡單方便的一次性重置所有HTML網(wǎng)頁元素的瀏覽器樣式，代碼少，控制量大，為什么又換成后者呢？主要原因是這樣效率會低很多，因為它重置了所有元素的樣式，包括不需要重置的元素。而且通配符，需要把所有的標簽都遍歷一遍，當網(wǎng)站較大時，樣式比較多，這樣寫就大大的加重了網(wǎng)站運行的負載，會使網(wǎng)站加載的時候需要很長一段時間。

知識準備——重置瀏覽器默認樣式1幾個實用的重置樣式

重置瀏覽器默認樣式需要我們不斷學習，不斷積累，不斷總結，才能讓它不斷優(yōu)化提升。

知識準備——網(wǎng)頁圖標1

網(wǎng)頁圖標是網(wǎng)頁設計中不可或缺的元素之一，它們能夠通過簡潔而富有表現(xiàn)力的方式傳達信息和功能，優(yōu)秀的網(wǎng)頁圖標不僅可以增加頁面的視覺吸引力，還可以提升用戶體驗和導航效果。

實現(xiàn)網(wǎng)頁圖標主要采用三種技術手段：圖片圖標、CSS精靈圖以及字體圖標。1

將一個圖標制作成一張小圖片，再將若干小圖片保存在站點文件夾中，通過img元素或background背景屬性引入到網(wǎng)頁。知識準備——網(wǎng)頁圖標1圖片圖標1缺點：

加大HTTP的請求次數(shù)，增加服務器的響應時間。

在移動端使用，還要考慮2倍屏、3倍屏問題。

放大時會失真，影響瀏覽感受。

傳統(tǒng)的圖片圖標雖然有很好的兼容性，但是弊端較多，不適宜廣泛使用。1知識準備——網(wǎng)頁圖標1圖片圖標1Fatkun圖片批量下載工具知識準備——網(wǎng)頁圖標1圖片圖標1瀏覽器開發(fā)者工具知識準備——網(wǎng)頁圖標1圖片圖標2將網(wǎng)頁中眾多小圖標合并到一張大圖上，利用CSS的背景定位（`background-position`）特性，精準選取并展示所需圖標部分，以此克服傳統(tǒng)圖片方式存在的性能瓶頸。優(yōu)勢：

（1）減少HTTP請求。（2）優(yōu)化帶寬使用。局限：

（1）精確定位要求高。

（2）文件體積問題。（3）圖像質量損失。（4）維護難度。知識準備——網(wǎng)頁圖標1精靈圖2Fatkun圖片批量下載工具知識準備——網(wǎng)頁圖標1精靈圖2瀏覽器開發(fā)者工具知識準備——網(wǎng)頁圖標1精靈圖

展示的是圖標，本質屬于字體。優(yōu)勢：

（1）基于矢量特性的字體圖標，能夠任意縮放而不損失畫質。

（2）可以很隨意的改變顏色、產(chǎn)生陰影、透明效果、旋轉等。

（3）字體文件的體積很小，服務器的響應時間更為快速。

（4）字體圖標展現(xiàn)了卓越的跨平臺兼容能力，廣泛適用于各類瀏覽器用。注意事項：

字體圖標不能替代精靈圖，它只是對工作中圖標部分技術的提升和優(yōu)化。

如果遇到一些結構和樣式比較簡單的小圖標，就用字體圖標。

如果遇到一些結構和樣式復雜一點的小圖片，就用精靈圖。知識準備——網(wǎng)頁圖標1字體圖標3Fatkun圖片批量下載工具知識準備——網(wǎng)頁圖標1字體圖標3瀏覽器開發(fā)者工具知識準備——網(wǎng)頁圖標1字體圖標1background屬性精靈圖的原理知識準備——精靈圖11值說明CSSbackground-color指定要使用的背景顏色1background-position指定背景圖像的位置1background-size指定背景圖片的大小3background-repeat指定如何重復背景圖像1background-origin指定背景圖像的定位區(qū)域3background-clip指定背景圖像的繪畫區(qū)域3background-attachment設置背景圖像是否固定或者隨著頁面的其余部分滾動。1background-image指定要使用的一個或多個背景圖像1精靈圖的原理知識準備——精靈圖11精靈圖的原理知識準備——精靈圖11精靈圖的原理知識準備——精靈圖12通過圖像處理軟件：通過前端打包工具：通過在線生成工具：如何制作精靈圖知識準備——精靈圖12如何制作精靈圖知識準備——精靈圖13<body>

<ul>

<li>

<div>

<h5></h5>

<p>品類齊全，輕松購物</p>

</div>

</li>

<li>

<div>

<h5></h5>

<p>多倉直發(fā)，極速配送</p>

</div>

</li>

<li>

<div>

<h5></h5>

<p>正品行貨，精致服務</p>

</div>

</li>

<li>

<div>

<h5></h5>

<p>天天低價，暢選無憂</p>

</div>

</li>

</ul></body>第一步：用HTML構建出來基本結構如何使用精靈圖知識準備——精靈圖13第二步：添加基本CSS樣式如何使用精靈圖知識準備——精靈圖13第二步：添加基本CSS樣式如何使用精靈圖知識準備——精靈圖13第三步：運用背景屬性把精靈圖中的圖標正確顯示如何使用精靈圖知識準備——精靈圖13第三步：運用背景屬性把精靈圖中的圖標正確顯示如何使用精靈圖知識準備——精靈圖11推薦網(wǎng)站：

Icomoon字庫http://icomoon.io

阿里iconfont字庫/阿里媽媽MUX傾力打造的矢量圖標管理、交流平臺。

設計師將圖標上傳到iconfont平臺，用戶可以自定義下載多種格式的icon，平臺也可將圖標轉換為字體，便于前端工程師自由調整與調用。IcoMoon成立于2011年，推出了第一個自定義圖標字體生成器，它允許用戶選擇所需要的圖標，使它們成一字型。該字庫內(nèi)容種類繁多，非常全面，唯一的遺憾是國外服務器，打開網(wǎng)速較慢。知識準備——字體圖標的生成1賬戶與項目創(chuàng)建1創(chuàng)建賬號并登錄到Iconfont-阿里巴巴矢量圖標庫知識準備——字體圖標的生成1賬戶與項目創(chuàng)建1從首頁上的“資源管理”菜單中選擇“我的項目”菜單項進入我的項目頁面，在該頁面的右側，單擊紫藍色的“新建圖標庫”按鈕。創(chuàng)建項目知識準備——字體圖標的生成1賬戶與項目創(chuàng)建1在出現(xiàn)的新建項目對話框中填寫相應信息，在這里需要注意的是字體格式的選擇，根據(jù)前端項目的需要勾選需要的字體格式，單擊“新建”按鈕就可以實現(xiàn)新建一個項目，新建的項目如圖所示。創(chuàng)建項目賬戶與項目創(chuàng)建知識準備——字體圖標的生成12Iconfont網(wǎng)站已有2774多萬個圖標，其數(shù)量還在不斷增加，根據(jù)需要可以從已有的圖標中選取。導航至Iconfont的“素材庫”，選擇“圖標庫”，進入到圖標庫頁面，圖標庫分為：“所有圖標庫”、“官方圖標庫”、“多色圖標庫”和“單色圖標庫”。選取或自制圖標并加至購物車知識準備——字體圖標的生成1選取或自制圖標并加至購物車知識準備——字體圖標的生成12在圖標庫頁面右上部的“搜索”框內(nèi)輸入“教育”關鍵字，可以快速找到和關鍵字教育相關的圖標。選取或自制圖標并加至購物車知識準備——字體圖標的生成12

把鼠標移到要選擇的圖標上，在彈出的菜單中單擊”添加入庫“菜單項，就把選擇的圖標添加到購物車了。選取或自制圖標并加至購物車知識準備——字體圖標的生成12SVG格式的圖標設計師直接保存其他格式的圖片選取或自制圖標并加至購物車知識準備——字體圖標的生成1選取或自制圖標并加至購物車知識準備——字體圖標的生成1如果在Iconfont網(wǎng)站上找不到需要的字體圖標，就需要自制字體圖標了。2Convertiohttps://convertio.co/zh/—文件轉換器選取或自制圖標并加至購物車知識準備——字體圖標的生成12把學院BMP格式的logo轉換成SVG格式BMP格式SVG格式Convertio選取或自制圖標并加至購物車知識準備——字體圖標的生成12

單擊網(wǎng)站中間的“選擇文件”按鈕，在彈出的“打開”對話框中選擇學院的logo，并單擊打開按鈕。選取或自制圖標并加至購物車知識準備——字體圖標的生成12

上傳成功后再在頁面中選擇要轉換的格式“SVG”，然后單擊“轉換”按鈕。選取或自制圖標并加至購物車知識準備——字體圖標的生成1

轉換完成后，單擊右側的“下載”按鈕就完成了學院bmp格式的logo轉換成SVG格式了。選取或自制圖標并加至購物車知識準備——字體圖標的生成1

用賬號登錄Iconfont網(wǎng)站，單擊右上角的“上傳”圖標進入上傳頁面。在上傳圖標頁面將圖標SVG文件拖拽至框內(nèi)上傳或單擊“上傳圖標”按鈕，選擇并上傳生成的SVG格式的學院logo。選取或自制圖標并加至購物車知識準備——字體圖標的生成1

上傳完成后，填寫名稱、標簽，單擊“去除顏色并提交”或“保留顏色并提交”按鈕，靜等網(wǎng)站審核。選取或自制圖標并加至購物車知識準備——字體圖標的生成1

審核通過后，單擊“資源管理”菜單中的“我的圖標”菜單項，在“我上傳的圖標”頁面找到上傳成功的圖標，把鼠標移到該圖標上，在彈出的菜單中單擊”添加入庫“菜單項，就把圖標添加到購物車了。選取或自制圖標并加至購物車知識準備——字體圖標的生成1

單擊網(wǎng)頁右上角的“購物車”圖標，導航到購物車頁面，購物車里有自己創(chuàng)建的圖標和從庫里選擇的圖標。單擊下面的“添加至項目”按鈕，選擇加入的項目“test”,單擊“確定”按鈕就把購物車中的圖標添加到了項目中并跳轉到“我的項目”頁面。選取或自制圖標并加至購物車知識準備——字體圖標的生成1

通過單擊“資源管理”菜單中的“我的項目”也能快速切換到“我的項目”頁面。在我的項目頁面，單擊“下載至本地”按鈕，就可以把項目中的字體圖標下載到本地。選取或自制圖標并加至購物車知識準備——字體圖標的生成111

解壓縮從iconfont網(wǎng)站下載至本地的壓縮文件后，會得到一個如圖所示的文件夾，里面很多文件，文件類型也不盡相同，要想搞明白這些文件的作用，我們先認識一下字體格式。字體圖標壓縮包中文件的簡介知識準備——字體圖標的應用11

對于已經(jīng)創(chuàng)建的項目，可以通過單擊“我的項目”頁面上“項目設置”按鈕，在彈出的“項目設置”對話框中重新選取字體格式。字體圖標壓縮包中文件的簡介知識準備——字體圖標的應用11

細心的同學會發(fā)現(xiàn)，如果我們先選擇了彩色，那么WOFF2和TTF會自動勾選上，同時EOT和SVG變成不可選狀態(tài)，此時WOFF和SVG都是可選狀態(tài)。字體圖標壓縮包中文件的簡介知識準備——字體圖標的應用11

如果單獨選擇彩色去保存時，會提示“請再選擇一種字體格式”

。字體圖標壓縮包中文件的簡介知識準備——字體圖標的應用11

為搞清楚這些字體格式與壓縮包中文件的關系，我進行了多次項目設置，選取不同的字體格式，然后重新單擊“下載至本地”按鈕。通過比較分析文件個數(shù)、類型和文件名，查看壓縮包中iconfont.css文件的內(nèi)容并去運行生成的demo_index網(wǎng)頁文件。字體圖標壓縮包中文件的簡介知識準備——字體圖標的應用11字體格式與所生成文件的對應關系：字體格式所生成文件名字WOFF2iconfont.woff2WOFFiconfont.woffTTFiconfont.ttfEOTiconfont.eotSVGiconfont.svg字體圖標壓縮包中文件的簡介知識準備——字體圖標的應用11

選中Base64時不會生成單獨的文件，Base64會對同時選擇的WOFF2、WOFF和TTF字體加密，加密時只能加密一個，優(yōu)先級順序從高到低為WOFF2、WOFF和TTF，也就是說TTF只有在沒有WOFF2和WOFF時才能被加密，Base64的體現(xiàn)形式在iconfont.css文件中，如圖所示，

這是刪除很多中間內(nèi)容后的，從頭和尾部信息我們可以看出，這是對WOFF2字體格式進行加密的，需要注意的時Base64不支持對SVG和EOT加密。字體圖標壓縮包中文件的簡介知識準備——字體圖標的應用11

彩色字體格式也沒對應的單獨文件，它的主要作用是在三種應用字體圖標的方式下都能顯示多色圖標。

如果不選擇WOFF2、WOFF和TTF中的任意一個，在Unicode引用和font-class引用方式下，字體圖標不能正常顯示。字體圖標壓縮包中文件的簡介知識準備——字體圖標的應用12

字體圖標應用的三種方式，這三種方式是Unicode引用、font-class引用和Symbol引用。

在應用三種方式之前，先在前端項目中建兩個文件夾，CSS文件夾和js文件夾，把壓縮包中的iconfont.css文件拷貝到CSS文件夾，把iconfont.js文件拷貝到js文件夾，只需要這兩個文件我們就能正確應用字體圖標了。iconfont.css文件用來支持Unicode引用和font-class引用，iconfont.js文件用來支持Symbol引用。字體圖標應用的三種方式知識準備——字體圖標的應用1知識準備——字體圖標的應用12

然后在網(wǎng)頁文件的head中，正確引入iconfont.css文件和iconfont.js文件，代碼如圖所示。<link

rel="stylesheet"

href="css/iconfont.css"><script

src="js/iconfont.js"></script>字體圖標應用的三種方式知識準備——字體圖標的應用12

Unicode引用方式只需挑選相應圖標并獲取字體編碼，在項目需要使用圖標的位置添加諸如i，span等類似的標簽，為標簽添加類名iconfont，標簽內(nèi)容為字體編碼。<span

class="iconfont"></span>

font-class引用方式只需挑選相應圖標并獲取類名，在項目需要使用圖標的位置添加諸如i，span等類似的標簽，為標簽添加兩個類名。一個固定的是iconfont，另一個是要使用圖標對應的類名。<span

class="iconfonticon-hbzylogo"></span><svg

class="icon"

aria-hidden="true">

<use

xlink:href="#icon-education-1-copy

"></use>

</svg>

Symbol引用方式挑選相應圖標并獲取類名，應用于頁面。字體圖標應用的三種方式知識準備——字體圖標的應用13

應用實例是在基于選擇了WOFF2、WOFF、TTF、EOT、SVG和Base64字體格式的基礎上下載的圖標字體庫，解壓縮后的文件夾如圖所示。在iconfont.css文件中，WOFF2字體格式用Base64進行了加密。字體圖標應用的實例知識準備——字體圖標的應用13

字體圖標庫里添加了三個字體圖標，一個是單色圖標、一個多色圖標，這兩個都是從網(wǎng)站圖標庫選擇的，另一個是自建圖標。實例通過表格的形式對這三個字體圖標進行了比較。在默認情況下，對應的HTML代碼和運行結果如圖所示。字體圖標應用的實例知識準備——字體圖標的應用13

新增一個類選擇器jianbian,并應用到這九個字體圖標上，運行結果如圖所示，類選擇器jianbian的漸變色和64像素字體大小效果在Unicode引用和font-class引用方式下起到了效果，而Symbol引用方式下的單個字體圖標顯示效果不受影響。字體圖標應用的實例知識準備——字體圖標的應用13

然后，再新增一個類選擇器color,去替換jianbian應用到這九個字體圖標上，運行結果如圖所示，類選擇器color的紅色和64像素字體大小效果在Unicode引用和font-class引用方式下起到了效果，而Symbol引用方式下的字體圖標顯示效果不受影響。字體圖標應用的實例知識準備——字體圖標的應用13

最后，再新增一個類選擇器shadow,去替換color應用到這九個字體圖標上，運行結果如圖所示，類選擇器shadow的陰影和64像素字體大小效果在Unicode引用和font-class引用方式下起到了效果，而Symbol引用方式下的字體圖標顯示效果不受影響。字體圖標應用的實例知識準備——字體圖標的應用13

通過剛才的實例，可以看到，Unicode引用和font-class引用方式下的字體圖標可以輕松地像字體一樣去應用CSS改變樣式，Symbol引用方式下的字體圖標不能直接應用CSS改變樣式，但也支持應用CSS改變樣式，如圖所示，

不過有點復雜，有興趣的同學可以自己去探究一下。字體圖標應用的實例知識準備——字體圖標的應用11本次任務主要是利用流式布局、精靈圖、重置瀏覽器默認樣式和移動端視口設置等知識點完成移動端商城首頁頭部的制作，預覽效果如圖所示，第一個圖是在iPhonese下的顯示效果，第二個圖是在NokiaN9下的顯示效果。要求能適應不同尺寸的移動端。首頁頭部—需求說明22

首頁頭部的制作思路為首先做好新項目創(chuàng)建的準備工作；其次在項目中新建首頁index.html，并在文件頭部設置meta標簽中的視口“viewport”，用于適配移動端；接著在項目中CSS文件夾中新建reset.css文件，并寫入用于重置瀏覽器默認值的相關CSS代碼。最后制作首頁頭部，整個頭部區(qū)采用固定定位方式將頭部固定在頁面頂部。頭部區(qū)左側容器為logo，搜索模塊居中，右側為用戶登錄區(qū)域，搜索模塊會隨著移動設備的寬度不同而發(fā)生變化，兩端的模塊不發(fā)生變化。首頁頭部—制作思路231.新項目創(chuàng)建的準備工作

在計算機中建立項目文件夾及常用的css、js和images三個文件夾，并把圖片資源放到images中，然后在VSCode中導入項目。首頁頭部—制作過程23

2.新建首頁并適配移動端

在項目中新建首頁index.html，并在文件頭部設置meta標簽中的視口“viewport”，用于適配移動端。首頁頭部—制作過程233.重置瀏覽器默認值

在項目中CSS文件夾中新建reset.css文件，并寫入用于重置瀏覽器默認值的相關CSS代碼。首頁頭部—制作過程234.制作首頁頭部

整個頭部區(qū)采用固定定位方式將頭部固定在頁面頂部。頭部區(qū)左側容器為logo，搜索模塊居中，右側為用戶登錄區(qū)域，根據(jù)運行效果圖可以知道，搜索模塊會隨著移動設備的寬度不同而發(fā)生變化，兩端的模塊不發(fā)生變化。首頁頭部—制作過程23

在index.html文件的body中創(chuàng)建首頁頭部的HTML結構如圖所示。保存后運行效果如圖所示。首頁頭部—制作過程23

在CSS文件夾中創(chuàng)建樣式文件index.css，并在index.html文件的head中添加對index.css和reset.css兩個文件的鏈入。首頁頭部—制作過程23

打開index.css文件，依次編寫樣式，現(xiàn)在移動端大部分是根據(jù)iPhone6的參數(shù)來進行設計的，它的物理分辨率為750乘以1134，邏輯分辨率為375乘以480，也是它的開發(fā)尺寸，DPR為2。所以設計師設計出來的設計圖寬度為750px，這就是我們把max-width的值設置為750px的原因。首頁頭部—制作過程23

頭部的三個圖標都來源于一張750乘以920的精靈圖，它就是一個二倍圖。根據(jù)測量精靈圖的數(shù)據(jù)去設計模塊的寬和高，位置信息將用于定位，在這里需要注意，測得的數(shù)據(jù)都要除以2。首頁頭部—制作過程23

在這里我們采用流式布局進行設計，頭部區(qū)左側容器為logo，搜索模塊居中，右側為用戶登錄區(qū)域，兩頭根據(jù)精靈圖的測量數(shù)據(jù)固定大小，中間部分根據(jù)適配設備的寬度減去兩端的寬度及適當間距后確定。最后整個頭部區(qū)采用固定定位方式將頭部固定在頁面頂部。根據(jù)這些信息不難寫出頭部的基礎樣式，如圖所示：首頁頭部—制作過程23

這里需要解釋的是：由于精靈圖里面的圖標在項目中大量使用，每次都使用精靈圖中的圖標都需要四行代碼，并且三行都是一樣的，出于代碼優(yōu)化的考慮，我們用到了屬性選擇器，下面的類選擇器icon-logo和icon-login的編寫就能很好體現(xiàn)出來這種用法的優(yōu)勢。中間的搜索模塊的圖片是通過偽元素before實現(xiàn)的，偽元素是個行內(nèi)元素，設置絕對定位后，就能設置寬和高并懸浮在原來的位置上面，后面的元素占據(jù)了它的原來位置，這是中間模塊背景圖的實現(xiàn)原理。在這里，偽元素無法復用屬性選擇器中的代碼，只能把完整的四句都寫出來。首頁頭部—制作過程23

把這些樣式應用到元素后，運行結果如圖所示。首頁頭部—制作過程23

在這基礎上，設置左模塊和中間模塊左浮動，右模塊右浮動，運行效果如圖：

我們發(fā)現(xiàn)中間部分的寬度和我們預想的不一樣，我們給input新增樣式如圖樣式。首頁頭部—制作過程23

運行結果就和預期效果很接近了：首頁頭部—制作過程23

只需通過增加padding和margin屬性，并調整其值就可以了。固定定位是通過給header選擇器新增固定定位和left和right偏移量實現(xiàn)的；我們?nèi)y試超鏈接的時候，發(fā)現(xiàn)超鏈接實現(xiàn)不了，通過開發(fā)者工具可以看到，a的尺寸是0*0,原因是a是行內(nèi)元素，里面沒內(nèi)容，它就沒大小。首頁頭部—制作過程23

可以通過把a元素設置成塊元素，這樣它會和父元素的寬度一樣，再設置height值為100%，這樣它就占據(jù)父元素的整個空間。完成這些功能后的完整CSS代碼如圖：首頁頭部—制作過程23

保存后運行就實現(xiàn)了我們的預期目標。首頁頭部—制作過程23

本次任務主要是利用彈性布局、animation和margin-left取負值等知識點完成移動端商城輪播圖的制作，輪播圖由三張圖循環(huán)輪流播放，在下一周期反向播放。預覽效果如圖所示，分別是第一幅圖、第二幅圖和第三幅圖的顯示效果。首頁輪播圖—需求說明2

主要思路是用一個div作為容器，里面用img元素放置要輪播的圖片，把div的display屬性設置為flex后，三張圖片就像拼接在一起一樣，如圖所示，然后制作關鍵幀，關鍵幀里面通過修改margin-left的值來實現(xiàn)輪播，最后給該div添加animation屬性，就完成了輪播圖的制作。3首頁輪播圖—制作思路2可以分成四步來完成：首先制作輪播圖的HTML結構代碼；其次編寫基礎CSS代碼；接著應用彈性布局。最后編寫關鍵幀并實現(xiàn)動畫。3首頁輪播圖—制作思路3

1.制作輪播圖的HTML結構代碼整個首頁分成五個大的模塊，從上到下依次是頭部、輪播圖、導航欄、正文和標簽欄。頭部和標簽欄分別固定在頁面的頭部和尾部。輪播圖、導航欄和正文這三個模塊整體放在一個類名為container的div中，每一部分再用一個div進行布局。輪播圖用類名為carousel的div進行布局。輪播圖div中再放置一個類名為banner-box且包含三個img元素的div。3首頁輪播圖—制作過程32.編寫基礎的CSS代碼第1步中圖的上部被首頁頭部遮蓋了一部分，主要原因是首頁頭部是固定定位，可以通過給類名為container的div設置首頁頭部高度的上內(nèi)邊距解決。給類選擇器container添加最大寬度、水平居中、上內(nèi)邊距，給類選擇器banner-box添加width值為100%，就可以解決輪播圖被遮蓋問題。3首頁輪播圖—制作過程3保存后運行效果如圖：3首頁輪播圖—制作過程33.應用彈性布局在類選擇器banner-box中新增display屬性，并設置值為flex。類名為banner-box的div的布局就改成了彈性布局，在電腦端的運行效果如下圖所示。3首頁輪播圖—制作過程34.編寫關鍵幀并實現(xiàn)動畫根據(jù)需求編寫關鍵幀，并通過給類選擇器banner-box添加animation屬性實現(xiàn)動畫。CSS代碼如圖所示：3首頁輪播圖—制作過程3

保存后的運行結構在移動端沒上面問題，切換到電腦端如圖所示。3首頁輪播圖—制作過程3

通過給類選擇器carousel添加overflow屬性并設值為hidden，讓盒子外的內(nèi)容不可見。3首頁輪播圖—制作過程3再次運行，發(fā)現(xiàn)電腦端和移動端都能正確實現(xiàn)了。3首頁輪播圖—制作過程1

本次任務主要是利用流式布局、精靈圖和無序列表等知識點完成移動端商城導航欄的制作，導航欄中的四個導航項在導航欄中均勻分布，并要求能自適應不同尺寸的移動端設備。預覽效果如圖所示，第一個圖是在iPhone6下的顯示效果，第二個圖是在NokiaN9下的顯示效果。4首頁導航欄—需求說明2首頁導航欄的制作思路為用一個nav元素作為容器，里面用ul元素的四個列表項放置每個導航項，每個li元素用精靈圖中的圖標作為背景，li元素中內(nèi)嵌一個a元素作為導航。每個導航項的背景圖在上，文字在下效果是通過給a元素設置上內(nèi)邊距來實現(xiàn)的，上內(nèi)邊距是根據(jù)精靈圖中圖標的高度設置的。每個li元素的寬度根據(jù)精靈圖中圖標的大小設置，高度是由a元素內(nèi)容的默認高度和上內(nèi)邊距決定的。然后使用百分比設置li元素的外邊距，使其達到自適應的效果。

可以分成四步來完成：首先制作導航欄的HTML結構代碼；其次編寫基礎CSS代碼；接著通過精靈圖技術添加背景；最后設置外邊距，達到自適應效果。4首頁導航欄—制作思路3

1.制作導航欄的HTML結構代碼在類名為container的div中，輪播圖的下面添加一個nav元素，nav元素中添加一個包含四個列表項的無序列表，每個列表項事先應用上以icon開頭的類名，為添加背景做準備，每個列表項都包含一個a元素，代碼如下：4首頁導航欄—制作過程3

保存運行后的效果圖為:

第一眼看到這個運行結果肯定很多人會疑惑，我想疑惑點有兩個，一個是li元素是塊元素，怎么四個列表項都顯示到一行了；另一個是怎么已經(jīng)有背景圖片了。主要原因是我們給每個li元素添加了以icon開頭的類名，在首頁頭部制作中編寫的屬性選擇器中已經(jīng)設置了display屬性，并設置其值為inline-block。4首頁導航欄—制作過程32.編寫基礎的CSS代碼以第一個圖標為例，用畫圖工具查看精靈圖中所需圖標的大小信息，如圖所示。

第一個圖標的大小信息為91乘以92像素，可以得到我們制作的圖標寬度和高度都是46像素。4首頁導航欄—制作過程3

結合剛才的制作思路，我們編寫出如圖所示的的基礎CSS代碼。

在nav選擇器中，導航欄的背景是白色，內(nèi)容水平居中，設置上下內(nèi)邊距為5px。由于a元素是行內(nèi)元素，如果想設置上內(nèi)邊距屬性，需要同時設置成塊元素。4首頁導航欄—制作過程3保存后運行效果如圖：4首頁導航欄—制作過程33.通過精靈圖技術添加背景以第一個圖標為例，用畫圖工具查看精靈圖中所需圖標的位置信息，如圖所示。

第一個圖標的位置坐標為49，230，可得到位置值為-25px

-115px，同理可以得到其他三個圖標的的位置值。4首頁導航欄—制作過程3

在index.css文件中添加如圖所示的四個類選擇器，用來添加背景圖標。4首頁導航欄—制作過程3保存后運行效果如圖：4首頁導航欄—制作過程34.設置外邊距為達到自適應效果，以總寬度為375像素為例，來算一下外間距取的百分比，四個圖片的自身寬度為46乘以4為184，總寬度減去184后還剩191，以能分配的寬度為50%為例，四個圖標水平方向上8個外邊距，平均下來6.2%左右。再結合要適應各種移動端設備，需要取一個比6.2%小的值。這里用5%去測試一下，給navli選擇器新增個margin屬性，讓上下方向為0，左右為5%，CSS代碼如下：4首頁導航欄—制作過程3

保存后運行，并在不同移動端設備上測試一下，這是在iphone6上的效果：4首頁導航欄—制作過程3

這是在在NokiaN9下的運行效果。4首頁導航欄—制作過程1

本次任務主要是利用float布局、精靈圖和行內(nèi)元素等知識點完成移動端商城首頁欄目標題的制作，由左右兩部分組成，左面部分用精靈圖中的圖標做背景，右邊為一個超鏈接。并要求能自適應不同尺寸的移動端設備。預覽效果如圖所示。5首頁正文標題—需求說明2首頁正文標題的制作思路為用一個類名為products的div元素作為容器，里面嵌套一個類名為hd的div,同時也作為后面要制作的欄目內(nèi)容的容器。在類名為hd的div中添加兩個行內(nèi)元素em和a,區(qū)別于首頁頭部的塊元素布局，用行內(nèi)元素實現(xiàn)布局。通過給a元素設置右浮動屬性使其達到自適應的效果。可以分成四步來完成：首先制作首頁正文欄目標題的HTML結構代碼；其次編寫基礎CSS代碼；接著通過精靈圖技術添加背景；最后設置浮動，達到自適應效果。5首頁正文標題—制作思路31.制作首頁正文標題的HTML結構代碼在類名為container的div中，導航欄部分的下面添加一個類名為products的div元素，在該div中添加一個包含em元素和a元素的類名為hd的div，并給em元素應用類選擇器icon-book，代碼如下：5首頁正文標題—制作過程3

保存運行后的效果圖為:5首頁正文標題—制作過程32.編寫基礎的CSS代碼用畫圖工具查看精靈圖中所需圖標的大小信息，并結合圖標在標題欄中的位置關系，由于這一部分左右兩部分都有文字，可以通過行高屬性控制標題欄的高度。編寫的基礎CSS代碼如下：5首頁正文標題—制作過程3保存后運行效果如圖：5首頁正文標題—制作過程33.通過精靈圖技術添加背景利用精靈圖技術，添加類選擇器icon-book，用來添加背景圖標，代碼如下：5首頁正文標題—制作過程3保存后運行效果如圖：5首頁正文標題—制作過程34.設置浮動，達到自適應效果背景圖片和標題重疊，可以通過給em元素添加左內(nèi)邊距解決。然后給a元素添加右浮動屬性，CSS代碼如下：5首頁正文標題—制作過程3

保存后運行，并在不同移動端設備上測試一下，這是在iphone6上的效果：5首頁正文標題—制作過程3

這是在在NokiaN9下的運行效果。5首頁正文標題—制作過程通過這個例子，主要收獲是，用兩個行內(nèi)元素實現(xiàn)標題欄的左右兩部分，左邊的em元素是通過display屬性取值為inline-block變成行內(nèi)塊元素的；右邊的a元素是通過float屬性脫離源文檔流的位置并變成行內(nèi)塊元素了。讀者也可以用首頁頭部制作的思路來實現(xiàn)這個模塊。5首頁正文標題—制作過程1

本次任務主要是利用彈性布局和偽類選擇器等知識點完成移動端商城首頁正文欄目內(nèi)容的制作，由左右兩部分組成，左面又分成上下兩部分，上面是一個圖片超鏈接，下面又分成左右兩部分，也都是圖片超鏈接。整個模塊的右邊也是個圖片超鏈接。并要求能自適應不同尺寸的移動端設備。預覽效果如圖所示。6首頁正文內(nèi)容—需求說明2首頁正文欄目內(nèi)容的制作思路為在類名為products的div元素里的正文欄目標題代碼的下面，創(chuàng)建一個類名為book-list的div,再在類名為book-list的div中創(chuàng)建兩個div,一個是類名為left-list，用于欄目內(nèi)容的左部布局，一個是類名為right-list，用于欄目內(nèi)容的右部布局。左部上半部分內(nèi)創(chuàng)建一個圖片超鏈接，下半部內(nèi)創(chuàng)建一個類名為book的span元素，span元素里面再創(chuàng)建兩個圖片超鏈接；右部是一個整體，里面創(chuàng)建一個圖片超鏈接。整體的左右兩部分和左部下面的兩部分都用彈性布局達到自適應的效果。可以分成三步來完成：首先制作首頁正文欄目內(nèi)容的HTML結構代碼；其次進行彈性布局，達到自適應效果；最后添加邊框線，調整圖片內(nèi)邊距實現(xiàn)預期效果。6首頁正文內(nèi)容—制作思路31.制作首頁正文欄目內(nèi)容的HTML結構代碼在類名為products的div中，根據(jù)制作思路分析編寫HTML結構代碼，代碼如下：6首頁正文內(nèi)容—制作過程3

保存運行后的效果圖為:6首頁正文內(nèi)容—制作過程32.進行彈性布局，達到自適應效果首頁正文內(nèi)容的重點是布局，在布局好了的基礎上，才能進一步美化，左右部分的實現(xiàn)是通過把類名為book-list的div設置成彈性容器，左右兩部分所在的div就是彈性項，給彈性項設置flex屬性可以調整這兩部分的寬度比例。同理把類名為book的span設置為彈性容器，里面的兩個a元素就是彈性項，也通過flex屬性調整寬度比例。在這里，需要知道的是塊元素和行內(nèi)元素都能作為彈性容器或彈性項。編寫出的彈性布局代碼如下：6首頁正文內(nèi)容—制作過程3保存后運行效果如圖：

從運行效果看，簡單的兩個彈性布局，整體效果就已經(jīng)很接近了，剩下的就是調整間距和設置分割線了。6首頁正文內(nèi)容—制作過程33.添加邊框線，調整圖片內(nèi)邊距實現(xiàn)預期效果靈活使用內(nèi)邊距屬性、圖片的width屬性、邊框屬性來實現(xiàn)和預期一樣的效果。編寫的CSS代碼如下：6首頁正文內(nèi)容—制作過程3

保存后運行，并在不同移動端設備上測試一下，這是在iphone6上的效果：6首頁正文內(nèi)容—制作過程1

本次任務主要是利用彈性布局、浮動定位、精靈圖和偽類選擇器等知識點完成移動端商城首頁數(shù)碼產(chǎn)品及標簽欄的制作，分為數(shù)碼產(chǎn)品、底部段落文本和標簽欄三部分，標簽欄上的“首頁”欄目為激活狀態(tài)，鼠標經(jīng)過、懸停到某個欄目上時，欄目的標簽欄文本顏色發(fā)生變化，標簽欄固定在整個頁面底部。并要求能自適應不同尺寸的移動端設備。預覽效果如圖所示。7首頁數(shù)碼產(chǎn)品及標簽欄—需求說明2首頁數(shù)碼產(chǎn)品及標簽欄的制作思路為“數(shù)碼產(chǎn)品”欄目的布局方法與“書籍資料”欄目的布局方法相同。底部標簽欄可以參考導航欄的布局方法，固定到底部可以參考首頁頭部的實現(xiàn)方式。底部段落文本的制作比較簡單，用p元素加簡單樣式即可。需要注意的是，標簽欄中的“首頁”欄目需要添加激活狀態(tài)、鼠標懸停或經(jīng)過樣式。

分成三步來完成：首先是“數(shù)碼產(chǎn)品”欄目的制作；其次是底部段落文本的制作；最后是標簽欄的制作。7首頁數(shù)碼產(chǎn)品及標簽欄—制作思路31.數(shù)碼產(chǎn)品的制作數(shù)碼產(chǎn)品和書籍資料的制作基本一樣，但是數(shù)碼產(chǎn)品右部上下兩部分的實現(xiàn)方式和書籍資料左部上下兩部分的實現(xiàn)方式不一樣。雖說它們的上下兩部分都是用行內(nèi)元素span或a布局的，但是書籍資料左部上下兩部分是通過給下面的span元素設置成彈性容器來實現(xiàn)的，而數(shù)碼產(chǎn)品右部上下兩部分是通過把下面的a元素設置成塊元素來保證上下兩部分不會出問題的。7首頁數(shù)碼產(chǎn)品及標簽欄—制作過程3愛鉆研的讀者把設置成塊元素的那行代碼在開發(fā)者工具中勾選掉后，也沒見布局發(fā)生變化，如圖所示。7首頁數(shù)碼產(chǎn)品及標簽欄—制作過程3為這位讀者的主動探索和思考的精神而鼓掌，這位讀者的觀察沒問題，其原因是所用的圖片素材尺寸比較大。在這位讀者所做工作的基礎上，在iPhone6/7/8模擬設備下觀察把img元素的width屬性值一直調小，當調整到88像素后，本來上下布局的兩張圖片就變成了左右布局，如圖所示。主要原因是圖片太大時，它足以占據(jù)一行，當選用的圖片的寬度不大或切換到大寬度的移動設備上時，布局就發(fā)生了改變。7首頁數(shù)碼產(chǎn)品及標簽欄—制作過程3

它所對應的代碼如圖所示。

真正理解了背后的原理，我們換成去把上面的部分設置成塊元素，效果是一樣的，參考代碼如圖所示。存運行后的效果圖為:7首頁數(shù)碼產(chǎn)品及標簽欄—制作過程32.底部段落文本的制作底部段落文本制作過程比較簡單，對應的HTML結構代碼如下：所對應的CSS代碼如圖所示。7首頁數(shù)碼產(chǎn)品及標簽欄—制作過程33.標簽欄的制作標簽欄和導航欄的制作基本是一樣的，標簽欄比導航欄多了個激活狀態(tài)、鼠標懸浮或經(jīng)過時的狀態(tài)和固定到整個頁面底部。這三個不一樣的地方實現(xiàn)起來也很簡單。激活狀態(tài)是通過給標簽欄中的每個標簽項都同時編寫了兩個類選擇器，一個是激活狀態(tài)下的類選擇器，一個是普通狀態(tài)下的類選擇器，再根據(jù)需要在HTML結構代碼中應用不同的類選擇器；以標簽欄中第一個標簽項為例，對應的CSS代碼如下：7首頁數(shù)碼產(chǎn)品及標簽欄—制作過程3

鼠標經(jīng)過或懸停在每個標簽項上時，標簽項的文本字體顏色不一樣的實現(xiàn)也很簡單，是通過超鏈接偽類實現(xiàn)的。所對應的CSS代碼圖所示。7首頁數(shù)碼產(chǎn)品及標簽欄—制作過程3

標簽欄始終固定到整個頁面底部的制作是通過把標簽欄的定位模式設置成固定定位，并通過設置bottom、left和right這三個邊偏移屬性的值來實現(xiàn)的，所對應的CSS代碼圖所示。7首頁數(shù)碼產(chǎn)品及標簽欄—制作過程1

本次任務主要是利用代碼復用、浮動定位、流式布局、精靈圖和偽類選擇器等知識點完成移動端商城商品分類頁的制作，分為頭部導航欄、正文商品和品牌列表和底部標簽欄三部分，預覽效果如圖所示。8商品分類頁—需求說明2商品分類頁的制作思路為復用首頁的部分代碼，實現(xiàn)商品分類頁的制作。

可分成三步來完成：首先與首頁共用reset.css文件及底部標簽欄；其次采用浮動定位方式布局頭部導航欄；最后采用流式布局布局正文商品和品牌列表。8商品分類頁—制作思路31.與首頁共用reset.css文件及底部標簽欄將index.html頁面另存為category.html;在category.html文件中保留head元素區(qū)代碼并將引入的index.css修改為category.css，將header元素和.container容器內(nèi)的所有代碼刪掉，將footer元素欄中的”首頁”列表項的類選擇器改為“icon-home”，“分類”列表項的類選擇器改為“icon-category-active”，編寫的HTML結構代碼如下：8商品分類頁—制作過程3在category.css樣式表文件中，保留精靈圖的共用屬性選擇器、8商品分類頁—制作過程3在category.css樣式表文件中，保留精靈圖的共用屬性選擇器、底部標簽欄CSS代碼、8商品分類頁—制作過程3在category.css樣式表文件中，保留精靈圖的共用屬性選擇器、底部標簽欄CSS代碼、header選擇器和.container類選擇器，8商品分類頁—制作過程3在category.css樣式表文件中，保留精靈圖的共用屬性選擇器、底部標簽欄CSS代碼、header選擇器和.container類選擇器，要把標簽欄的文本激活樣式從“首頁”項修改成“分類”項，只需把偽類選擇器:first-child修改為：nth-child(2)就可以了，8商品分類頁—制作過程3在category.css樣式表文件中，保留精靈圖的共用屬性選擇器、底部標簽欄CSS代碼、header選擇器和.container類選擇器，要把標簽欄的文本激活樣式從“首頁”項修改成“分類”項，只需把偽類選擇器:first-child修改為：nth-child(2)就可以了，對應的CSS代碼如圖所示，第一步完成后的運行效果如圖所示。8商品分類頁—制作過程32.采用浮動定位方式布局頭部導航欄頭部導航欄左側為右箭頭圖標超鏈接，中間為頁面標題，右側為搜索圖標及“找品牌”超鏈接。與首頁頭部使用塊元素進行布局不同，商品分類頁頭部導航欄使用三個行內(nèi)元素來實現(xiàn)布局，在header元素內(nèi)用兩個span元素布局頭部導航欄的左右兩部分，它們的圖標是使用來自精靈圖的背景圖像實現(xiàn)的；中間部分用em元素來布局。編寫的HTML結構代碼如下：<spanclass="icon-backback"><ahref="index.html"></a></span><em>分類</em><spanclass="icon-sbsearch-brand"><ahref="#">找品牌</a></span>結合精靈圖的知識很容易編制出CSS代碼如下：.icon-back{background-position:-160px-5px;}.icon-sb{background-position:-187px-6px;}

保存并瀏覽網(wǎng)頁，效果如圖所示。與目標預期效果差別較大。

8商品分類頁—制作過程3

（1）解決左側部分的問題左側部分顯示不出來的原因是元素a內(nèi)沒內(nèi)容，可以通過把a元素設置為塊元素，同時把右箭頭圖標的寬高作為a元素的寬高，對應的CSS代碼如下：.backa{display:block;width:12px;height:25px;}保存后再次查看運行效果，發(fā)現(xiàn)右箭頭圖標出現(xiàn)了，并且能夠實現(xiàn)導航到首頁，效果如圖所示。

再通過給span元素設置左浮動、上和左外邊距，上外邊距的值等于頭部導航欄的高度減去子元素a的高度后的一半。對應的CSS代碼如下：header.back{float:left;margin-left:10px;margin-top:13px;}保存后再次查看運行效果，發(fā)現(xiàn)左側部分的目標效果已經(jīng)實現(xiàn)，如圖所示。

8商品分類頁—制作過程3

（2）解決右側部分的問題通過設置右浮動、修改背景圖像在垂直方向上的位置、設置左內(nèi)邊距、右外邊距來實現(xiàn)右側部分的目標效果，背景圖像在垂直方向上的位置的改變量等于頭部導航欄的高度減去搜索圖標高度后的一半，左內(nèi)邊距的值主要是由搜索圖標寬度決定的，對應的CSS代碼如下：.icon-sb{background-position:-187px8px;}header.search-brand{float:right;padding-left:20px;margin-right:10px;}保存后再次查看運行效果，發(fā)現(xiàn)右側部分的目標效果已經(jīng)實現(xiàn)，如圖所示。

8商品分類頁—制作過程3

（3）實現(xiàn)頁面標題居中在父元素header是固定定位的基礎上，給em元素設置成絕對定位、top、left、bottom、right都設置為0，margin設置為auto，設置成絕對定位的行內(nèi)元素通過設置寬高屬性就能實現(xiàn)在父元素中的垂直水平居中。本例中由于父元素header設置了行高和自身高度一樣，top、bottom和hei