響應(yīng)式Web開(kāi)發(fā)項(xiàng)目化教程（HTML5+CSS3） 課件 項(xiàng)目10 制作物流公司響應(yīng)式網(wǎng)站

項(xiàng)目10

制作物流公司響應(yīng)式網(wǎng)站·建立站點(diǎn)

·首頁(yè)的制作

學(xué)習(xí)目標(biāo)能力知識(shí)素質(zhì)掌握站點(diǎn)的建立方法；掌握媒體查詢和彈性盒布局的應(yīng)用方法。1能夠?qū)崿F(xiàn)簡(jiǎn)單的CSS3動(dòng)畫效果；會(huì)設(shè)置媒體查詢，進(jìn)行響應(yīng)式設(shè)計(jì)2勇于創(chuàng)新、積極探索的職業(yè)精神。3目錄項(xiàng)目描述10.1頁(yè)面結(jié)構(gòu)的搭建10.2頂部通欄的實(shí)現(xiàn)10.3導(dǎo)航欄的實(shí)現(xiàn)10.4輪播圖的實(shí)現(xiàn)10.5關(guān)于我們模塊的實(shí)現(xiàn)10.6我們的優(yōu)勢(shì)模塊的實(shí)現(xiàn)10.7我們的服務(wù)模塊的實(shí)現(xiàn)10.8運(yùn)輸物流模塊的實(shí)現(xiàn)10.9最新資訊模塊的實(shí)現(xiàn)10.10版尾的實(shí)現(xiàn)10.1110.1

項(xiàng)目描述由于移動(dòng)設(shè)備方便攜帶，目前移動(dòng)端用戶數(shù)量倍增，已超過(guò)PC端，所以各大企業(yè)比較注重網(wǎng)站的響應(yīng)式開(kāi)發(fā)，本項(xiàng)目將帶領(lǐng)讀者完成一個(gè)物流公司的網(wǎng)站首頁(yè)的響應(yīng)式頁(yè)面設(shè)計(jì)。該怎樣開(kāi)發(fā)一個(gè)網(wǎng)站項(xiàng)目呢？定義一個(gè)存放網(wǎng)站中零散文件的文件夾。這樣，可以形成明晰的站點(diǎn)組織結(jié)構(gòu)圖。建立站點(diǎn)對(duì)頁(yè)面進(jìn)行布局，并添加CSS樣式。搭建頁(yè)面效果圖分析10.1

項(xiàng)目描述完成視口的配置；完成自定義的CSS文件（index-style.css）和JavaScript文件（jquery.min.js）的引入；完成頁(yè)面中模塊的分配，即最外層的盒子10.2

頁(yè)面結(jié)構(gòu)的搭建建立站點(diǎn)頁(yè)面結(jié)構(gòu)搭建效果圖分析搭建頁(yè)面10.2

頁(yè)面結(jié)構(gòu)的搭建模塊結(jié)構(gòu)10.3

頂部通欄建立站點(diǎn)頁(yè)面結(jié)構(gòu)搭建效果圖分析搭建頁(yè)面頂部通欄10.3

頂部通欄頂部通欄?本項(xiàng)目的頂部通欄在PC端的頁(yè)面效果?本項(xiàng)目的頂部通欄在iPad上的頁(yè)面效果?本項(xiàng)目的頂部通欄在iPhone6/7/8上的頁(yè)面效果10.3

頂部通欄頂部通欄頁(yè)面結(jié)構(gòu)10.4

導(dǎo)航欄建立站點(diǎn)效果圖分析搭建頁(yè)面頁(yè)面結(jié)構(gòu)搭建頂部通欄導(dǎo)航欄10.4

導(dǎo)航欄導(dǎo)航欄?本項(xiàng)目的導(dǎo)航欄在PC端的頁(yè)面效果?鼠標(biāo)指針懸停在“關(guān)于我們”導(dǎo)航欄選項(xiàng)上時(shí)，PC端的頁(yè)面效果?選擇漢堡菜單命令后在iPad或iPhone6/7/8上的頁(yè)面效果?本項(xiàng)目的導(dǎo)航欄在iPad或iPhone6/7/8上的頁(yè)面效果10.4

導(dǎo)航欄導(dǎo)航欄頁(yè)面結(jié)構(gòu)10.5

輪播圖建立站點(diǎn)效果圖分析搭建頁(yè)面頁(yè)面結(jié)構(gòu)搭建頂部通欄導(dǎo)航欄輪播圖10.5

輪播圖輪播圖?本項(xiàng)目的輪播圖在PC端的頁(yè)面效果?本項(xiàng)目的輪播圖在iPad或iPhone6/7/8上的頁(yè)面效果10.5

輪播圖輪播圖頁(yè)面結(jié)構(gòu)10.6

關(guān)于我們模塊建立站點(diǎn)效果圖分析搭建頁(yè)面關(guān)于我們模塊頁(yè)面結(jié)構(gòu)搭建頂部通欄導(dǎo)航欄輪播圖10.6

關(guān)于我們模塊關(guān)于我們模塊?本項(xiàng)目的關(guān)于我們模塊在PC端的頁(yè)面效果?本項(xiàng)目的關(guān)于我們模塊在iPhone6/7/8端的頁(yè)面效果10.6

關(guān)于我們模塊關(guān)于我們模塊頁(yè)面結(jié)構(gòu)10.7

我們的優(yōu)勢(shì)模塊建立站點(diǎn)效果圖分析搭建頁(yè)面頁(yè)面結(jié)構(gòu)搭建頂部通欄導(dǎo)航欄輪播圖關(guān)于我們模塊我們的優(yōu)勢(shì)10.7

我們的優(yōu)勢(shì)模塊我們的優(yōu)勢(shì)模塊?本項(xiàng)目的我們的優(yōu)勢(shì)模塊在PC端的頁(yè)面效果?本項(xiàng)目的我們的優(yōu)勢(shì)模塊在iPhone6/7/8端的頁(yè)面效果10.7

我們的優(yōu)勢(shì)模塊我們的優(yōu)勢(shì)模塊?本項(xiàng)目的我們的優(yōu)勢(shì)模塊在iPad端的頁(yè)面效果10.7

我們的優(yōu)勢(shì)模塊我們的優(yōu)勢(shì)模塊頁(yè)面結(jié)構(gòu)關(guān)于我們模塊我們的優(yōu)勢(shì)我們的服務(wù)輪播圖頁(yè)面結(jié)構(gòu)搭建頂部通欄導(dǎo)航欄10.8

我們的服務(wù)模塊建立站點(diǎn)效果圖分析搭建頁(yè)面10.8我們的服務(wù)模塊我們的服務(wù)模塊?本項(xiàng)目的我們的服務(wù)模塊在PC端的頁(yè)面效果?當(dāng)鼠標(biāo)指針懸停在服務(wù)項(xiàng)目上時(shí)，我們的服務(wù)模塊在PC端的頁(yè)面效果10.8我們的服務(wù)模塊我們的服務(wù)模塊?本項(xiàng)目的我們的服務(wù)模塊在iPad或iPhone6/7/8上的頁(yè)面效果10.8

我們的服務(wù)模塊我們的服務(wù)模塊頁(yè)面結(jié)構(gòu)10.9

運(yùn)輸物流模塊建立站點(diǎn)效果圖分析搭建頁(yè)面頁(yè)面結(jié)構(gòu)搭建頂部通欄導(dǎo)航欄輪播圖關(guān)于我們模塊我們的優(yōu)勢(shì)我們的服務(wù)運(yùn)輸物流模塊頁(yè)面結(jié)構(gòu)搭建頂部通欄10.9

運(yùn)輸物流模塊運(yùn)輸物流模塊?本項(xiàng)目的運(yùn)輸物流模塊在PC端的頁(yè)面效果?本項(xiàng)目的運(yùn)輸物流模塊在iPad或iPhone6/7/8上的頁(yè)面效果10.9

運(yùn)輸物流模塊運(yùn)輸物流模塊頁(yè)面結(jié)構(gòu)10.10

最新資訊模塊建立站點(diǎn)效果圖分析搭建頁(yè)面頁(yè)面結(jié)構(gòu)搭建頂部通欄導(dǎo)航欄輪播圖關(guān)于我們模塊我們的優(yōu)勢(shì)我們的服務(wù)運(yùn)輸物流模塊頁(yè)面結(jié)構(gòu)搭建頂部通欄最新資訊模塊10.10

最新資訊模塊最新資訊模塊?本項(xiàng)目的最新資訊模塊在PC端的頁(yè)面效果?鼠標(biāo)指針懸停在最新資訊列表項(xiàng)上時(shí)，最新資訊模塊在PC端的頁(yè)面效果10.10

最新資訊模塊最新資訊模塊?鼠標(biāo)指針懸停在右側(cè)“鐵路貨運(yùn)改革一周年：從“鐵老大”變身“店小二””標(biāo)題上時(shí)，最新資訊模塊在PC端的頁(yè)面效果?本項(xiàng)目的最新資訊模塊在iPad上的頁(yè)面效果10.10

最新資訊模塊最新資訊模塊?本項(xiàng)目的最新資訊模塊在iPhone/7/8上的頁(yè)面效果10.10

最新資訊模塊最新資訊模塊頁(yè)面結(jié)構(gòu)10.11

版尾建立站點(diǎn)效果圖分析搭建頁(yè)面頁(yè)面結(jié)構(gòu)搭建頂部通欄導(dǎo)航欄輪播圖關(guān)于我們模塊我們的優(yōu)勢(shì)我們的服務(wù)運(yùn)輸物流模塊頁(yè)面結(jié)構(gòu)搭建頂部通欄最新資訊模塊版尾10.11

版尾版尾?本項(xiàng)目的版尾在PC端、iPad上和iPhone6/7/8上的