全面系統(tǒng)講解CSS 工作應(yīng)用+面試一步搞定
CSS是前端開(kāi)發(fā)過(guò)程中必不可少的知識(shí)點(diǎn),也是最難徹底掌握的部分。本課程系統(tǒng)梳理CSS中各方面的知識(shí)點(diǎn),幫助前端工程師更清晰地了解實(shí)際工作中如何應(yīng)用CSS技術(shù)的,更好地面對(duì)日常使用和順利通過(guò)面試關(guān)!
第1章 課程介紹
對(duì)課程整體進(jìn)行介紹
1-1 導(dǎo)學(xué)
第2章 HTML基礎(chǔ)強(qiáng)化
講解HTML常見(jiàn)元素、版本(HTML4/XHTML/HTML5的關(guān)系)以及HTML元素的分類(lèi)和嵌套關(guān)系。關(guān)注元素默認(rèn)樣式和定制化。
2-1 HTML常見(jiàn)元素和理解(1)
2-2 HTML常見(jiàn)元素和理解(2)
2-3 HTML常見(jiàn)元素和理解(3)
2-4 HTML版本
2-5 元素分類(lèi)
2-6 嵌套關(guān)系
2-7 默認(rèn)樣式和reset
2-8 真題
第3章 CSS基礎(chǔ)
全面講解CSS基礎(chǔ)知識(shí),包括層疊樣式表的基本規(guī)則和含義、選擇器(分類(lèi)、特性、權(quán)重、性能)、非布局樣式屬性、CSS hack以及一些案例分析(checkbox等)。
3-1 選擇器(1)
3-2 選擇器(2)
3-3 非布局樣式(字體)
3-4 非布局樣式(行高)
3-5 非布局樣式(背景)
3-6 非布局樣式(邊框)
3-7 非布局樣式(滾動(dòng))
3-8 非布局樣式(文本折行)
3-9 非布局樣式(裝飾性屬性)
3-10 hack和案例(1)
3-11 hack和案例(2)
3-12 面試題(1)
3-13 面試題(2)
第4章 CSS布局
講解布局樣式屬性(display/position/z-index/flex/float)以及它們之間的關(guān)系和組合使用。以三欄布局案例講解常見(jiàn)的布局方式(float/absolute/margin/table-cell/flex)。
4-1 布局簡(jiǎn)介
4-2 布局方式(表格)
4-3 一些布局屬性
4-4 flexbox布局
4-5 float布局
4-6 inline-block布局
4-7 響應(yīng)式布局(1)
4-8 響應(yīng)式布局(2)
4-9 主流網(wǎng)站使用的布局方式
4-10 CSS面試題
第5章 CSS效果
講解效果相關(guān)屬性(box-shadow/border-radius/background/clip-path)及應(yīng)用。重點(diǎn)講解多背景、多投影的應(yīng)用和3D效果實(shí)踐。
5-1 box-shadow
5-2 text-shadow_x264
5-3 border-radius
5-4 background
5-5 clip-path
5-6 3D-transform
5-7 CSS面試真題
第6章 CSS動(dòng)畫(huà)
講解動(dòng)畫(huà)的原理和基本概念(補(bǔ)間、關(guān)鍵幀、逐幀),以及動(dòng)畫(huà)的作用(提示、引起注意、提升體驗(yàn))。然后講解transition動(dòng)畫(huà)、關(guān)鍵幀動(dòng)畫(huà)和逐幀動(dòng)畫(huà)的實(shí)現(xiàn),最后關(guān)注動(dòng)畫(huà)高級(jí)控制技巧(起止、循環(huán)、easing、事件)。
6-1 動(dòng)畫(huà)介紹
6-2 transition動(dòng)畫(huà)(1)
6-3 transition動(dòng)畫(huà)(2)
6-4 keyframes動(dòng)畫(huà)
6-5 逐幀動(dòng)畫(huà)
6-6 CSS面試真題
第7章 預(yù)處理器
講解預(yù)處理的作用,使用常見(jiàn)的兩種預(yù)處理語(yǔ)言(Sass / Less)講解預(yù)處理器常用特性(嵌套、變量、Mixin、Extend、循環(huán)、模塊化等)。最后以EST為例講解預(yù)處理庫(kù)的使用。
7-1 介紹
7-2 less嵌套
7-3 sass嵌套(1)
7-4 sass嵌套(2)
7-5 less變量
7-6 sass變量
7-7 less mixin
7-8 sass mixin
7-9 less extend
7-10 sass extend
7-11 less loop
7-12 sass loop
7-13 less import
7-14 sass import
7-15 預(yù)處理器框架(1)
7-16 預(yù)處理器框架(2)
7-17 真題
第8章 Bootstrap
講解Bootstrap的原理和基本使用方式,響應(yīng)式布局的原理和使用以及Bootstrap的定制。
8-1 Bootstrap介紹
8-2 Bootstrap基本用法(1)
8-3 Bootstrap基本用法(2)
8-4 Bootstrap JS組件
8-5 Bootstrap 響應(yīng)式布局
8-6 Bootstrap 定制化
8-7 CSS真題
第9章 CSS工程化方案
講解PostCSS和基于PostCSS的CSS工程化體系(autoprefixier / cssnext等),然后講解CSS模塊化方案(css modules),最后以webpack為工具講解CSS文件的組織和打包構(gòu)建。
9-1 PostCSS介紹
9-2 PostCSS插件的使用(1)
9-3 PostCSS插件的使用(2)
9-4 cssnext
9-5 precss
9-6 gulp-postcss
9-7 webpack
9-8 webpack處理CSS
9-9 css-modules和extract-text-plugin
9-10 webpack小結(jié)
9-11 真題
第10章 三大框架中的CSS
分別講解在Angular React和Vue中如何利用框架提供的CSS特性來(lái)處理CSS代碼。
10-1 Angular中的CSS(1)
10-2 Angular中的CSS(2)
10-3 Angular中的CSS(3)
10-4 Vue中的CSS(1)
10-5 Vue中的CSS(2)
10-6 React中的CSS(1)
10-7 React中的CSS(2)
10-8 React中的CSS(3)
10-9 React中的CSS(4)
第11章 實(shí)戰(zhàn)案例
通過(guò)一個(gè)實(shí)際項(xiàng)目,來(lái)真真切切了解CSS在企業(yè)中是如何應(yīng)用
11-1 案例介紹
11-2 header
11-3 banner
11-4 main
11-5 footer和頁(yè)面調(diào)整
11-6 動(dòng)畫(huà)
11-7 progress
11-8 dialog
第12章 課程總結(jié)
對(duì)課程整體進(jìn)行總結(jié)
12-1 課程總結(jié)
158資源整合網(wǎng):提供各類(lèi)學(xué)習(xí)資源,名師講座視頻,培訓(xùn)課程視頻,音頻,文檔等···各類(lèi)教程下載觀看。