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

更新時間:2021-07-14 來源:黑馬程序員瀏覽量:

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

更多章節(jié)>>

適用人群

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

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

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

教程目錄

一、HTML 01-認知

　　1. HTML的基本語法

　　2. HTML的排版標簽

　　3. 絕對路徑和相對路徑

　　4. HTML的多媒體標簽

　　5. HTML的鏈接標簽

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

二、HTML 02-基礎

　　1. HTML的列表標簽

　　2. HTML的表格標簽

　　3. HTML的表單系列標簽

　　4. HTML的語義化布局標簽

　　5. HTML的字符實體

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

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

　　1. CSS的引入方式

　　2. CSS的標簽、類、ID、通配符選擇器

　　3. CSS的字體相關樣式

　　4. CSS的文本相關樣式

　　5. CSS的水平居中技巧

　　6. Chrome調試工具的使用

　　7. 案例：新聞網頁案例、卡片居中案例

四、CSS 02-選擇器進階+背景相關屬性+元素顯示模式+三大特性

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

　　2. emmet基本語法

　　3. hover偽類選擇器

　　4. CSS的背景相關屬性

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

　　6. CSS三大特性：繼承性

　　7. CSS三大特性：層疊性

　　8. 案例：五彩導航案例

五、CSS 03-盒子模型

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

　　2. CSS的權重疊加計算方法

　　3. 盒子模型的組成部分

　　4. 盒子模型的邊框、內邊距、外邊距的作用和代碼實現

　　5. 外邊距折疊現象

　　6. 案例：新浪導航案例、網頁新聞列表案例

六、CSS 04-浮動

　　1. CSS的結構偽類選擇器

　　2. 偽元素的基本使用

　　3. 標準流的排布規(guī)則

　　4. 浮動的特點和使用

　　5. 清除浮動的常見方法

　　6. 案例：小米布局案例、網頁導航案例

七、CSS 05-定位+裝飾

　　1. 定位的特點和使用

　　2. 垂直對齊方式

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

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

　　5. CSS完成三角形效果

　　6. CSS的鏈接偽類選擇器

　　7. CSS的焦點偽類選擇器

　　8. CSS的屬性選擇器

　　9. 案例：卡片模塊hot圖標案例、導航二維碼居中定位案例

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

　　1. 精靈圖的使用

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

　　3. 文字和文本陰影效果

　　4. SEO三大標簽

　　5. 項目結構搭建和基礎公共樣式

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

九、小兔鮮02-header+footer+主體內容

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

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

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

十、CSS3高級

　　1. 平面轉換

　　2. 空間轉換

　　3. 動畫

十一、 Flex布局模型

　　1. Flex布局模型的使用

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

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

十二、移動端網頁適配方案

　　1. Rem基本使用

　　2. Rem + 媒體查詢適配

　　3. Rem + flexible適配

　　4. Rem適配原理

　　5. 項目：游樂園

　　6. vw/vh基本使用

　　7. vw/vh適配原理

　　8. 項目：B站

十三、響應式

　　1. 媒體查詢基本使用

　　2. 媒體查詢實現響應式網頁效果

　　3. Bootstrap框架基本使用

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

　　5. 項目：騰訊全端