課程亮點(diǎn)
1
理論與實(shí)踐并重,真正注重實(shí)用技術(shù)培養(yǎng)
適用對(duì)象
1
零基礎(chǔ)
課程內(nèi)容
前端頁(yè)面重構(gòu):
本章是前端入門(mén)章節(jié),主要介紹靜態(tài)頁(yè)面布局的實(shí)現(xiàn),包括PC端布局、移動(dòng)端布局和響應(yīng)式布局。學(xué)完本階段課程能夠獨(dú)立把設(shè)計(jì)師給的PSD效果圖轉(zhuǎn)換為靜態(tài)代碼頁(yè)面,具備PC端和移動(dòng)端靜態(tài)頁(yè)面的開(kāi)發(fā)能力,并可以適配不同的終端設(shè)備。
學(xué)習(xí)內(nèi)容:
HTML:HTML簡(jiǎn)介、語(yǔ)法、屬性和值、注釋、基本結(jié)構(gòu)、常用標(biāo)簽、語(yǔ)義化
CSS:基本語(yǔ)法、選擇器、文本屬性、盒模型、浮動(dòng)及清除浮動(dòng)、position定位、瀏覽器兼容、CSS hack、CSS高級(jí)技巧、BFC規(guī)范
HTML5:HTML5簡(jiǎn)介、新增的結(jié)構(gòu)化標(biāo)簽、音頻和視頻、新增表單元素、新增表單屬性、html5shiv.js
CSS3:css3新增選擇器、背景和漸變、用戶界面屬性、多列布局、圓角和陰影、過(guò)渡動(dòng)畫(huà)、2D與3D轉(zhuǎn)換、彈性盒布局、Grid網(wǎng)格布局、流式布局
Less:css預(yù)處理、Less編輯、Koala編譯工具、導(dǎo)入、注釋、變量、混合、嵌套、運(yùn)算、內(nèi)置函數(shù)
Photoshop:PS基本操作、psd文件、網(wǎng)頁(yè)圖片優(yōu)化技巧、圖片格式分類(lèi)及特性、GIF動(dòng)態(tài)制作、一鍵切圖插件
頁(yè)面布局與屏幕適配:移動(dòng)端瀏覽器及內(nèi)核分析、viewport設(shè)置、Retina高清屏、PPI、dpr設(shè)備像素比解析、媒體查詢、vw+rem布局、flexible.js+rem布局、媒體查詢+rem、移動(dòng)端reset
實(shí)戰(zhàn)項(xiàng)目:
PC端項(xiàng)目:小U課堂靜態(tài)頁(yè)面布局、移動(dòng)端項(xiàng)目:小U商城移動(dòng)端項(xiàng)目、響應(yīng)式項(xiàng)目:小U商城后臺(tái)管理系統(tǒng)
