4 k) |) i( g* x0 e
% W' `4 _ l) `$ v6 Y9 N' A
〖课程介绍〗
! U1 p: N6 ]$ w. l9 d) O) R) D) X' |实现精美页面是前端工程师的核心能力之一，CSS布局技术是实现精美页面的核心技术，但CSS布局好入门，难精通。本课将围绕前端4大主流布局，通过大量的实际案例，带你边学习，边实操，让你系统掌握CSS布局进阶技术，轻松解决各种精美页面布局难题。
" s* K1 A5 y7 k) ?6 ~〖课程目录〗
# ?+ r4 y$ B4 d1 B6 C! o第1章 课程介绍(了解本课程必看) 试看4 节 | 18分钟$ j% k7 p: T% b8 ^# h: L
1-1 课程导学 (09:16)
2 R( f+ y: s7 q- b" S: j# k& L1-2 常见布局展示及技术分析 (08:02)" j/ l k; _& ^# e
1-3 软件安装与课件获取方式
; W) w& h' _) V0 \% M t1-4 CSS发展史与CSS模块划分& l. r& ?6 ]$ V) t* f
% ?4 u. F. Y! {2 c" h第2章 CSS还原UI设计 试看10 节 | 37分钟; h) @6 S. R' r9 c
2-1 章节简介 (02:09)
4 J/ l6 T; m' T1 z( q* d3 G' d2-2 长度单位与颜色分类
" y3 X9 S c( ? S! j2-3 UI设计图的源文件种类
2 w6 ?2 O. a% w' ]1 K, t, s' z2-4 Photoshop还原UI设计 (06:59)
\" S& {( R/ `3 b7 a2-5 蓝湖App快速标注信息 (07:51)
9 ^) z) s: z2 s( t" E/ Q" G m. d a2-6 PxCook自动标注工具 (08:59)
; t$ t" V- W+ O8 l2-7 imgcook设计稿智能平台 (06:41)* \. B- j" o) G2 ^
2-8 章节总结 (03:51)
; C, K( Y% |1 s' P# i& G& S2-9 【练习题】测试psd中的相关CSS数值
6 p+ w7 e) A& \, z0 V7 g2 Q2-10 测试题3 x, R9 \) C( a* d4 N4 m" n3 ~
% I H8 K4 g, q( t2 l f; t# g
第3章 布局中的尺寸与位置16 节 | 102分钟
( }* X p4 O$ S$ y( z3-1 章节介绍 (03:43)2 @$ D1 b& V$ j- |# a0 s
3-2 CSS盒模型的组成 (17:32)9 c/ M8 {- @; d5 f1 H9 O1 f/ n
3-3 块级盒子与内联盒子 (11:11)
7 D, S- h! G+ P+ b) E0 w5 _3-4 自适应盒模型的特性 (05:43)& b4 q) z+ D J( z- C% \
3-5 标准盒模型与怪异盒模 (11:26)
7 Z% {: e5 `0 g: T! U3-6 浮动样式详解 (18:52)7 `+ a4 D" `; g4 l
3-7 浮动特性注意点 (07:58)
6 X; p1 R. d. I$ S& `+ t3-8 定位样式详解 (12:44)
2 g! Z. {# h+ a7 ~7 M3-9 定位特性注意点 (08:48)0 y q d) ~$ e
3-10 详解display属性$ ~( R5 x, E$ z
3-11 书写模式与逻辑属性" E3 c; I6 s3 u+ ^0 f
3-12 BFC块级格式化上下文
; u# M3 l6 P& V3 m8 z& V6 h: z3-13 标签默认样式及清除8 i& P7 ?/ M! [8 P9 t" P' O2 s
3-14 章节总结 (03:04)
2 O9 O+ }( i" S `, |7 g+ t. C9 p3-15 【练习题】编写对应CSS代码
' g2 u: g2 w4 b0 I' I L- v3-16 测试题1 r: _$ Q4 ~& t) M% @
: t% f, Q1 a5 x; }7 [5 w
第4章 flex弹性布局 试看21 节 | 194分钟
8 H( ?4 W' Q3 \: x6 R4-1 章节介绍 (04:45)
, H3 b" L$ G) K9 l5 z8 q5 ~4-2 主轴与交叉轴 (07:47)) l: }0 z" g8 ] q
4-3 换行与缩写 (11:18)0 h% f8 |! \5 E/ _
4-4 主轴对齐详解 (08:26)
; O* C2 T J7 c) H: q n% |4-5 交叉轴对齐详解 (12:28)5 g% Z s8 J+ Q
4-6 内联与块的上下左右居中布局 (12:10)" @. W( R* L5 x K. |* n# K; u
4-7 不定项居中布局 (08:20)8 w# I8 \; ^6 G+ E. [' a( ]: k
4-8 均分列布局 (09:00)( R6 ?- l' K) x8 x, f, W9 s1 d6 Z5 |
4-9 子项分组布局 (07:43)
3 o! c- y- i: ]( W& s* M; {8 u0 Q4-10 flex-grow扩展比例 (11:13) G8 s0 @2 M1 a2 O9 p
4-11 flex-shrink收缩比例 (12:34)* [. i$ ~7 l$ w8 b1 t: N0 }
4-12 flex-basis及flex缩写 (14:17)
' o0 l- C9 W) P! j4-13 等高布局 (07:00)' K/ j" m1 q- C. j
4-14 两列与三列布局 (08:29)
* R8 @+ P* f" P, C/ |5 w G/ K Q4-15 Sticky Footer布局 (04:30)
0 m' h) W9 l$ h. v& F7 |( @! j/ V4-16 溢出项布局 (06:19)
: i6 y4 J9 g0 u- l. O0 ?" a$ k4-17 综合案例一(Swiper轮播图) (19:23): d* m, z8 E! d9 |! T+ ^# I+ Q
4-18 综合案例二(知乎导航) (24:59)
' M2 a; b% Q% K5 ^3 [6 t0 V, K4-19 章节总结 (02:47)
& W. h7 X1 ]6 X) p6 t4-20 练习题
( y3 L/ E& N- F& P( V! X8 F4-21 测试题: O/ @9 {' L$ z( d: p0 S* {
8 O9 t; p+ ]/ Y9 Y1 g- k第5章 grid网格布局17 节 | 158分钟4 L$ P1 L$ v1 O# Q1 F( L
5-1 章节介绍 (04:36)0 J8 f# K/ O9 s+ j7 [* k
5-2 定义网格及fr单位 (08:48)4 u# f( C# ]* }- A+ {
5-3 合并网格及网格命名 (08:57)" E% E5 W: ]1 e, O
5-4 网格间隙及简写 (06:13)
) Y5 ^1 p5 A1 C$ Y5-5 网格对齐方式及简写 (08:35), n: f( ]' s% m$ V( W# }
5-6 显式网格与隐式网格 (13:31)
& g/ h/ r+ N4 x* H6 c+ i7 l4 C4 ~5-7 基于线的元素放置 (16:28)
. g% Q3 f8 v. S9 d3 B5-8 repeat()与minmax() (12:59)
: q" u6 K* ]. ]4 R5-9 比定位更方便的叠加布局 (08:08)
, H- C! C) S( [7 ?% m( Z5-10 多种组合排列布局 (05:02)7 H# P1 D9 z& Y2 n, q
5-11 栅格布局 (08:35)
+ X" \) w& ]. ^( e5-12 容器自适应行列布局 (07:11)$ n1 h( N$ i1 Z; j+ d# O* `$ _
5-13 综合案例一(百度热词风云榜) (22:46)* x1 S5 ^5 ?7 l% k, g/ E
5-14 综合案例二(小米商品导航菜单) (22:30)# o% I7 @, |5 J# j P7 v- D
5-15 章节总结 (03:16) m3 M+ p/ a- g
5-16 练习题
% ]) M; |' k) h; {6 a1 i5-17 测试题1 m8 ]3 P& O5 b. b* S
1 {2 V) f) k+ |) t/ L
第6章 移动端适配布局16 节 | 151分钟/ n( |6 T; I1 Q- D
6-1 章节介绍 (04:00)) | A( n4 N% X9 P8 {: E
6-2 移动端概念及UI设计稿尺寸/ t6 h. W9 z! n% A8 R( M; G
6-3 移动端rem布局原理解析 (08:00)
; c( H* _# U( A% y6-4 动态计算font-size (10:16)
! ^, d2 D) m: J9 u6 z6-5 测量rem数值及插件使用 (12:39)
( {3 L# a( J- H5 w+ l- Q l6-6 rem案例：网易移动端头部实现 (13:56)
8 g) {0 [0 |& J. _1 v6-7 rem案例：网易移动端导航实现 (17:45)
9 A$ ?8 t' b h4 H& w# X/ v6-8 rem案例：网易移动端新闻列表实现(1) (10:35)
: S [) f _, q( s' n6-9 rem案例：网易移动端新闻列表实现(2) (15:31)% {+ Q! _5 j9 d! U! _* c0 N; A
6-10 移动端vw布局及插件使用 (06:40) O) t2 @% S* {6 G
6-11 vw案例：B站移动端头部实现 (14:49)
?& M% N. q& h" |4 S6-12 vw案例：B站移动端导航实现 (17:43)% M9 q) ^6 i/ [$ H
6-13 vw案例：B站移动端视频列表实现 (15:35); U- L) R3 X0 T; }1 C
6-14 章节总结 (03:26)
`* M( d6 o; `3 }4 D9 N2 C% J6-15 【练习题】测量"个人中心"页的css数值
& O/ a/ A1 b1 X& p- f; k6-16 测试题
) A H, M+ l6 p% P) r/ `9 L7 \
5 f6 T! G3 p8 `7 }, P) @3 M0 Q5 x第7章 响应式布局15 节 | 117分钟
+ U- Y1 N( C8 Z g. q: B7-1 章节介绍 (04:56)
% D& t) Z# [1 R7 e; v) U7-2 媒体查询语法详解 (12:18)
8 N, L! w" C% }4 j q7-3 媒体查询的编写位置及顺序 (08:52)
, |$ A- z- r& i" q7-4 响应断点(阈值)的设定 (07:19)
- M7 K1 _$ b: Z1 E8 q7-5 响应式栅格系统 (11:19)
4 {, G$ E5 n+ }2 J7-6 响应式交互实现 (08:25)3 J3 Z4 ]4 U% {, z
7-7 响应式框架bootstrap
+ B4 z$ {! Q& T* m- I! y3 o: h7-8 响应式案例：博客头部实现 (06:21) `/ o- w( i g" }- T" V7 e- Y
7-9 响应式案例：博客导航实现 (15:00)
. a0 [+ M8 _/ O# b: V& l1 ?7-10 响应式案例：博客文章列表实现 (15:09)
4 [( M, C! \5 S* j4 v. }0 _9 |4 ]0 u7-11 响应式案例：博客辅助列表实现 (11:50)
* k$ B1 f. }. I3 T9 U8 ?( E7-12 响应式案例：博客尾部实现 (11:33)+ I6 J4 | ~4 M$ \$ I
7-13 章节总结 (03:10)1 _* j g7 N6 U3 I, }
7-14 练习题
% p9 K H$ ~9 G7-15 测试题. `6 p: j2 @* l; C) M
# ^& r3 H. |, y' j3 J. I第8章 综合实战 Ant Design Pro 管理系统18 节 | 165分钟6 q! @# b! ^/ E, C2 {) k
8-1 章节介绍 (02:51)
m- c+ v4 q9 |" p8-2 8-2 CSS文件划分及功能分类; V: s3 R& q2 K' a P7 b7 m7 r
8-3 8-3 CSS方法论及样式规范- {0 l+ T: I$ D* H2 H. J- c8 w
8-4 实战项目：框架搭建 (11:53)
) w' O+ q' y6 A; S8-5 实战项目：侧边栏结构编写 (08:32)
; h& N ^: T6 ^( W+ C8-6 实战项目：侧边栏样式编写 (13:48)
& }9 L! p: n0 T" ?2 O$ C% ?8-7 实战项目：侧边栏列表交互 (08:48)0 r' T$ g0 m) n2 t1 r1 W7 P
8-8 实战项目：侧边栏折叠交互 (09:18)
2 |, w4 E) m4 a) ^* a1 k8-9 实战项目：主体头部尾部实现 (11:47)
, l. f" x7 a; h8 w# C3 v J8-10 实战项目：主体网格布局实现 (17:40)
9 L+ ~8 }, N: N" [! C+ a8-11 实战项目：设置模块主题色实现 (20:57)/ j' Y& v* y% w$ y5 c
8-12 实战项目：设置模块切换按钮实现 (07:53)9 U. d$ [' f+ E% J+ g3 M/ E* L
8-13 实战项目：设置模块主题色交互 (10:57)
8 A/ [9 J/ O# N) q2 c; Q8-14 实战项目：设置模块切换按钮交互 (18:53). W: G y7 N* O& C1 E9 l; u
8-15 实战项目：响应式内容及菜单实现 (18:28)
; G! B" P* l9 N8-16 章节总结 (03:07)
' ^8 w+ w7 o- s/ p ^+ }9 B. U3 E8-17 练习题
! y I B# O T8-18 测试题
( l6 C' E- Z& a/ p- Z+ W. V4 o; u9 L* v
第9章 课程福利加餐6 节 | 76分钟
5 ]3 x8 @5 w/ \1 \; L9-1 横向瀑布流布局-1 (13:34)4 |/ l4 H6 F+ h0 y- t( E& n8 k% L
9-2 竖向瀑布流布局-2 (19:11)
/ W) s* f+ v4 U- m) V9-3 视觉差布局原理解析 (13:25)
$ F% A# m7 j+ a8 ^3 s9-4 视觉差布局案例实现-1 (16:13)
# s7 }2 R' c! g w' ?9-5 视觉差布局案例实现-2 (13:27)
g) s3 I7 t! l$ I2 |6 ?5 V9-6 文字环绕布局0 X- b1 D% I% y1 s$ j, x( i
- G) h0 b/ K3 P$ I; ?
- W& q9 g5 I% B2 H& C* Z〖下载地址〗
' c# V. }, H( C8 Q% R' W+ A+ B, r. \1 Y( q+ n, [
〖升级为永久会员免金币下载全站资源〗) M! a4 x9 L/ U$ e( I! N( h# X& l; i
全站资源高清无密，每天更新，一次充值，永久可查看网站全部资源：http://www.mano100.cn/rjyfk_url-url.html" p3 d- A# _: n2 D
|
|
[复制链接]
