Web前端HTML5+CSS3+移動(dòng)Web全套【黑馬程序員最新課程】

更新時(shí)間:2021-07-14 來(lái)源:黑馬程序員瀏覽量:

教程簡(jiǎn)介：
本教程由淺入深的為你講解前端網(wǎng)頁(yè)開(kāi)發(fā)的每個(gè)技術(shù)要點(diǎn)，每天都以綜合案例的形式，讓你學(xué)以致用，不斷驗(yàn)證自己的成長(zhǎng)進(jìn)步。最終從零開(kāi)始還原企業(yè)中制作網(wǎng)頁(yè)的實(shí)際開(kāi)發(fā)流程，讓你能水到渠成的完成【互聯(lián)網(wǎng)大廠】企業(yè)級(jí)項(xiàng)目的開(kāi)發(fā)實(shí)戰(zhàn)，最終達(dá)成 Zero to Hero 的強(qiáng)勢(shì)蛻變。

更多章節(jié)>>

適用人群

　　1.對(duì)前端開(kāi)發(fā)感興趣的在校生及應(yīng)屆畢業(yè)生。

　　2.對(duì)目前職業(yè)有進(jìn)一步提升要求，希望從事前端行業(yè)高薪工作的在職人員。

　　3.對(duì)前端行業(yè)感興趣的相關(guān)人員。

教程目錄

一、HTML 01-認(rèn)知

　　1. HTML的基本語(yǔ)法

　　2. HTML的排版標(biāo)簽

　　3. 絕對(duì)路徑和相對(duì)路徑

　　4. HTML的多媒體標(biāo)簽

　　5. HTML的鏈接標(biāo)簽

　　6. 案例：招聘案例、今日熱詞案例

二、HTML 02-基礎(chǔ)

　　1. HTML的列表標(biāo)簽

　　2. HTML的表格標(biāo)簽

　　3. HTML的表單系列標(biāo)簽

　　4. HTML的語(yǔ)義化布局標(biāo)簽

　　5. HTML的字符實(shí)體

　　6.案例：學(xué)生信息表格案例、會(huì)員注冊(cè)表單案例

三、CSS 01-基礎(chǔ)選擇器+字體文本樣式

　　1. CSS的引入方式

　　2. CSS的標(biāo)簽、類、ID、通配符選擇器

　　3. CSS的字體相關(guān)樣式

　　4. CSS的文本相關(guān)樣式

　　5. CSS的水平居中技巧

　　6. Chrome調(diào)試工具的使用

　　7. 案例：新聞網(wǎng)頁(yè)案例、卡片居中案例

四、CSS 02-選擇器進(jìn)階+背景相關(guān)屬性+元素顯示模式+三大特性

　　1. CSS的后代、子代、并集、交集選擇器

　　2. emmet基本語(yǔ)法

　　3. hover偽類選擇器

　　4. CSS的背景相關(guān)屬性

　　5. 三種常見(jiàn)的元素顯示模式

　　6. CSS三大特性：繼承性

　　7. CSS三大特性：層疊性

　　8. 案例：五彩導(dǎo)航案例

五、CSS 03-盒子模型

　　1. CSS三大特性：優(yōu)先級(jí)

　　2. CSS的權(quán)重疊加計(jì)算方法

　　3. 盒子模型的組成部分

　　4. 盒子模型的邊框、內(nèi)邊距、外邊距的作用和代碼實(shí)現(xiàn)

　　5. 外邊距折疊現(xiàn)象

　　6. 案例：新浪導(dǎo)航案例、網(wǎng)頁(yè)新聞列表案例

六、CSS 04-浮動(dòng)

　　1. CSS的結(jié)構(gòu)偽類選擇器

　　2. 偽元素的基本使用

　　3. 標(biāo)準(zhǔn)流的排布規(guī)則

　　4. 浮動(dòng)的特點(diǎn)和使用

　　5. 清除浮動(dòng)的常見(jiàn)方法

　　6. 案例：小米布局案例、網(wǎng)頁(yè)導(dǎo)航案例

七、CSS 05-定位+裝飾

　　1. 定位的特點(diǎn)和使用

　　2. 垂直對(duì)齊方式

　　3. 邊框圓角完成正圓和膠囊按鈕效果

　　4. 元素顯示隱藏切換效果

　　5. CSS完成三角形效果

　　6. CSS的鏈接偽類選擇器

　　7. CSS的焦點(diǎn)偽類選擇器

　　8. CSS的屬性選擇器

　　9. 案例：卡片模塊hot圖標(biāo)案例、導(dǎo)航二維碼居中定位案例

八、小兔鮮 01-項(xiàng)目前置樣式+項(xiàng)目搭建

　　1. 精靈圖的使用

　　2. CSS的背景圖片大小屬性

　　3. 文字和文本陰影效果

　　4. SEO三大標(biāo)簽

　　5. 項(xiàng)目結(jié)構(gòu)搭建和基礎(chǔ)公共樣式

　　6. 實(shí)戰(zhàn)：實(shí)現(xiàn) 「小兔鮮兒項(xiàng)目」 header模塊開(kāi)發(fā)

九、小兔鮮02-header+footer+主體內(nèi)容

　　1. 實(shí)戰(zhàn)：實(shí)現(xiàn) 「小兔鮮兒項(xiàng)目」 header模塊開(kāi)發(fā)

　　2. 實(shí)戰(zhàn)：實(shí)現(xiàn) 「小兔鮮兒項(xiàng)目」網(wǎng)站入口xtx-entry模塊開(kāi)發(fā)

　　3. 實(shí)戰(zhàn)：實(shí)現(xiàn) 「小兔鮮兒項(xiàng)目」新鮮好物面板xtx-new-goods模塊開(kāi)發(fā)

十、CSS3高級(jí)

　　1. 平面轉(zhuǎn)換

　　2. 空間轉(zhuǎn)換

　　3. 動(dòng)畫

十一、 Flex布局模型

　　1. Flex布局模型的使用

　　2. 項(xiàng)目：小兔鮮兒-移動(dòng)端

　　3. 項(xiàng)目：小兔鮮兒-PC端

十二、移動(dòng)端網(wǎng)頁(yè)適配方案

　　1. Rem基本使用

　　2. Rem + 媒體查詢適配

　　3. Rem + flexible適配

　　4. Rem適配原理

　　5. 項(xiàng)目：游樂(lè)園

　　6. vw/vh基本使用

　　7. vw/vh適配原理

　　8. 項(xiàng)目：B站

十三、響應(yīng)式

　　1. 媒體查詢基本使用

　　2. 媒體查詢實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)效果

　　3. Bootstrap框架基本使用

　　4. Bootstrap框架柵格系統(tǒng)

　　5. 項(xiàng)目：騰訊全端