Web前端教程：Web前端HTML5+CSS3+移動Web【傳智教育】

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

更多章節(jié)>>

---

適用人群

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

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

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

教程目錄

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

　　1. HTML的基本語法

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

　　3. 絕對路徑和相對路徑

　　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的語義化布局標(biāo)簽

　　5. HTML的字符實體

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

       三、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)頁案例、卡片居中案例

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

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

　　2. emmet基本語法

　　3. hover偽類選擇器

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

　　5. 三種常見的元素顯示模式

　　6. CSS三大特性：繼承性

　　7. CSS三大特性：層疊性

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

       五、CSS 03-盒子模型

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

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

　　3. 盒子模型的組成部分

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

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

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

       六、CSS 04-浮動

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

　　2. 偽元素的基本使用

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

　　4. 浮動的特點和使用

　　5. 清除浮動的常見方法

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

       七、CSS 05-定位+裝飾

　　1. 定位的特點和使用

　　2. 垂直對齊方式

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

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

　　5. CSS完成三角形效果

　　6. CSS的鏈接偽類選擇器

　　7. CSS的焦點偽類選擇器

　　8. CSS的屬性選擇器

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

       八、小兔鮮 01-項目前置樣式+項目搭建

　　1. 精靈圖的使用

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

　　3. 文字和文本陰影效果

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

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

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

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

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

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

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

       十、CSS3高級

　　1. 平面轉(zhuǎn)換

　　2. 空間轉(zhuǎn)換

　　3. 動畫

       十一、 Flex布局模型

　　1. Flex布局模型的使用

　　2. 項目：小兔鮮兒-移動端

　　3. 項目：小兔鮮兒-PC端

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

　　1. Rem基本使用

　　2. Rem + 媒體查詢適配

　　3. Rem + flexible適配

　　4. Rem適配原理

　　5. 項目：游樂園

　　6. vw/vh基本使用

　　7. vw/vh適配原理

　　8. 項目：B站

       十三、響應(yīng)式

　　1. 媒體查詢基本使用

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

　　3. Bootstrap框架基本使用

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

　　5. 項目：騰訊全端

適用人群

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

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

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

教程目錄

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

　　1. HTML的基本語法

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

　　3. 絕對路徑和相對路徑

　　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的語義化布局標(biāo)簽

　　5. HTML的字符實體

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

       三、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)頁案例、卡片居中案例

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

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

　　2. emmet基本語法

　　3. hover偽類選擇器

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

　　5. 三種常見的元素顯示模式

　　6. CSS三大特性：繼承性

　　7. CSS三大特性：層疊性

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

       五、CSS 03-盒子模型

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

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

　　3. 盒子模型的組成部分

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

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

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

       六、CSS 04-浮動

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

　　2. 偽元素的基本使用

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

　　4. 浮動的特點和使用

　　5. 清除浮動的常見方法

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

       七、CSS 05-定位+裝飾

　　1. 定位的特點和使用

　　2. 垂直對齊方式

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

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

　　5. CSS完成三角形效果

　　6. CSS的鏈接偽類選擇器

　　7. CSS的焦點偽類選擇器

　　8. CSS的屬性選擇器

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

       八、小兔鮮 01-項目前置樣式+項目搭建

　　1. 精靈圖的使用

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

　　3. 文字和文本陰影效果

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

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

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

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

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

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

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

       十、CSS3高級

　　1. 平面轉(zhuǎn)換

　　2. 空間轉(zhuǎn)換

　　3. 動畫

       十一、 Flex布局模型

　　1. Flex布局模型的使用

　　2. 項目：小兔鮮兒-移動端

　　3. 項目：小兔鮮兒-PC端

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

　　1. Rem基本使用

　　2. Rem + 媒體查詢適配

　　3. Rem + flexible適配

　　4. Rem適配原理

　　5. 項目：游樂園

　　6. vw/vh基本使用

　　7. vw/vh適配原理

　　8. 項目：B站

       十三、響應(yīng)式

　　1. 媒體查詢基本使用

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

　　3. Bootstrap框架基本使用

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

　　5. 項目：騰訊全端

更多前端開發(fā)視頻教程>>

猜你喜歡：

前端教程：一天掌握企業(yè)級微信小程序的開發(fā)與應(yīng)用

移動web端頁面設(shè)置特殊樣式

傳智播客H5教程：HTML5+CSS3視頻教程【百度云盤下載】

傳智教育前端開發(fā)培訓(xùn)