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

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

2.掌握CSS3媒體查詢(xún)的應(yīng)用原生響應(yīng)式站點(diǎn)布局學(xué)習(xí)目標(biāo)：

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

3.強(qiáng)化法律意識(shí)，在網(wǎng)頁(yè)圖標(biāo)和字體圖標(biāo)的應(yīng)用過(guò)程中，提醒學(xué)生注意版權(quán)問(wèn)題，增強(qiáng)他們的法律意識(shí)。原生響應(yīng)式站點(diǎn)布局思政目標(biāo)：

首頁(yè)頭部區(qū)布局—需求說(shuō)明1本次任務(wù)主要是用HTML5結(jié)構(gòu)化元素、媒體查詢(xún)、定位、浮動(dòng)、偽類(lèi)選擇器、無(wú)序列表等知識(shí)點(diǎn)完成原生響應(yīng)式站點(diǎn)的首頁(yè)頭部區(qū)布局，分為導(dǎo)航欄和主題圖片兩部分。電腦端的預(yù)覽效果如下圖所示。

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

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

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

可以分成五步來(lái)完成：首先做好新項(xiàng)目創(chuàng)建的準(zhǔn)備工作；其次新建index.html，制作首頁(yè)頭部區(qū)的HTML結(jié)構(gòu)代碼；接著編寫(xiě)基礎(chǔ)CSS代碼；隨后編寫(xiě)導(dǎo)航欄和主題圖片的樣式；最后使用媒體查詢(xún)，實(shí)現(xiàn)響應(yīng)式布局。首頁(yè)頭部區(qū)布局—制作思路1

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

22.

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

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

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

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

首頁(yè)正文及版權(quán)布局—需求說(shuō)明2本次任務(wù)主要是用HTML5結(jié)構(gòu)化元素、媒體查詢(xún)、定位、浮動(dòng)、偽類(lèi)選擇器、無(wú)序列表等知識(shí)點(diǎn)完成原生響應(yīng)式站點(diǎn)的首頁(yè)正文及版權(quán)布局，分為首頁(yè)正文和底部導(dǎo)航及版權(quán)兩部分。電腦端的預(yù)覽效果如下圖所示。

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

首頁(yè)正文及版權(quán)布局—需求說(shuō)明2手機(jī)端呈現(xiàn)的排列結(jié)果和平板端基本相同，不同之處在于產(chǎn)品圖片會(huì)縮小，新聞列表文本超出的部分會(huì)被截?cái)嗲矣檬÷蕴?hào)代替，版權(quán)區(qū)域隱藏了底部導(dǎo)航，直接顯示版權(quán)內(nèi)容，預(yù)覽效果如下圖所示。

首頁(yè)正文及版權(quán)布局—制作思路2

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

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

可以分成三步來(lái)完成：首先制作首頁(yè)正文及版權(quán)的HTML結(jié)構(gòu)代碼；其次編寫(xiě)首頁(yè)正文和底部導(dǎo)航及版權(quán)的樣式；最后使用媒體查詢(xún)，實(shí)現(xiàn)響應(yīng)式布局。

首頁(yè)正文及版權(quán)布局—制作過(guò)程21.制作首頁(yè)頭部區(qū)的HTML結(jié)構(gòu)代碼

首頁(yè)正文及版權(quán)布局—制作過(guò)程22.編寫(xiě)首頁(yè)正文和底部導(dǎo)航及版權(quán)的樣式

首頁(yè)正文及版權(quán)布局—制作過(guò)程23．使用媒體查詢(xún)，實(shí)現(xiàn)響應(yīng)式布局

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

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

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

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

列表頁(yè)布局—制作過(guò)程3復(fù)用首頁(yè)頭部及版權(quán)區(qū)2.

制作列表頁(yè)正文部分的HTML結(jié)構(gòu)代碼，預(yù)覽效果上部分如左圖所示，預(yù)覽效果下部分如右圖所示。

列表頁(yè)布局—制作過(guò)程33.

編寫(xiě)列表頁(yè)正文部分的樣式

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

項(xiàng)目進(jìn)度監(jiān)控4任務(wù)計(jì)劃工時(shí)實(shí)際工時(shí)完成進(jìn)度（百分比）責(zé)任人備注首頁(yè)頭部布局

首頁(yè)正文及版權(quán)布局

列表頁(yè)布局

項(xiàng)目心得5

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

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

3.掌握瀏覽器開(kāi)發(fā)者工具的使用移動(dòng)端商城網(wǎng)站布局學(xué)習(xí)目標(biāo)：

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

3.強(qiáng)化法律意識(shí)，在網(wǎng)頁(yè)圖標(biāo)和字體圖標(biāo)的應(yīng)用過(guò)程中，提醒學(xué)生注意版權(quán)問(wèn)題，增強(qiáng)他們的法律意識(shí)。移動(dòng)端商城網(wǎng)站布局思政目標(biāo)：

知識(shí)準(zhǔn)備——移動(dòng)端視口設(shè)置1

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

視口分為布局視口、視覺(jué)視口和理想視口。

知識(shí)準(zhǔn)備——移動(dòng)端視口設(shè)置1移動(dòng)端的視口設(shè)置是一項(xiàng)通過(guò)在網(wǎng)頁(yè)文檔頭部嵌入meta元素來(lái)進(jìn)行精確控制的功能，以適應(yīng)不同移動(dòng)設(shè)備屏幕尺寸和分辨率的需求。Viewportmeta元素的設(shè)置僅適用于移動(dòng)端瀏覽器，對(duì)傳統(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：表示寬度為設(shè)備屏幕的寬度heightdevice-width或正整數(shù)定義視口的高度，單位為像素，一般不用寫(xiě)initial-scale[0.0-10.0]定義初始縮放值，一般設(shè)置為1.0minimum-scale[0.0-10.0]定義放大最大比例，它必須小于或等于maximum-scale設(shè)置maximum-scale[0.0-10.0]定義縮小最小比例，它必須大于或等于minimum-scale設(shè)置user-scalableyes/no定義是否允許用戶(hù)手動(dòng)縮放頁(yè)面，默認(rèn)值yesinteractive-widgetresizes-visual、resizes-content或overlays-content指定交互式UI組件（如虛擬鍵盤(pán)）對(duì)頁(yè)面視口的影響

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

知識(shí)準(zhǔn)備——重置瀏覽器默認(rèn)樣式1

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

知識(shí)準(zhǔn)備——重置瀏覽器默認(rèn)樣式1怎樣進(jìn)行重置瀏覽器默認(rèn)樣式

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

知識(shí)準(zhǔn)備——重置瀏覽器默認(rèn)樣式1怎樣進(jìn)行重置瀏覽器默認(rèn)樣式

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

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

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

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

知識(shí)準(zhǔn)備——重置瀏覽器默認(rèn)樣式1幾個(gè)實(shí)用的重置樣式

來(lái)看一下margin和padding值的重置，以前是這樣重置的，現(xiàn)在變成這樣的。使用前者可以簡(jiǎn)單方便的一次性重置所有HTML網(wǎng)頁(yè)元素的瀏覽器樣式，代碼少，控制量大，為什么又換成后者呢？主要原因是這樣效率會(huì)低很多，因?yàn)樗刂昧怂性氐臉邮?，包括不需要重置的元素。而且通配符，需要把所有的?biāo)簽都遍歷一遍，當(dāng)網(wǎng)站較大時(shí)，樣式比較多，這樣寫(xiě)就大大的加重了網(wǎng)站運(yùn)行的負(fù)載，會(huì)使網(wǎng)站加載的時(shí)候需要很長(zhǎng)一段時(shí)間。

知識(shí)準(zhǔn)備——重置瀏覽器默認(rèn)樣式1幾個(gè)實(shí)用的重置樣式

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

知識(shí)準(zhǔn)備——網(wǎng)頁(yè)圖標(biāo)1

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

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

將一個(gè)圖標(biāo)制作成一張小圖片，再將若干小圖片保存在站點(diǎn)文件夾中，通過(guò)img元素或background背景屬性引入到網(wǎng)頁(yè)。知識(shí)準(zhǔn)備——網(wǎng)頁(yè)圖標(biāo)1圖片圖標(biāo)1缺點(diǎn)：

加大HTTP的請(qǐng)求次數(shù)，增加服務(wù)器的響應(yīng)時(shí)間。

在移動(dòng)端使用，還要考慮2倍屏、3倍屏問(wèn)題。

放大時(shí)會(huì)失真，影響瀏覽感受。

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

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

（1）精確定位要求高。

（2）文件體積問(wèn)題。（3）圖像質(zhì)量損失。（4）維護(hù)難度。知識(shí)準(zhǔn)備——網(wǎng)頁(yè)圖標(biāo)1精靈圖2Fatkun圖片批量下載工具知識(shí)準(zhǔn)備——網(wǎng)頁(yè)圖標(biāo)1精靈圖2瀏覽器開(kāi)發(fā)者工具知識(shí)準(zhǔn)備——網(wǎng)頁(yè)圖標(biāo)1精靈圖

展示的是圖標(biāo)，本質(zhì)屬于字體。優(yōu)勢(shì)：

（1）基于矢量特性的字體圖標(biāo)，能夠任意縮放而不損失畫(huà)質(zhì)。

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

（3）字體文件的體積很小，服務(wù)器的響應(yīng)時(shí)間更為快速。

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

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

如果遇到一些結(jié)構(gòu)和樣式比較簡(jiǎn)單的小圖標(biāo)，就用字體圖標(biāo)。

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

<ul>

<li>

<div>

<h5></h5>

<p>品類(lèi)齊全，輕松購(gòu)物</p>

</div>

</li>

<li>

<div>

<h5></h5>

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

</div>

</li>

<li>

<div>

<h5></h5>

<p>正品行貨，精致服務(wù)</p>

</div>

</li>

<li>

<div>

<h5></h5>

<p>天天低價(jià)，暢選無(wú)憂(yōu)</p>

</div>

</li>

</ul></body>第一步：用HTML構(gòu)建出來(lái)基本結(jié)構(gòu)如何使用精靈圖知識(shí)準(zhǔn)備——精靈圖13第二步：添加基本CSS樣式如何使用精靈圖知識(shí)準(zhǔn)備——精靈圖13第二步：添加基本CSS樣式如何使用精靈圖知識(shí)準(zhǔn)備——精靈圖13第三步：運(yùn)用背景屬性把精靈圖中的圖標(biāo)正確顯示如何使用精靈圖知識(shí)準(zhǔn)備——精靈圖13第三步：運(yùn)用背景屬性把精靈圖中的圖標(biāo)正確顯示如何使用精靈圖知識(shí)準(zhǔn)備——精靈圖11推薦網(wǎng)站：

Icomoon字庫(kù)http://icomoon.io

阿里iconfont字庫(kù)/阿里媽媽MUX傾力打造的矢量圖標(biāo)管理、交流平臺(tái)。

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

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

單擊網(wǎng)站中間的“選擇文件”按鈕，在彈出的“打開(kāi)”對(duì)話(huà)框中選擇學(xué)院的logo，并單擊打開(kāi)按鈕。選取或自制圖標(biāo)并加至購(gòu)物車(chē)知識(shí)準(zhǔn)備——字體圖標(biāo)的生成12

上傳成功后再在頁(yè)面中選擇要轉(zhuǎn)換的格式“SVG”，然后單擊“轉(zhuǎn)換”按鈕。選取或自制圖標(biāo)并加至購(gòu)物車(chē)知識(shí)準(zhǔn)備——字體圖標(biāo)的生成1

轉(zhuǎn)換完成后，單擊右側(cè)的“下載”按鈕就完成了學(xué)院bmp格式的logo轉(zhuǎn)換成SVG格式了。選取或自制圖標(biāo)并加至購(gòu)物車(chē)知識(shí)準(zhǔn)備——字體圖標(biāo)的生成1

用賬號(hào)登錄Iconfont網(wǎng)站，單擊右上角的“上傳”圖標(biāo)進(jìn)入上傳頁(yè)面。在上傳圖標(biāo)頁(yè)面將圖標(biāo)SVG文件拖拽至框內(nèi)上傳或單擊“上傳圖標(biāo)”按鈕，選擇并上傳生成的SVG格式的學(xué)院logo。選取或自制圖標(biāo)并加至購(gòu)物車(chē)知識(shí)準(zhǔn)備——字體圖標(biāo)的生成1

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

審核通過(guò)后，單擊“資源管理”菜單中的“我的圖標(biāo)”菜單項(xiàng)，在“我上傳的圖標(biāo)”頁(yè)面找到上傳成功的圖標(biāo)，把鼠標(biāo)移到該圖標(biāo)上，在彈出的菜單中單擊”添加入庫(kù)“菜單項(xiàng)，就把圖標(biāo)添加到購(gòu)物車(chē)了。選取或自制圖標(biāo)并加至購(gòu)物車(chē)知識(shí)準(zhǔn)備——字體圖標(biāo)的生成1

單擊網(wǎng)頁(yè)右上角的“購(gòu)物車(chē)”圖標(biāo)，導(dǎo)航到購(gòu)物車(chē)頁(yè)面，購(gòu)物車(chē)?yán)镉凶约簞?chuàng)建的圖標(biāo)和從庫(kù)里選擇的圖標(biāo)。單擊下面的“添加至項(xiàng)目”按鈕，選擇加入的項(xiàng)目“test”,單擊“確定”按鈕就把購(gòu)物車(chē)中的圖標(biāo)添加到了項(xiàng)目中并跳轉(zhuǎn)到“我的項(xiàng)目”頁(yè)面。選取或自制圖標(biāo)并加至購(gòu)物車(chē)知識(shí)準(zhǔn)備——字體圖標(biāo)的生成1

通過(guò)單擊“資源管理”菜單中的“我的項(xiàng)目”也能快速切換到“我的項(xiàng)目”頁(yè)面。在我的項(xiàng)目頁(yè)面，單擊“下載至本地”按鈕，就可以把項(xiàng)目中的字體圖標(biāo)下載到本地。選取或自制圖標(biāo)并加至購(gòu)物車(chē)知識(shí)準(zhǔn)備——字體圖標(biāo)的生成111

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

對(duì)于已經(jīng)創(chuàng)建的項(xiàng)目，可以通過(guò)單擊“我的項(xiàng)目”頁(yè)面上“項(xiàng)目設(shè)置”按鈕，在彈出的“項(xiàng)目設(shè)置”對(duì)話(huà)框中重新選取字體格式。字體圖標(biāo)壓縮包中文件的簡(jiǎn)介知識(shí)準(zhǔn)備——字體圖標(biāo)的應(yīng)用11

細(xì)心的同學(xué)會(huì)發(fā)現(xiàn)，如果我們先選擇了彩色，那么WOFF2和TTF會(huì)自動(dòng)勾選上，同時(shí)EOT和SVG變成不可選狀態(tài)，此時(shí)WOFF和SVG都是可選狀態(tài)。字體圖標(biāo)壓縮包中文件的簡(jiǎn)介知識(shí)準(zhǔn)備——字體圖標(biāo)的應(yīng)用11

如果單獨(dú)選擇彩色去保存時(shí)，會(huì)提示“請(qǐng)?jiān)龠x擇一種字體格式”

。字體圖標(biāo)壓縮包中文件的簡(jiǎn)介知識(shí)準(zhǔn)備——字體圖標(biāo)的應(yīng)用11

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

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

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

彩色字體格式也沒(méi)對(duì)應(yīng)的單獨(dú)文件，它的主要作用是在三種應(yīng)用字體圖標(biāo)的方式下都能顯示多色圖標(biāo)。

如果不選擇WOFF2、WOFF和TTF中的任意一個(gè)，在Unicode引用和font-class引用方式下，字體圖標(biāo)不能正常顯示。字體圖標(biāo)壓縮包中文件的簡(jiǎn)介知識(shí)準(zhǔn)備——字體圖標(biāo)的應(yīng)用12

字體圖標(biāo)應(yīng)用的三種方式，這三種方式是Unicode引用、font-class引用和Symbol引用。

在應(yīng)用三種方式之前，先在前端項(xiàng)目中建兩個(gè)文件夾，CSS文件夾和js文件夾，把壓縮包中的iconfont.css文件拷貝到CSS文件夾，把iconfont.js文件拷貝到j(luò)s文件夾，只需要這兩個(gè)文件我們就能正確應(yīng)用字體圖標(biāo)了。iconfont.css文件用來(lái)支持Unicode引用和font-class引用，iconfont.js文件用來(lái)支持Symbol引用。字體圖標(biāo)應(yīng)用的三種方式知識(shí)準(zhǔn)備——字體圖標(biāo)的應(yīng)用1知識(shí)準(zhǔn)備——字體圖標(biāo)的應(yīng)用12

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

rel="stylesheet"

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

src="js/iconfont.js"></script>字體圖標(biāo)應(yīng)用的三種方式知識(shí)準(zhǔn)備——字體圖標(biāo)的應(yīng)用12

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

class="iconfont"></span>

font-class引用方式只需挑選相應(yīng)圖標(biāo)并獲取類(lèi)名，在項(xiàng)目需要使用圖標(biāo)的位置添加諸如i，span等類(lèi)似的標(biāo)簽，為標(biāo)簽添加兩個(gè)類(lèi)名。一個(gè)固定的是iconfont，另一個(gè)是要使用圖標(biāo)對(duì)應(yīng)的類(lèi)名。<span

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

class="icon"

aria-hidden="true">

<use

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

"></use>

</svg>

Symbol引用方式挑選相應(yīng)圖標(biāo)并獲取類(lèi)名，應(yīng)用于頁(yè)面。字體圖標(biāo)應(yīng)用的三種方式知識(shí)準(zhǔn)備——字體圖標(biāo)的應(yīng)用13

應(yīng)用實(shí)例是在基于選擇了WOFF2、WOFF、TTF、EOT、SVG和Base64字體格式的基礎(chǔ)上下載的圖標(biāo)字體庫(kù)，解壓縮后的文件夾如圖所示。在iconfont.css文件中，WOFF2字體格式用Base64進(jìn)行了加密。字體圖標(biāo)應(yīng)用的實(shí)例知識(shí)準(zhǔn)備——字體圖標(biāo)的應(yīng)用13

字體圖標(biāo)庫(kù)里添加了三個(gè)字體圖標(biāo)，一個(gè)是單色圖標(biāo)、一個(gè)多色圖標(biāo)，這兩個(gè)都是從網(wǎng)站圖標(biāo)庫(kù)選擇的，另一個(gè)是自建圖標(biāo)。實(shí)例通過(guò)表格的形式對(duì)這三個(gè)字體圖標(biāo)進(jìn)行了比較。在默認(rèn)情況下，對(duì)應(yīng)的HTML代碼和運(yùn)行結(jié)果如圖所示。字體圖標(biāo)應(yīng)用的實(shí)例知識(shí)準(zhǔn)備——字體圖標(biāo)的應(yīng)用13

新增一個(gè)類(lèi)選擇器jianbian,并應(yīng)用到這九個(gè)字體圖標(biāo)上，運(yùn)行結(jié)果如圖所示，類(lèi)選擇器jianbian的漸變色和64像素字體大小效果在Unicode引用和font-class引用方式下起到了效果，而Symbol引用方式下的單個(gè)字體圖標(biāo)顯示效果不受影響。字體圖標(biāo)應(yīng)用的實(shí)例知識(shí)準(zhǔn)備——字體圖標(biāo)的應(yīng)用13

然后，再新增一個(gè)類(lèi)選擇器color,去替換jianbian應(yīng)用到這九個(gè)字體圖標(biāo)上，運(yùn)行結(jié)果如圖所示，類(lèi)選擇器color的紅色和64像素字體大小效果在Unicode引用和font-class引用方式下起到了效果，而Symbol引用方式下的字體圖標(biāo)顯示效果不受影響。字體圖標(biāo)應(yīng)用的實(shí)例知識(shí)準(zhǔn)備——字體圖標(biāo)的應(yīng)用13

最后，再新增一個(gè)類(lèi)選擇器shadow,去替換color應(yīng)用到這九個(gè)字體圖標(biāo)上，運(yùn)行結(jié)果如圖所示，類(lèi)選擇器shadow的陰影和64像素字體大小效果在Unicode引用和font-class引用方式下起到了效果，而Symbol引用方式下的字體圖標(biāo)顯示效果不受影響。字體圖標(biāo)應(yīng)用的實(shí)例知識(shí)準(zhǔn)備——字體圖標(biāo)的應(yīng)用13

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

不過(guò)有點(diǎn)復(fù)雜，有興趣的同學(xué)可以自己去探究一下。字體圖標(biāo)應(yīng)用的實(shí)例知識(shí)準(zhǔn)備——字體圖標(biāo)的應(yīng)用11本次任務(wù)主要是利用流式布局、精靈圖、重置瀏覽器默認(rèn)樣式和移動(dòng)端視口設(shè)置等知識(shí)點(diǎn)完成移動(dòng)端商城首頁(yè)頭部的制作，預(yù)覽效果如圖所示，第一個(gè)圖是在iPhonese下的顯示效果，第二個(gè)圖是在NokiaN9下的顯示效果。要求能適應(yīng)不同尺寸的移動(dòng)端。首頁(yè)頭部—需求說(shuō)明22

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

在計(jì)算機(jī)中建立項(xiàng)目文件夾及常用的css、js和images三個(gè)文件夾，并把圖片資源放到images中，然后在VSCode中導(dǎo)入項(xiàng)目。首頁(yè)頭部—制作過(guò)程23

2.新建首頁(yè)并適配移動(dòng)端

在項(xiàng)目中新建首頁(yè)index.html，并在文件頭部設(shè)置meta標(biāo)簽中的視口“viewport”，用于適配移動(dòng)端。首頁(yè)頭部—制作過(guò)程233.重置瀏覽器默認(rèn)值

在項(xiàng)目中CSS文件夾中新建reset.css文件，并寫(xiě)入用于重置瀏覽器默認(rèn)值的相關(guān)CSS代碼。首頁(yè)頭部—制作過(guò)程234.制作首頁(yè)頭部

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

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

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

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

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

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

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

把這些樣式應(yīng)用到元素后，運(yùn)行結(jié)果如圖所示。首頁(yè)頭部—制作過(guò)程23

在這基礎(chǔ)上，設(shè)置左模塊和中間模塊左浮動(dòng)，右模塊右浮動(dòng)，運(yùn)行效果如圖：

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

運(yùn)行結(jié)果就和預(yù)期效果很接近了：首頁(yè)頭部—制作過(guò)程23

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

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

保存后運(yùn)行就實(shí)現(xiàn)了我們的預(yù)期目標(biāo)。首頁(yè)頭部—制作過(guò)程23

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

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

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

保存后的運(yùn)行結(jié)構(gòu)在移動(dòng)端沒(méi)上面問(wèn)題，切換到電腦端如圖所示。3首頁(yè)輪播圖—制作過(guò)程3

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

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

可以分成四步來(lái)完成：首先制作導(dǎo)航欄的HTML結(jié)構(gòu)代碼；其次編寫(xiě)基礎(chǔ)CSS代碼；接著通過(guò)精靈圖技術(shù)添加背景；最后設(shè)置外邊距，達(dá)到自適應(yīng)效果。4首頁(yè)導(dǎo)航欄—制作思路3

1.制作導(dǎo)航欄的HTML結(jié)構(gòu)代碼在類(lèi)名為container的div中，輪播圖的下面添加一個(gè)nav元素，nav元素中添加一個(gè)包含四個(gè)列表項(xiàng)的無(wú)序列表，每個(gè)列表項(xiàng)事先應(yīng)用上以icon開(kāi)頭的類(lèi)名，為添加背景做準(zhǔn)備，每個(gè)列表項(xiàng)都包含一個(gè)a元素，代碼如下：4首頁(yè)導(dǎo)航欄—制作過(guò)程3

保存運(yùn)行后的效果圖為:

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

第一個(gè)圖標(biāo)的大小信息為91乘以92像素，可以得到我們制作的圖標(biāo)寬度和高度都是46像素。4首頁(yè)導(dǎo)航欄—制作過(guò)程3

結(jié)合剛才的制作思路，我們編寫(xiě)出如圖所示的的基礎(chǔ)CSS代碼。

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

第一個(gè)圖標(biāo)的位置坐標(biāo)為49，230，可得到位置值為-25px

-115px，同理可以得到其他三個(gè)圖標(biāo)的的位置值。4首頁(yè)導(dǎo)航欄—制作過(guò)程3

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

保存后運(yùn)行，并在不同移動(dòng)端設(shè)備上測(cè)試一下，這是在iphone6上的效果：4首頁(yè)導(dǎo)航欄—制作過(guò)程3

這是在在NokiaN9下的運(yùn)行效果。4首頁(yè)導(dǎo)航欄—制作過(guò)程1

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

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

保存后運(yùn)行，并在不同移動(dòng)端設(shè)備上測(cè)試一下，這是在iphone6上的效果：5首頁(yè)正文標(biāo)題—制作過(guò)程3

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

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

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

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

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

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

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

它所對(duì)應(yīng)的代碼如圖所示。

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

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

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

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

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

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

8商品分類(lèi)頁(yè)—制作過(guò)程3

（1）解決左側(cè)部分的問(wèn)題左側(cè)部分顯示不出來(lái)的原因是元素a內(nèi)沒(méi)內(nèi)容，可以通過(guò)把a(bǔ)元素設(shè)置為塊元素，同時(shí)把右箭頭圖標(biāo)的寬高作為a元素的寬高，對(duì)應(yīng)的CSS代碼如下：.backa{display:block;width:12px;height:25px;}保存后再次查看運(yùn)行效果，發(fā)現(xiàn)右箭頭圖標(biāo)出現(xiàn)了，并且能夠?qū)崿F(xiàn)導(dǎo)航到首頁(yè)，效果如圖所示。

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

8商品分類(lèi)頁(yè)—制作過(guò)程3

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

8商品分類(lèi)頁(yè)—制作過(guò)程3

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