, G8 E; i' e$ m9 t: b2 @
$ W" B2 _* L/ M( s) y" a" \〖课程介绍〗7 y2 ?) [; i0 t: s o
CSS是前端开发过程中必不可少的知识点，也是最难彻底掌握的部分。本课程系统梳理CSS中各方面的知识点，帮助前端工程师更清晰地了解实际工作中如何应用CSS技术的，更好地面对日常使用和顺利通过面试关！+ k. ?5 {/ z" K( p9 a+ g$ Z9 k
' v- Y* [$ A6 w$ E3 H- ]/ ^4 u7 k0 |〖课程目录〗+ ~9 O' m2 x, `4 s
第1章 课程介绍8 y, @$ ]& p: t/ A" I$ ]
对课程整体进行介绍( ~9 x& N9 U: U; E- c) \
1-1 导学 试看' f2 R, i+ Q. @2 \ B- A: I4 ~- p
# t Z! Y7 I9 V Y( c第2章 HTML基础强化4 `' u, Z( F, `& ^
讲解HTML常见元素、版本（HTML4/XHTML/HTML5的关系）以及HTML元素的分类和嵌套关系。关注元素默认样式和定制化。
$ V* Q2 f, {) u/ ]# M2-1 HTML常见元素和理解（1）
2 r" ~: i+ f5 D3 d2-2 HTML常见元素和理解（2）
, \* A9 W3 t, c; |' h2-3 HTML常见元素和理解（3）
$ P- d2 Y. K$ y6 r. l* p2-4 HTML版本6 K! A- `8 ]/ s1 ]4 H' I' _) z
2-5 元素分类
: R2 u) I$ c* ~2-6 嵌套关系
9 [6 i9 [2 `8 \9 _, ^3 e6 w& \2-7 默认样式和reset$ @* I" a. {/ A- ^7 b. ?5 v @
2-8 真题
- h9 K: y+ B: d2 \5 B: D+ K. ]# f0 x. ^
第3章 CSS基础
( ^6 v' d# J# M/ t# P全面讲解CSS基础知识，包括层叠样式表的基本规则和含义、选择器（分类、特性、权重、性能）、非布局样式属性、CSS hack以及一些案例分析（checkbox等）。# l7 z1 L5 y. `: `8 s9 a$ n
3-1 选择器（1） 试看, r# H) J3 v/ v" r5 y
3-2 选择器（2）% L$ ~) Q" C! {, I1 q$ y& ^' p
3-3 非布局样式（字体）
1 J5 p/ z+ d' H# X$ G- O3-4 非布局样式（行高）
) I* R- a4 y! b% ^3-5 非布局样式（背景）
- |: `" l4 F% m* `3-6 非布局样式（边框）" v" n1 \0 Y& ~5 I6 }4 v: M; R
3-7 非布局样式（滚动）+ m% ^3 |3 K- i K6 P7 C7 |9 H
3-8 非布局样式（文本折行）
' V4 {' P9 i# ?; w: D3-9 非布局样式（装饰性属性）
0 @) U4 \+ O; i& ~ L, h3-10 hack和案例（1）
) ~( \) A5 U) s7 B8 a @; l3-11 hack和案例（2）
# I0 V- P/ R3 ^2 W) _3-12 面试题（1）2 {) L& @$ _: Y! I
3-13 面试题（2）& B' M, T7 ?; j7 n7 o
& X; n2 H7 M4 A9 a8 S" t
第4章 CSS布局
# ?# m7 c. E7 m e7 k讲解布局样式属性（display/position/z-index/flex/float）以及它们之间的关系和组合使用。以三栏布局案例讲解常见的布局方式（float/absolute/margin/table-cell/flex）。
$ {/ D, p% Z6 d# V7 Z( a4-1 布局简介
0 ] c* L: S/ H9 v5 b: I3 G4-2 布局方式（表格）5 Q* s7 Y2 O$ @& K* |
4-3 一些布局属性
. n {' }% }& g+ Z% P4-4 flexbox布局
; M5 I+ b) N3 Z/ J- n1 h1 H4-5 float布局
( }3 q$ B: q3 [$ f# U" w0 _; @0 B M4-6 inline-block布局9 k& P7 g. h# `- S
4-7 响应式布局（1）) r! z7 A+ y: R0 D# Q0 ~. y
4-8 响应式布局（2）% X9 w1 c- j% ~' s) r
4-9 主流网站使用的布局方式 试看
6 B( V2 O& X& q9 [. g4-10 CSS面试题8 n. f/ M& s/ ^' C4 U% @/ |: h
. l- C# O+ I* M* j, {2 g" @" h3 f
第5章 CSS效果
$ g) }; H2 @/ Z/ `1 r讲解效果相关属性（box-shadow/border-radius/background/clip-path）及应用。重点讲解多背景、多投影的应用和3D效果实践。 a( X# s) ]/ R) U. d
5-1 box-shadow
; d! `. f+ b+ E' t% M5-2 text-shadow_x264: M. J- @6 F. m+ h7 S& Q
5-3 border-radius. t3 v& g( g5 O% K
5-4 background) M! L3 H8 B+ n Y& g) N
5-5 clip-path
( x8 F+ t% \5 A I8 B/ c* l7 S5-6 3D-transform+ `% g: U9 g |/ P+ v7 r; q0 M: f
5-7 CSS面试真题
# O/ c! w$ b7 x9 i& ~, I0 I3 u" P* o: k4 F5 u; l' @6 d- i
第6章 CSS动画1 U* [) W, y4 [4 E3 |& p6 W
讲解动画的原理和基本概念（补间、关键帧、逐帧），以及动画的作用（提示、引起注意、提升体验）。然后讲解transition动画、关键帧动画和逐帧动画的实现，最后关注动画高级控制技巧（起止、循环、easing、事件）。
' @9 @. ^2 o; }; q6-1 动画介绍1 x. X# u# Q- j7 n/ b3 k% H$ z
6-2 transition动画（1）# Q6 v5 k1 x3 Y8 h
6-3 transition动画（2）
7 t. G/ s3 r `3 l/ E7 v6-4 keyframes动画
% Q; Z0 a& Z+ j1 d& o' n8 s. F6-5 逐帧动画2 L- N3 b0 n* ~: d
6-6 CSS面试真题
q. n z) ^3 c, O$ n' a8 {/ p! r3 h- g3 o
第7章 预处理器
+ Z G) k; i. b) ^% x讲解预处理的作用，使用常见的两种预处理语言（Sass / Less）讲解预处理器常用特性（嵌套、变量、Mixin、Extend、循环、模块化等）。最后以EST为例讲解预处理库的使用。
+ m% `. N4 ]% G- b7-1 介绍* h% I' c% l$ C9 |* V8 c
7-2 less嵌套
& Q. {3 u9 ^2 N7 U% B7-3 sass嵌套（1）4 g9 R+ a. k( v3 c, V
7-4 sass嵌套（2）3 _7 s8 H Z0 p, S
7-5 less变量$ Y6 T7 G( i4 _8 @6 A% B
7-6 sass变量# q8 u6 t1 T: } C0 {
7-7 less mixin) P0 g; m, Z9 ?6 p
7-8 sass mixin! E) ^ n4 w- j7 I, [1 w
7-9 less extend
; n7 g+ g* s6 H0 p @7-10 sass extend; q5 G2 o$ U Y! ^9 R5 G/ c
7-11 less loop! u6 A: |4 k* @' I3 ^: X5 G
7-12 sass loop
1 `, b6 V( C, I7 \7-13 less import# u3 T% o" p6 B* r0 C
7-14 sass import# V( |' V/ \- v' v* P/ y9 v
7-15 预处理器框架（1）! K( h1 _9 {0 M7 s7 i; q
7-16 预处理器框架（2）
/ r' E# a) E# k7-17 真题) d& u0 I) U& a' B
7 B; Y$ I- K, k l+ g; F; E, M
第8章 Bootstrap
2 t( {) H' `6 i9 G讲解Bootstrap的原理和基本使用方式，响应式布局的原理和使用以及Bootstrap的定制。0 Z4 x- L* p3 `
8-1 Bootstrap介绍( e+ y O' u+ g# l9 j
8-2 Bootstrap基本用法(1)0 G& s6 |5 g! W! C
8-3 Bootstrap基本用法(2) u$ Z6 K; ^' j" l3 z
8-4 Bootstrap JS组件, h- Y0 V4 m" z: n1 F1 u
8-5 Bootstrap 响应式布局. N+ n y6 T4 e7 S. }% {3 v
8-6 Bootstrap 定制化
/ k, ~# I `. g6 k" p4 n8-7 CSS真题5 k$ f5 p! U, K# [% T
) f/ r* ^& ^. h0 U
第9章 CSS工程化方案3 q$ f; B. l7 n V
讲解PostCSS和基于PostCSS的CSS工程化体系（autoprefixier / cssnext等），然后讲解CSS模块化方案（css modules），最后以webpack为工具讲解CSS文件的组织和打包构建。
2 _, u( }2 V, H( O# h8 N9 i+ [9-1 PostCSS介绍* M& }: A/ N* q+ C
9-2 PostCSS插件的使用(1)
8 x1 L: ~& M1 h2 \, g7 a( v9-3 PostCSS插件的使用(2)8 m9 Q: W" A9 Q" ^- `+ A3 g) R
9-4 cssnext% ^% y7 M, Y& j) b! G$ Q4 e
9-5 precss/ q5 Z0 N% q0 i6 A
9-6 gulp-postcss
4 b! e, i3 r' q' ?# b$ l9-7 webpack+ }& }. N7 }# F
9-8 webpack处理CSS
) B: M8 M0 S" t9-9 css-modules和extract-text-plugin+ e* ^; W- |; G" @! W1 B
9-10 webpack小结
. i& t# B9 h. c2 D7 P, w9-11 真题& h) B+ ]! [8 ^' \
2 v |; o. ~/ v; R; f0 {7 @2 d第10章 三大框架中的CSS2 N7 {& U5 V2 ~
分别讲解在Angular React和Vue中如何利用框架提供的CSS特性来处理CSS代码。
4 b/ Q2 @0 o% B- b. G. e2 q- T10-1 Angular中的CSS（1）
, B0 V& | o" x" u1 N) }10-2 Angular中的CSS（2）
9 I. d3 _* _7 A2 b$ B% Y+ O4 Y h, }10-3 Angular中的CSS（3）
% W* X1 G: R. [10-4 Vue中的CSS（1）
$ ]9 D, ~7 ~( A- S$ U" l1 s9 _10-5 Vue中的CSS（2）: F( Y3 G* O4 a6 z6 k! c; ~4 O
10-6 React中的CSS（1）
) i/ s8 c6 ]7 Z' [10-7 React中的CSS（2）
0 [+ \" @+ M4 i10-8 React中的CSS（3）
' Y+ ?1 W+ d: [8 O3 ~! g10-9 React中的CSS（4）
' p8 I( _9 ^9 ~, N) W% h: d0 J
- y" v7 L. ]; }/ k第11章 实战案例. V3 s7 j9 o0 j3 g$ R# u
通过一个实际项目，来真真切切了解CSS在企业中是如何应用
; U; q7 Y1 ^ r7 l& m2 u5 M11-1 案例介绍* R3 s8 [+ m7 {/ c" X& V
11-2 header
9 Q4 \1 c+ {9 w9 A7 `4 |11-3 banner( ]! Q- J0 G' n
11-4 main5 H8 p9 }* t, B; s- \" r% @( a4 |
11-5 footer和页面调整
, T3 P" t$ S5 a; {8 F11-6 动画: \! {& t# X8 p! ?1 h8 z, N
11-7 progress! f: W* R4 _: S7 s) B# J/ M
11-8 dialog
, p- \0 b M7 b& A2 @9 {: i( N8 W8 @9 i( ~- J: p& N8 e* H
第12章 课程总结
0 [ ~- H {* ^( V$ F8 ^对课程整体进行总结
6 X* x+ u: y6 l; \12-1 课程总结7 k1 R! g4 { w! N
9 A8 Q$ \6 q: L& r: Q〖下载地址〗5 D; ?1 d! l0 }+ C+ E
, C+ N# \9 F0 _8 P4 N @ v
/ o) F# z s9 O- F1 b
----------------华丽分割线-------------------------华丽分割线-----------------------华丽分割线-------------7 n% G/ t5 ~& |( O, ]3 O
) @$ ^9 x# k% K, j) t: ~/ W' {& x
〖下载地址失效反馈〗
2 A/ z n( D; k6 V6 J" v" c7 M如果下载地址失效，请尽快反馈给我们，我们尽快修复。请加微信留言：22303040700 B- d' A Q1 B/ v, k
* g Z, U. G/ j% l6 [. t% Q〖升级为终身会员免金币下载全站资源〗" a v. F/ Q3 i* Z: X: X4 q
全站资源高清无密，每天更新，vip特权了解一下：http://www.mano100.cn/rjyfk_url-url.html
: D7 |. N% Q5 X$ h' o3 O7 g/ Q4 e9 K. C
〖客服24小时咨询〗
! p% |" H+ D$ g3 E, j, h有任何问题，请点击右侧QQ邮箱:2230304070@qq.com 咨询。 |
[复制链接]
