- s4 t; _& `1 a- j1 m2 B8 C; v+ q! b
, D: t. r G# q% k/ s2 H5 t
〖课程介绍〗
- q, K. x9 l. c' V$ MCSS是前端开发过程中必不可少的知识点，也是最难彻底掌握的部分。本课程系统梳理CSS中各方面的知识点，帮助前端工程师更清晰地了解实际工作中如何应用CSS技术的，更好地面对日常使用和顺利通过面试关！
& ], }' `0 [3 A. Q( Z
: j y @) M' O H" k2 k7 m' X- p〖课程目录〗0 m# H5 b. g- q5 A3 \# p2 S2 @
第1章 课程介绍
z+ t: p5 D9 Z对课程整体进行介绍
3 H% n, K2 M* f( [. W/ p1-1 导学 试看
: f8 A% K" t, B7 x4 {8 S7 O- Q/ `9 i! p9 [6 E
第2章 HTML基础强化- t3 ?6 g s1 w: c3 K
讲解HTML常见元素、版本（HTML4/XHTML/HTML5的关系）以及HTML元素的分类和嵌套关系。关注元素默认样式和定制化。
- ?" v$ c T/ f2-1 HTML常见元素和理解（1）
0 q) _( {$ Q, Z; a/ D1 h) @! q X& `2-2 HTML常见元素和理解（2）6 U5 i, T4 J% Q
2-3 HTML常见元素和理解（3）6 a* w/ ^8 g! ]8 k! U
2-4 HTML版本! {- g8 N7 z1 w- y( t% {/ R
2-5 元素分类
1 i& _! F( T/ {4 ?9 r2-6 嵌套关系
5 K% S1 {3 P. c! U$ F2-7 默认样式和reset8 |0 d7 k0 E1 ~; ^ l
2-8 真题0 ~( Z' j* W( x p% k
C; |* |& |# C: [
第3章 CSS基础
& }! A# n# J3 }! W( |全面讲解CSS基础知识，包括层叠样式表的基本规则和含义、选择器（分类、特性、权重、性能）、非布局样式属性、CSS hack以及一些案例分析（checkbox等）。
" k! M& z1 e9 O3-1 选择器（1） 试看
/ N* [# a" d3 D$ H& L" {5 b3-2 选择器（2）7 S5 J) f; W7 N
3-3 非布局样式（字体）
1 E+ E( K4 A% G6 ^6 h- Z8 Q3-4 非布局样式（行高）1 q1 L4 v2 m" H
3-5 非布局样式（背景）
+ }- o2 c* Z% ]! p: w# H3-6 非布局样式（边框）6 w* T9 t! H7 V; ~$ }& x' G
3-7 非布局样式（滚动）
6 r7 K) u+ g; D! ^3-8 非布局样式（文本折行）
, _- O' a7 X6 |3 i7 [8 [7 \' }! Y3-9 非布局样式（装饰性属性）
( M* J* a! J* ~8 W0 |# O9 \. F( \3-10 hack和案例（1）3 X9 F- |) ?5 Y3 x. a" H, D+ k
3-11 hack和案例（2）+ I- w. T; _; N) N$ S
3-12 面试题（1）
) J" s( g: e- k0 [3-13 面试题（2）
7 F* d7 g0 w- e8 E9 ?# b( s8 q+ P( L
第4章 CSS布局
1 C7 j3 J, v: M4 Y讲解布局样式属性（display/position/z-index/flex/float）以及它们之间的关系和组合使用。以三栏布局案例讲解常见的布局方式（float/absolute/margin/table-cell/flex）。, h+ v, O' O& {
4-1 布局简介$ m3 j) G, h8 \% B5 `( @+ u
4-2 布局方式（表格）
! O4 c+ _# f+ a! k4-3 一些布局属性
* V/ p& C6 v9 B5 |" C4-4 flexbox布局
2 n# Y: h: U9 W+ `- P* U4-5 float布局
8 s- V/ X' T1 E4-6 inline-block布局3 u* k. a$ S% ]
4-7 响应式布局（1）
( x# I- f, |' A5 R0 `3 w8 i4-8 响应式布局（2）* p/ u8 E/ S- L0 d7 w) `( G! B
4-9 主流网站使用的布局方式 试看: s- G, O! g8 \' q6 y' @
4-10 CSS面试题
9 p, g I5 B g9 _) O9 ?) u
|/ O$ J# n* I i第5章 CSS效果
8 y! v+ v- X% \) W$ I讲解效果相关属性（box-shadow/border-radius/background/clip-path）及应用。重点讲解多背景、多投影的应用和3D效果实践。% d+ j8 e) _4 E
5-1 box-shadow
) [5 |4 x, R. W( C5-2 text-shadow_x264
. e: N; a+ m% Q( N# Q5-3 border-radius
1 N. a. |1 ~8 x5-4 background
6 y( D% i; {, P5-5 clip-path! W8 A: Y. S7 G
5-6 3D-transform/ @/ C% m5 U% F3 G+ z, t( }
5-7 CSS面试真题
, ~, l7 B# N X% v+ Z' u; t7 L, ]7 a" H9 m
第6章 CSS动画. i) o3 B$ n2 n! U
讲解动画的原理和基本概念（补间、关键帧、逐帧），以及动画的作用（提示、引起注意、提升体验）。然后讲解transition动画、关键帧动画和逐帧动画的实现，最后关注动画高级控制技巧（起止、循环、easing、事件）。
* l8 v1 U: Y* o6-1 动画介绍* K0 c$ Y: v5 A9 r1 {
6-2 transition动画（1）
1 g# t/ G! k( @$ Q6 a% Y: M6-3 transition动画（2）
+ Z5 W& U. r Y( ^( r# \6-4 keyframes动画
+ r1 B9 Q2 ~4 e& b% z6 }3 a6-5 逐帧动画, L; R+ n7 ^1 T1 q
6-6 CSS面试真题4 o6 C/ m4 F4 R! T
! O. W$ S' b! P5 h. f9 ?) \第7章 预处理器
! ^( }3 g4 a9 e ?. g. A1 G5 ]讲解预处理的作用，使用常见的两种预处理语言（Sass / Less）讲解预处理器常用特性（嵌套、变量、Mixin、Extend、循环、模块化等）。最后以EST为例讲解预处理库的使用。
& @/ Q3 i- I8 C: D% T; E5 d" H7-1 介绍% Y7 `/ w% m3 ]- h8 { t' h
7-2 less嵌套) M1 m, d t3 h$ Y' r
7-3 sass嵌套（1）& y% U( ^7 A! O& u0 [
7-4 sass嵌套（2）$ Y( `3 D U2 e$ L. K' w8 b O# C
7-5 less变量
: u0 m( e3 b( a; |, o7-6 sass变量
$ ~7 y) }& m+ n; d% Q7 {7-7 less mixin
0 {" x( z Z$ k" |7 o- E7-8 sass mixin
. v/ W- T. K1 X! a' z9 G7-9 less extend
; Z6 r, R8 d; ]: q. f5 ]7-10 sass extend3 \. k" H0 L, R* \( w( a& a
7-11 less loop
, a+ a+ J0 t% e j& |1 x8 U7-12 sass loop8 f- K2 ]4 W" s6 x3 b! A7 `! n
7-13 less import9 j) w d1 O F; ]6 l: Y2 \# s, {
7-14 sass import7 |+ T2 l& e+ g- m( d
7-15 预处理器框架（1）/ x! ^7 b7 F- F. {# n! M" d
7-16 预处理器框架（2）. t8 |0 A! W/ H* k
7-17 真题
, k6 J; P0 S# Z5 r# B
: C4 a* o0 \( x9 A! h* M7 \! Z) r) v第8章 Bootstrap
* R* z2 F, F# z: E* b/ j$ X讲解Bootstrap的原理和基本使用方式，响应式布局的原理和使用以及Bootstrap的定制。
) w& K8 A8 S& m) C8-1 Bootstrap介绍
6 ^0 W% Z! w' U" j- U a0 U: I( N8-2 Bootstrap基本用法(1)
4 X7 b) z2 Q) w% q8-3 Bootstrap基本用法(2)- ]6 S5 ?2 D- i
8-4 Bootstrap JS组件
& ^/ |3 h$ x- p% _8-5 Bootstrap 响应式布局
3 ^7 k/ a1 n: Z# E8-6 Bootstrap 定制化
0 o, u* l1 X0 g/ k( ^# a# x8-7 CSS真题- \% x/ U' W+ d* z/ X. ~3 @) R- i
9 x. b, }3 U9 {+ Z- a# n5 f
第9章 CSS工程化方案
V% I' q& u; j$ a2 D% m; h; b* W讲解PostCSS和基于PostCSS的CSS工程化体系（autoprefixier / cssnext等），然后讲解CSS模块化方案（css modules），最后以webpack为工具讲解CSS文件的组织和打包构建。- t& ~0 I% S4 G$ E
9-1 PostCSS介绍
) [; u6 P5 l' k! l+ b( B9-2 PostCSS插件的使用(1)
. i% z5 h6 T8 k7 R7 C9 u! u9-3 PostCSS插件的使用(2)0 y8 H2 E2 |4 [
9-4 cssnext
4 H, C/ b" M$ l s; w& |9-5 precss
. k2 T: R/ ^1 B8 o# ]5 B9-6 gulp-postcss3 t I0 M2 R% c. d) s. e3 P1 t% ^
9-7 webpack
9 q9 Y% b& f; u9-8 webpack处理CSS+ ]% g7 c* f3 N x
9-9 css-modules和extract-text-plugin" h. |& d2 Y( Q5 h
9-10 webpack小结
' d8 x. u$ |; w/ k$ e0 n9-11 真题
) I$ H2 a9 x& j% M
/ Z7 K3 b6 A$ N1 j$ R第10章 三大框架中的CSS
9 |0 g; l9 C5 t( B; P* ]: ?分别讲解在Angular React和Vue中如何利用框架提供的CSS特性来处理CSS代码。! f6 l- G1 Z& r6 m
10-1 Angular中的CSS（1）
. G4 Y. J* g; Z. }7 A% [10-2 Angular中的CSS（2）$ P, G7 ]% m3 d W
10-3 Angular中的CSS（3）
1 q4 ^ d5 H( N2 g10-4 Vue中的CSS（1）2 g v$ Z: v$ ]2 J% g. t& T$ q
10-5 Vue中的CSS（2）' l# Q8 G: N8 M6 b, U
10-6 React中的CSS（1）' e' ]) k' Y: c- [2 n0 n
10-7 React中的CSS（2）3 m3 G; u& J9 S& G0 N7 B
10-8 React中的CSS（3）
6 D) K4 ^6 P* e10-9 React中的CSS（4）* d* c' ?5 h6 _' K
K0 [ q1 \& }0 o/ j
第11章 实战案例
. Y$ D2 e3 u* V$ |& U( Q通过一个实际项目，来真真切切了解CSS在企业中是如何应用" T. j3 I6 b' k5 D+ \! s
11-1 案例介绍* D4 i: o: O5 K2 N6 M) W9 Q- D. r
11-2 header
7 n0 G3 N- L# v; V11-3 banner% e q# _. a- V6 @, y
11-4 main
' D/ [7 m1 B: E+ t11-5 footer和页面调整
- V8 I% p3 l& o3 K: X6 l11-6 动画% ?( F2 x: w a6 |
11-7 progress# a! G7 D; @- ] k7 J- F6 _7 ]1 O
11-8 dialog
0 i# O) X; H; _1 ~9 v( S: }
; d i l; l5 V! q第12章 课程总结
0 R3 v" L7 S" v! s0 U( k对课程整体进行总结
- I0 {0 c8 ]; O3 _$ I12-1 课程总结& X) _5 V8 J5 m' W! W
3 t' h& h) o. X〖下载地址〗* p7 N+ r" e) E8 m/ v: |" F; h
: r" B8 ^( D+ A
M% `/ ~2 {$ e0 @----------------华丽分割线-------------------------华丽分割线-----------------------华丽分割线-------------! y( S I7 |0 c! H
/ K \, N" v; r* l: N〖下载地址失效反馈〗( @, L0 W/ ^, {& l
如果下载地址失效，请尽快反馈给我们，我们尽快修复。请加微信留言：2230304070; u4 ~9 \; X% t7 X- [3 D/ o
) {* X2 Z S8 M5 I! Z0 C! z3 ~
〖升级为终身会员免金币下载全站资源〗
' \; G1 U4 {( I* V0 E全站资源高清无密，每天更新，vip特权了解一下：http://www.mano100.cn/rjyfk_url-url.html
: e) b) z6 Y! Y( a7 x& n
9 U2 O* x- k8 q4 _* P〖客服24小时咨询〗3 m+ ~8 b- A. t; `1 X! @
有任何问题，请点击右侧QQ邮箱:2230304070@qq.com 咨询。 |
[复制链接]
