: G/ T5 j, |, ~! D4 @
# U4 {: B2 i" R' I
〖课程介绍〗
( }* _3 N% Q( t- ^2 ~9 GCSS是前端开发过程中必不可少的知识点，也是最难彻底掌握的部分。本课程系统梳理CSS中各方面的知识点，帮助前端工程师更清晰地了解实际工作中如何应用CSS技术的，更好地面对日常使用和顺利通过面试关！
4 j, [6 n1 s; A$ B. y! |6 j0 _3 z/ k) Q/ r5 T3 T9 K
〖课程目录〗/ L2 u! B: @' j# v
第1章 课程介绍
) g0 V, U+ f9 d" @/ I0 \对课程整体进行介绍
( M5 ~' z$ ]) r0 R' A1-1 导学 试看! o: J" x& l) }
9 ^+ e/ K6 W2 c
第2章 HTML基础强化& ]) O' L/ J6 K G
讲解HTML常见元素、版本（HTML4/XHTML/HTML5的关系）以及HTML元素的分类和嵌套关系。关注元素默认样式和定制化。' b- i Z' o n1 k( z: X. W; h) ?
2-1 HTML常见元素和理解（1）
; P6 v! j( b# c: H. ]2-2 HTML常见元素和理解（2）& {8 J. d0 w! S7 }
2-3 HTML常见元素和理解（3）
m1 ^7 D" j$ R' f! B2-4 HTML版本+ S) b3 D1 ]0 _
2-5 元素分类7 d3 ]/ _$ L& ?
2-6 嵌套关系
) B9 v. A/ c7 b, o; y7 }& b2-7 默认样式和reset- P+ ~% J; `! q& n
2-8 真题& d, @4 K2 K, P( z' P
; Q* l5 ~1 e. C* \( t; i, A
第3章 CSS基础
; c. `9 `. I' S0 b7 j- q% I全面讲解CSS基础知识，包括层叠样式表的基本规则和含义、选择器（分类、特性、权重、性能）、非布局样式属性、CSS hack以及一些案例分析（checkbox等）。3 ?5 F, x; l0 Z. W
3-1 选择器（1） 试看
9 G# R$ F( b0 ^) W3-2 选择器（2）
! m: E' U! I; T+ J% Z2 m3-3 非布局样式（字体）
m7 W- ~, u/ p2 i! C- a3-4 非布局样式（行高）4 b, T4 f9 ?8 a$ q3 ]6 q7 m0 b
3-5 非布局样式（背景）
1 e2 z4 ]& Y9 m3 V* S3-6 非布局样式（边框）
^% ~0 j" z S) r3-7 非布局样式（滚动）" S# b% F! v. d8 ^8 `/ C3 x
3-8 非布局样式（文本折行）% F) x" g1 z @8 k$ c \
3-9 非布局样式（装饰性属性）5 K! O. K" ^9 @. C7 ]
3-10 hack和案例（1）+ l; H( U: @" O W U1 A
3-11 hack和案例（2）: S7 F* U; b$ R% [
3-12 面试题（1）
) g( V; M" r/ A9 E3-13 面试题（2）
3 z" P( O, n2 a5 t' n1 ]# ^7 A" k( x1 r/ M1 O
第4章 CSS布局4 Z m- h" L5 V3 e
讲解布局样式属性（display/position/z-index/flex/float）以及它们之间的关系和组合使用。以三栏布局案例讲解常见的布局方式（float/absolute/margin/table-cell/flex）。# e+ p" F$ f8 r# B
4-1 布局简介
+ M* H0 ~# }" E2 z5 t5 J4-2 布局方式（表格）
) O8 o% g0 E1 R; z% E+ Z" d9 Z" G( e0 r4-3 一些布局属性, C0 n# o% Q6 T, } x' D5 {3 }
4-4 flexbox布局
7 B: k1 Z4 U' C4-5 float布局
; } ]5 X/ ~; r" {4-6 inline-block布局
4 ]; j- n+ ^$ L) `" H4-7 响应式布局（1）8 j3 m% K0 K5 [4 J d6 k, T
4-8 响应式布局（2）
1 U" N, S- n! q7 H4-9 主流网站使用的布局方式 试看
' o' T6 A; w* ~/ L9 `: i4-10 CSS面试题* C7 s( ?, e$ G( _1 W& H
8 n+ X: z8 {3 q
第5章 CSS效果
- M& F. K' P9 x$ U+ ~讲解效果相关属性（box-shadow/border-radius/background/clip-path）及应用。重点讲解多背景、多投影的应用和3D效果实践。" r( \$ ]3 Z; I/ b- w
5-1 box-shadow
- V/ G. y D+ J: h5-2 text-shadow_x264: g# ]( a, T7 L; p( l2 X
5-3 border-radius4 V6 ]/ C6 U' j5 s& T! _
5-4 background1 u1 |+ X6 \- H, ] O
5-5 clip-path
. D& O$ ^6 u m" t: t/ c X5-6 3D-transform: s/ M% B5 b& u* G
5-7 CSS面试真题
" }" f/ M& {* ?7 c3 m5 e; E% | k9 O6 {
第6章 CSS动画
4 y2 z. \$ g3 d) P0 W% p; ~讲解动画的原理和基本概念（补间、关键帧、逐帧），以及动画的作用（提示、引起注意、提升体验）。然后讲解transition动画、关键帧动画和逐帧动画的实现，最后关注动画高级控制技巧（起止、循环、easing、事件）。
( L% X, B0 ]) u' Z7 K9 W6-1 动画介绍
6 m4 x+ h: M* l' r( k6-2 transition动画（1）
% O4 }/ z4 k1 {: _4 `+ G, h3 g6-3 transition动画（2）1 |4 ^' A$ h7 b) k9 J. t5 [1 @
6-4 keyframes动画6 f7 |; M0 d% l6 M4 M
6-5 逐帧动画6 ?; o1 q# U5 u* i
6-6 CSS面试真题
% c: ^1 r6 T9 U1 P' ^. _( ?9 u! K
0 E* L7 M6 ~) U第7章 预处理器" q! V# q2 ?! O+ N4 j! k' n
讲解预处理的作用，使用常见的两种预处理语言（Sass / Less）讲解预处理器常用特性（嵌套、变量、Mixin、Extend、循环、模块化等）。最后以EST为例讲解预处理库的使用。, s2 I% S7 b: S
7-1 介绍1 b9 t. m2 ]5 [; z
7-2 less嵌套
/ v! g$ ~, v8 B2 x* m8 \7-3 sass嵌套（1）5 V3 o% t2 G; h% ^
7-4 sass嵌套（2）
; ~: h7 L; X7 ?2 x0 V) T* y7-5 less变量& P) Z- M* W: t* `% J2 ]0 c
7-6 sass变量
, k. e6 _: T& O# m8 @7-7 less mixin
! g" \5 k M5 S# a0 `3 V \8 D7 X7-8 sass mixin) C: r* Y0 I2 @5 B7 c
7-9 less extend
T5 e C) j4 C+ P1 w# w7-10 sass extend
8 X9 U' M& C# J7-11 less loop
: q( E B! a) S& A+ R7-12 sass loop9 L3 |5 ~$ x2 @
7-13 less import
2 |% @/ ]0 @/ `0 l7-14 sass import
6 T' N7 g7 K! ]4 ~( V: f7-15 预处理器框架（1）
* k. b* v, Z; ` l& y7-16 预处理器框架（2）. n! b! [; s% d4 m! u. w3 V
7-17 真题
+ K# o3 Z- u1 f3 H1 C2 Z( {1 y! [0 J7 b d2 Q6 ~( J) l
第8章 Bootstrap1 n0 \1 B+ k' j: Q$ ~2 k( Z) [
讲解Bootstrap的原理和基本使用方式，响应式布局的原理和使用以及Bootstrap的定制。2 T6 ?& o, W* x9 ?3 c- M
8-1 Bootstrap介绍, Q+ t* ? c. Y
8-2 Bootstrap基本用法(1)
; Y0 ]5 c2 W+ z: Z2 {6 w H, b8-3 Bootstrap基本用法(2)
! l/ @/ I2 R: }! M$ M+ v6 T8-4 Bootstrap JS组件
/ M/ G* ~+ w* x2 a8-5 Bootstrap 响应式布局4 K; K& J# U) L7 j1 \# I; F
8-6 Bootstrap 定制化# ~, c4 \7 Z0 ~# A* ~
8-7 CSS真题% |2 K/ \5 b# L$ H/ X7 y/ A% {
$ V, Z8 [: }9 t3 v
第9章 CSS工程化方案* K/ a* }" L" I- o, h! _" C7 d
讲解PostCSS和基于PostCSS的CSS工程化体系（autoprefixier / cssnext等），然后讲解CSS模块化方案（css modules），最后以webpack为工具讲解CSS文件的组织和打包构建。
. l6 L( c2 u4 |% N9-1 PostCSS介绍
2 W$ B5 E2 m0 _: _$ Q9-2 PostCSS插件的使用(1)
* A* U$ ] C/ P0 k9-3 PostCSS插件的使用(2)
7 J- Z. n Y1 f! p9-4 cssnext3 N: [1 H/ h3 M
9-5 precss; Z% m* n* H' q# c0 b; d p
9-6 gulp-postcss
5 I0 ^3 c+ T, x b$ a9-7 webpack: x/ M" K1 z% l* y
9-8 webpack处理CSS
) Y; C: J) w/ l9-9 css-modules和extract-text-plugin
X! a, _# n) {3 o/ r( U9-10 webpack小结
0 y& K! j: I: f1 x% A1 d0 O& ]9-11 真题
3 ?! f9 u/ ^: X& _; J
9 t7 h) D# ]2 j第10章 三大框架中的CSS* k" j7 @2 V3 l% E
分别讲解在Angular React和Vue中如何利用框架提供的CSS特性来处理CSS代码。
+ q. }" i# B9 U& x4 k: a. l; k10-1 Angular中的CSS（1）
4 F# v; @8 k2 G' q$ c7 l6 ^10-2 Angular中的CSS（2）# [4 K, f; b2 u1 r
10-3 Angular中的CSS（3）
; Y* s" v5 O8 a: V+ u10-4 Vue中的CSS（1）
( \: P% {% x+ K! [10-5 Vue中的CSS（2）
" U3 N" F, E: {10-6 React中的CSS（1）2 C/ c3 i4 O+ F3 A7 ~
10-7 React中的CSS（2）6 g3 _3 ?% E8 [+ a. P
10-8 React中的CSS（3）
" z. V+ [# A' E( D. z10-9 React中的CSS（4）: {: E6 k4 [( I( k6 }& ^& O" y" r
* o; ?' `6 }* R' E% n9 q2 i+ ~第11章 实战案例. o' }2 g: X q# ^( W
通过一个实际项目，来真真切切了解CSS在企业中是如何应用5 O4 S- \8 T5 {2 J
11-1 案例介绍
4 O# |. k1 Y0 K! {7 E8 A4 `11-2 header5 ~' b( v9 r Q! ]* b0 b3 k. w
11-3 banner% Q3 c" |7 J: [, l3 P. n/ K/ J
11-4 main9 J8 x1 m3 G- H7 P* J c7 m
11-5 footer和页面调整
, \2 l6 C6 ] ]5 R1 ^8 O/ ]6 j11-6 动画
' ^" M6 |* {: }# C2 [ T11-7 progress; O9 y7 B7 A( A1 N' c
11-8 dialog
7 H5 G1 w# [" N, M& F$ N
- q D7 p" M ~* n* j2 O* ]4 t- e第12章 课程总结* |8 k! u% Q4 Y `6 _# t0 J- ~
对课程整体进行总结# q; b/ j& y. s
12-1 课程总结6 K3 @! K q1 Q" v5 N9 D2 _
& W8 U6 m2 J* |' W {/ e# g〖下载地址〗
1 v% q6 v% @& M/ z8 ~' t. _, Q1 L& _5 `: q8 z! E
* H1 l3 q6 y& ?/ ^9 C( c- n----------------华丽分割线-------------------------华丽分割线-----------------------华丽分割线-------------6 n* b1 t, K# Y$ g
' F/ o" U# F5 }
〖下载地址失效反馈〗4 ]5 k3 Y0 Y: N: X$ |& [* Z
如果下载地址失效，请尽快反馈给我们，我们尽快修复。请加微信留言：2230304070
2 c2 ~' P, F9 k. U
$ H* T8 g2 K0 u- z$ p〖升级为终身会员免金币下载全站资源〗
) [, B/ K5 c; ?2 ^全站资源高清无密，每天更新，vip特权了解一下：http://www.mano100.cn/rjyfk_url-url.html
$ ?/ h; a- w# H7 j( w9 c: D/ a& S$ E" m/ J# Y c4 W5 n
〖客服24小时咨询〗
9 G' T% f" a5 X, \9 h4 e5 |7 Y4 S: O$ s有任何问题，请点击右侧QQ邮箱:2230304070@qq.com 咨询。 |
[复制链接]
