更新時(shí)間:2023年04月18日16時(shí)51分 來源:傳智教育 瀏覽次數(shù):
本課程采用2+5模式, 前兩天承接HTML+CSS, 使用字體圖標(biāo)、平面轉(zhuǎn)換、動(dòng)畫等,豐富網(wǎng)頁(yè)效果和呈現(xiàn)方式;后5天完成移動(dòng)端和多端適配效果。課程采用閉環(huán)方式設(shè)計(jì),每天課程都有完整的案例或項(xiàng)目, 讓學(xué)生學(xué)以致用。
每章節(jié)都配備綜合案例,學(xué)完即練習(xí)企業(yè)級(jí)項(xiàng)目,讓學(xué)生不僅掌握知識(shí)點(diǎn),還能學(xué)到知識(shí)點(diǎn)在實(shí)際開發(fā)中的應(yīng)用場(chǎng)景。
1. 實(shí)戰(zhàn)式教學(xué):每章節(jié)案例都取自一線大廠;
2. 多元化項(xiàng)目:項(xiàng)目選型涵蓋企業(yè)站、電商站、門戶網(wǎng)站等等;
只要大家有需求
我們的視頻教程就絕不會(huì)缺席
黑馬程序員重磅發(fā)布新教程
1.字體圖標(biāo)
2.CSS3平面、空間轉(zhuǎn)換;
3.CSS3動(dòng)畫;
4.Flex布局;
5.Rem布局;
6.Less;
7.二倍圖;
8.vw / vh布局;
9.媒體查詢;
10.bootstrap框架;
11.響應(yīng)式網(wǎng)頁(yè)布局;
移動(dòng)Web實(shí)戰(zhàn)(滑動(dòng)查看)
第1節(jié) - 階段課程介紹
第2節(jié) - 今日課程介紹
第3節(jié) - 字體圖標(biāo)-基本使用
第4節(jié) - 字體圖標(biāo)-iconfont類
第5節(jié) - 案例-購(gòu)物車
第6節(jié) - 07字體圖標(biāo)-svg-上傳
第7節(jié) - 平面轉(zhuǎn)換-介紹
第8節(jié) - 平面轉(zhuǎn)換-位移
第9節(jié) - 平面轉(zhuǎn)換-位移-技巧
第10節(jié) - 平面轉(zhuǎn)換-定位盒子居中
第11節(jié) - 案例-雙開門-布局
第12節(jié) - 案例-雙開門-hover效果
第13節(jié) - 平面轉(zhuǎn)換旋轉(zhuǎn)
第14節(jié) - 平面轉(zhuǎn)換-轉(zhuǎn)換原點(diǎn)
第15節(jié) - 平面轉(zhuǎn)換-多重轉(zhuǎn)換
第16節(jié) - 平面轉(zhuǎn)換-縮放
第17節(jié) - 案例-縮放
第18節(jié) - 案例-縮放-注意點(diǎn)-層疊性
第19節(jié) - 漸變
第20節(jié) - 案例-漸變
第21節(jié) - 綜合案例-華為-結(jié)構(gòu)分析
第22節(jié) - 綜合案例-華為-mask
第23節(jié) - 綜合案例-華為-hover效果
第24節(jié) - 今日課程介紹
第25節(jié) - 空間轉(zhuǎn)換-簡(jiǎn)介
第26節(jié) - 空間轉(zhuǎn)換-位移
第27節(jié) - 空間轉(zhuǎn)換-透視屬性
第28節(jié) - 空間轉(zhuǎn)換-透視屬性-原理
第29節(jié) - 空間轉(zhuǎn)換-rotateZ
第30節(jié) - 空間轉(zhuǎn)換-rotateX
第31節(jié) - 空間轉(zhuǎn)換-rotateY
第32節(jié) - 空間轉(zhuǎn)換-左手法則
第33節(jié) - 空間轉(zhuǎn)換-rotate3d-了解
第34節(jié) - 空間轉(zhuǎn)換-立體呈現(xiàn)
第35節(jié) - 3d導(dǎo)航-結(jié)構(gòu)分析
第36節(jié) - 3d導(dǎo)航-搭建立方體
第37節(jié) - 3d導(dǎo)航-hover
第38節(jié) - 上午回顧
第39節(jié) - 空間轉(zhuǎn)換-縮放
第40節(jié) - 動(dòng)畫-簡(jiǎn)介
第41節(jié) - 動(dòng)畫-from..to
第42節(jié) - 動(dòng)畫-百分比
第43節(jié) - 動(dòng)畫-animation復(fù)合屬性01
第44節(jié) - 動(dòng)畫-animation復(fù)合屬性02
第45節(jié) - 動(dòng)畫-animation拆分寫法
第46節(jié) - 動(dòng)畫-逐幀動(dòng)畫-簡(jiǎn)介
第47節(jié) - 動(dòng)畫-逐幀動(dòng)畫-實(shí)現(xiàn)
第48節(jié) - 動(dòng)畫-多組動(dòng)畫
第49節(jié) - 綜合案例-走馬燈
第50節(jié) - 綜合案例-全民出游-背景大圖
第51節(jié) - 綜合案例-全民出游-云彩-布局
第52節(jié) - 綜合案例-全民出游-云彩-動(dòng)畫
第53節(jié) - 考試題
第54節(jié) - 課程介紹
第55節(jié) - 課程知識(shí)介紹
第56節(jié) - PC和移動(dòng)網(wǎng)頁(yè)不同點(diǎn)
第57節(jié) - 谷歌模擬器
第58節(jié) - 分辨率
第59節(jié) - 代碼參考分辨率-邏輯
第60節(jié) - 視口
第61節(jié) - 二倍圖
第62節(jié) - 百分比布局
第63節(jié) - Flex-體驗(yàn)
第64節(jié) - Flex-簡(jiǎn)介
第65節(jié) - Flex-組成
第66節(jié) - Flex-主軸對(duì)齊方式
第67節(jié) - Flex-側(cè)軸對(duì)齊方式
第68節(jié) - Flex-單獨(dú)控制某個(gè)盒子側(cè)軸對(duì)齊方式
第69節(jié) - Flex-彈性盒子尺寸特點(diǎn)
第70節(jié) - Flex-彈性伸縮比
第71節(jié) - 小兔鮮兒-確認(rèn)訂單-準(zhǔn)備工作
第72節(jié) - 小兔鮮兒-確認(rèn)訂單-整體布局
第73節(jié) - 小兔鮮兒-確認(rèn)訂單-底部支付-布局
第74節(jié) - 小兔鮮兒-確認(rèn)訂單-底部支付-左側(cè)
第75節(jié) - 小兔鮮兒-確認(rèn)訂單-底部支付-右側(cè)
第76節(jié) - 小兔鮮兒-確認(rèn)訂單-用戶信息-整體布局
第77節(jié) - 小兔鮮兒-確認(rèn)訂單-用戶信息-內(nèi)容布局
第78節(jié) - 小兔鮮兒-確認(rèn)訂單-用戶信息-文字內(nèi)容
第79節(jié) - 課程介紹
第80節(jié) - 小兔鮮兒-商品-布局
第81節(jié) - 小兔鮮兒-商品-數(shù)量
第82節(jié) - 小兔鮮兒-商品-描述
第83節(jié) - 小兔鮮兒-其他信息-布局
第84節(jié) - 小兔鮮兒-其他信息-內(nèi)容
第85節(jié) - Flex-修改主軸方向
第86節(jié) - Flex-主軸方向和對(duì)齊方式
第87節(jié) - Flex-彈性盒子換行
第88節(jié) - Flex-調(diào)整行對(duì)齊方式
第89節(jié) - 小兔鮮兒-pc-項(xiàng)目介紹
第90節(jié) - 小兔鮮兒-pc-背景
第91節(jié) - 小兔鮮兒-pc-內(nèi)容布局
第92節(jié) - 小兔鮮兒-pc-賬戶概覽-布局
第93節(jié) - 小兔鮮兒-pc-賬戶概覽-內(nèi)容
第94節(jié) - 小兔鮮兒-pc-賬戶概覽-圖片尺寸
第95節(jié) - 小兔鮮兒-pc-公共面板-布局
第96節(jié) - 小兔鮮兒-pc-公共面板-文字樣式
第97節(jié) - 小兔鮮兒-pc-訂單-li布局
第98節(jié) - 小兔鮮兒-pc-訂單-內(nèi)容布局
第99節(jié) - 小兔鮮兒-pc-訂單-goods
第100節(jié) - 小兔鮮兒-pc-訂單-goods-省略號(hào)
第101節(jié) - 小兔鮮兒-pc-訂單-common
第102節(jié) - 移動(dòng)適配
第103節(jié) - 今日課程介紹
第104節(jié) - 體驗(yàn)rem移動(dòng)適配
第105節(jié) - rem-基本使用
第106節(jié) - rem-媒體查詢
第107節(jié) - rem-移動(dòng)適配
第108節(jié) - rem-布局流程
第109節(jié) - rem-flexible移動(dòng)適配
第110節(jié) - Less-體驗(yàn)
第111節(jié) - Less-簡(jiǎn)介
第112節(jié) - Less-EasyLess插件
第113節(jié) - Less-注釋
第114節(jié) - Less-計(jì)算
第115節(jié) - Less-嵌套
第116節(jié) - Less-變量
第117節(jié) - Less-導(dǎo)入
第118節(jié) - Less-導(dǎo)出-插件配置
第119節(jié) - Less-導(dǎo)出-單獨(dú)路徑
第120節(jié) - Less-禁止導(dǎo)出
第121節(jié) - 游樂園-項(xiàng)目準(zhǔn)備
第122節(jié) - 游樂園-Less-導(dǎo)入
第123節(jié) - 游樂園-整體布局
第124節(jié) - 游樂園-根字號(hào)變量
第125節(jié) - 游樂園-banner區(qū)域
第126節(jié) - 游樂園-活動(dòng)標(biāo)題
第127節(jié) - 游樂園-活動(dòng)-布局
第128節(jié) - 游樂園-活動(dòng)-字體圖標(biāo)
第129節(jié) - 游樂園-活動(dòng)-狀態(tài)-藍(lán)色
第130節(jié) - 游樂園-活動(dòng)-狀態(tài)-灰色
第131節(jié) - 游樂園-活動(dòng)-文字-top
第132節(jié) - 游樂園-活動(dòng)-文字-bottom
第133節(jié) - 游樂園-活動(dòng)-內(nèi)容復(fù)制
第134節(jié) - 游樂園-活動(dòng)-底部工具欄
第135節(jié) - vw-體驗(yàn)
第136節(jié) - vh-體驗(yàn)
第137節(jié) - vw-移動(dòng)適配
第138節(jié) - vh-移動(dòng)適配
第139節(jié) - vh-全面屏影響
第140節(jié) - B站-獲取素材
第141節(jié) - B站-項(xiàng)目準(zhǔn)備
第142節(jié) - B站-頭部-布局
第143節(jié) - B站-vw變量
第144節(jié) - B站-頭部-logo圖標(biāo)
第145節(jié) - B站-頭部-right內(nèi)容
第146節(jié) - B站-頭部-更多
第147節(jié) - B站-頭部-字體圖標(biāo)字號(hào)
第148節(jié) - B站-頭部-tab
第149節(jié) - B站-視頻-布局
第150節(jié) - B站-視頻-思路
第151節(jié) - B站-視頻-介紹文字
第152節(jié) - B站-視頻-數(shù)量統(tǒng)計(jì)
第153節(jié) - B站-視頻-彈性盒子換行
第154節(jié) - B站-頭部-層級(jí)和背景色
第155節(jié) - 課程介紹
第156節(jié) - 媒體查詢-max-min-width
第157節(jié) - 媒體查詢-書寫順序
第158節(jié) - 了解-媒體查詢-完整寫法
第159節(jié) - 媒體查詢-link寫法
第160節(jié) - 媒體查詢-隱藏
第161節(jié) - bootstrap-體驗(yàn)
第162節(jié) - bootstrap-簡(jiǎn)介
第163節(jié) - bootstrap-下載
第164節(jié) - bootstrap-使用
第165節(jié) - bootstrap-柵格系統(tǒng)-原理
第166節(jié) - bootstrap-柵格系統(tǒng)-代碼
第167節(jié) - bootstrap-柵格系統(tǒng)-其他類名
第168節(jié) - bootstrap-介紹
第169節(jié) - bootstrap-表格
第170節(jié) - bootstrap-按鈕
第171節(jié) - bootstrap-組件
第172節(jié) - bootstrap-字體圖標(biāo)
第173節(jié) - bootstrap-插件-下拉菜單
第174節(jié) - bootstrap-插件-輪播圖
第175節(jié) - AlloyTeam-項(xiàng)目準(zhǔn)備
第176節(jié) - AlloyTeam-banner圖-高度
第177節(jié) - AlloyTeam-頭部-組件
第178節(jié) - AlloyTeam-頭部-樣式
第179節(jié) - bootstrap-定制-項(xiàng)目導(dǎo)航
第180節(jié) - AlloyTeam-開源項(xiàng)目-標(biāo)題文字
第181節(jié) - AlloyTeam-開源項(xiàng)目-柵格布局
第182節(jié) - AlloyTeam-開源項(xiàng)目-內(nèi)容
第183節(jié) - bootstrap-全局樣式
未完待續(xù),黑馬老師996更新中......
掌握行業(yè)熱門技術(shù)
是每個(gè)程序員都應(yīng)該重視的事情
移動(dòng)web開發(fā)實(shí)戰(zhàn)如此重要,你還沒學(xué)?
點(diǎn)擊或搜索黑馬程序員B站
觀看全集視頻
- 完整配套資料領(lǐng)取方式 -
(視頻+講義+源碼+筆記+資料)
黑馬程序員視頻庫(kù)
北京校區(qū)