4 r( @7 p9 s% |
# I) f U7 Y( k& y3 N4 R% q〖课程介绍〗
; C! Q6 H2 e/ S( g# H. o# E* Z实现精美页面是前端工程师的核心能力之一，CSS布局技术是实现精美页面的核心技术，但CSS布局好入门，难精通。本课将围绕前端4大主流布局，通过大量的实际案例，带你边学习，边实操，让你系统掌握CSS布局进阶技术，轻松解决各种精美页面布局难题。$ M% p7 |9 o: \$ {; ^
〖课程目录〗
# m( q, J5 p9 J1 H" G第1章 课程介绍(了解本课程必看) 试看4 节 | 18分钟0 }" d7 H* v. f3 A
1-1 课程导学 (09:16)
. F( w B5 S0 g1-2 常见布局展示及技术分析 (08:02)
/ I" X/ C; g# q1-3 软件安装与课件获取方式- V a$ D- Z4 k
1-4 CSS发展史与CSS模块划分3 V1 h$ L; B7 y4 Z( h* V- {' `$ v
, `( H/ ], x" y第2章 CSS还原UI设计 试看10 节 | 37分钟% c9 J1 K5 r' L0 h
2-1 章节简介 (02:09)$ O9 p0 {3 Z* y& h; X% D2 O8 ^
2-2 长度单位与颜色分类: }+ i8 E2 c* @+ k( i0 R
2-3 UI设计图的源文件种类+ @7 L9 K0 i/ {' h5 C
2-4 Photoshop还原UI设计 (06:59)
0 R5 x2 V% [3 v `5 T* z2-5 蓝湖App快速标注信息 (07:51)& G& o2 K8 e! z: X1 g6 |7 i# g- h
2-6 PxCook自动标注工具 (08:59)& e; I6 V3 X; _7 q
2-7 imgcook设计稿智能平台 (06:41)
- t) b- [* \: ]' v4 m' ]2-8 章节总结 (03:51)3 q. H/ m5 d. I/ g1 Z* X
2-9 【练习题】测试psd中的相关CSS数值
8 s9 t1 n/ j1 z* m! `4 w2-10 测试题
% o7 [. l' ]+ m! ~4 g+ D5 U O' j/ S- V1 U+ V B
第3章 布局中的尺寸与位置16 节 | 102分钟
4 T7 Q% o D @: v3-1 章节介绍 (03:43)# P7 r3 h; p F& X# ]% _
3-2 CSS盒模型的组成 (17:32), x7 G) b. V/ [
3-3 块级盒子与内联盒子 (11:11)* t& P$ G; o6 u( N5 N+ J- Y
3-4 自适应盒模型的特性 (05:43)
0 [+ G' p6 c5 s! g' n+ h" v+ R" M. |3-5 标准盒模型与怪异盒模 (11:26)$ O/ T5 N5 F/ C" R5 q
3-6 浮动样式详解 (18:52)2 K2 C) Q' b. z& u
3-7 浮动特性注意点 (07:58)
$ d1 j+ x' h) n% M# O! C% r3-8 定位样式详解 (12:44)( m) {' x& c, a+ S
3-9 定位特性注意点 (08:48)
+ E0 ]& m% d8 g$ Q3-10 详解display属性
7 |' }/ [. }7 o$ y" P) N D+ T3-11 书写模式与逻辑属性
) J0 t0 E5 e6 Q7 I3-12 BFC块级格式化上下文
7 P4 x6 J! I% [8 B( b6 T Y3-13 标签默认样式及清除
; ?0 F$ E& W& P' _3-14 章节总结 (03:04)
' i) M& j# }9 b4 {' n# c3-15 【练习题】编写对应CSS代码
0 b* i8 c! j5 o- [; Q- f3 w3-16 测试题8 e4 M2 e, T9 f6 `+ g
6 _" B2 s3 c9 _: G$ d第4章 flex弹性布局 试看21 节 | 194分钟
6 R# p& I+ k K! G9 k4-1 章节介绍 (04:45)
) R% _ W+ K: B* ]0 d4-2 主轴与交叉轴 (07:47)
# I1 J! q" R- g4 q4-3 换行与缩写 (11:18)
/ w% z" B! g; W4 D" [8 q4-4 主轴对齐详解 (08:26)
. h% @% j# A# G$ M0 U, x: _, | K4-5 交叉轴对齐详解 (12:28)' n" T1 k: p3 e+ `, A; f8 ~
4-6 内联与块的上下左右居中布局 (12:10)
" x& K9 Q% t6 l: b* T4-7 不定项居中布局 (08:20); b$ L2 t/ k% O& O* W
4-8 均分列布局 (09:00)
( C" M- p# y' L; g, w3 W4-9 子项分组布局 (07:43)
& R5 i' @/ H, r" O0 `$ Z1 p& a- s" _, |4-10 flex-grow扩展比例 (11:13)
3 S& R8 E& N8 y0 ]2 G4-11 flex-shrink收缩比例 (12:34)
4 E3 I j+ [' C% R, W3 e! d( _4-12 flex-basis及flex缩写 (14:17)/ L M$ R0 m6 ]
4-13 等高布局 (07:00)
; }$ _! x6 ~1 z I4 Z4-14 两列与三列布局 (08:29)( k: V m9 A( O
4-15 Sticky Footer布局 (04:30)
/ j9 |+ ^1 f# m* X: M2 @- O. O4-16 溢出项布局 (06:19)
+ b p( F5 w5 K7 ?4-17 综合案例一(Swiper轮播图) (19:23)
* y- `3 G& X7 k; L% h7 m8 {- I9 d4-18 综合案例二(知乎导航) (24:59)
; Q$ q+ H- e, [2 E5 g6 s5 \4-19 章节总结 (02:47): r: X- c; c: T5 Y+ z
4-20 练习题
- b& M$ M k5 t4-21 测试题* a5 O4 @! R. h! g8 N
1 D$ p- |0 |# b! D6 `3 @* x第5章 grid网格布局17 节 | 158分钟4 V; z; v, W7 `& F4 D8 F
5-1 章节介绍 (04:36)
: o3 c$ X) R! l5 G" i( C5-2 定义网格及fr单位 (08:48)
H* T0 x" o u- ]3 C/ h- _5-3 合并网格及网格命名 (08:57)' C4 B6 l# e: `5 x* u1 o1 K+ A% `2 W
5-4 网格间隙及简写 (06:13): s8 a$ n5 R! x6 K3 G* U% K; _
5-5 网格对齐方式及简写 (08:35)
4 D2 I2 i" o4 M9 z# ^5-6 显式网格与隐式网格 (13:31)+ C0 \1 Q3 t0 f g( |4 u
5-7 基于线的元素放置 (16:28); t% S- \! S2 I3 G1 Y
5-8 repeat()与minmax() (12:59)
6 `% q6 s( X" h/ ]9 B5-9 比定位更方便的叠加布局 (08:08)/ W( _, D8 c) e, J& X# ^; O; ?
5-10 多种组合排列布局 (05:02)7 ^- C3 X7 Y3 d a4 z! C+ R, c
5-11 栅格布局 (08:35)2 s1 X+ p( ?' Y) f6 ~3 E Q3 M2 f
5-12 容器自适应行列布局 (07:11)# M0 u2 {) e; G% g# f9 S
5-13 综合案例一(百度热词风云榜) (22:46)
& @$ t0 h5 Y1 r: J% Q4 I9 w5 R5-14 综合案例二(小米商品导航菜单) (22:30)
0 C/ L, ~1 L7 t" ] ?" W5-15 章节总结 (03:16)) S* k0 O; v ]# b* T: v3 ?" d
5-16 练习题
; h8 C( a; Y& c. P4 u5-17 测试题) f1 ^1 _- B3 v# ~6 I& K
1 H/ k9 m- p2 B( I) p6 j
第6章 移动端适配布局16 节 | 151分钟
, M* r0 D9 j$ o- c' B* {. ~; @6-1 章节介绍 (04:00)& |- J, q U( y' ~ }% C9 {1 z
6-2 移动端概念及UI设计稿尺寸" B6 e9 o, r4 v, J+ D( t* K
6-3 移动端rem布局原理解析 (08:00)5 _9 f) b A; Z: s
6-4 动态计算font-size (10:16)
+ Q: r* M- s! \- p) [6-5 测量rem数值及插件使用 (12:39)' [, Q2 t' V0 z6 J& Y2 Y$ e
6-6 rem案例：网易移动端头部实现 (13:56)
8 w+ Q- b9 B: Z) ]! y' w6-7 rem案例：网易移动端导航实现 (17:45)
: c" |1 p1 Y$ E6-8 rem案例：网易移动端新闻列表实现(1) (10:35)0 E6 T2 R( S% t$ l
6-9 rem案例：网易移动端新闻列表实现(2) (15:31)
. X2 ]) L4 D* ?6-10 移动端vw布局及插件使用 (06:40)
" j, O% J' v: ]/ Q! I( v6-11 vw案例：B站移动端头部实现 (14:49)
. A: T% O K0 C4 w( G$ I* @6 q6-12 vw案例：B站移动端导航实现 (17:43)
$ T/ O1 @6 j$ W6-13 vw案例：B站移动端视频列表实现 (15:35)1 T/ C& Q! k5 I, B$ G! U: o' C
6-14 章节总结 (03:26)
0 R/ r c5 b2 G* _- }) I ?6-15 【练习题】测量"个人中心"页的css数值' ^1 ~: U5 `" l4 j$ D$ f/ V* k
6-16 测试题
|3 s2 R: Z4 N* W: C( z; o0 r1 v% M' C6 W8 S% K9 d. ~
第7章 响应式布局15 节 | 117分钟
3 }! |. f" A) m8 ^" f m7-1 章节介绍 (04:56)
" F2 f" I+ u, Y8 Y/ v7-2 媒体查询语法详解 (12:18)
) d/ g6 q7 m: ?, W6 j7-3 媒体查询的编写位置及顺序 (08:52): ?" U% {9 c* ~
7-4 响应断点(阈值)的设定 (07:19)+ m7 k2 E& x% X6 h# c
7-5 响应式栅格系统 (11:19)
: w2 N6 \3 Q" Z& u% }7-6 响应式交互实现 (08:25)
" v) D5 ^( n; F8 m' [$ ?7-7 响应式框架bootstrap! D: V* {1 t2 j$ N( s Y) K' [4 [
7-8 响应式案例：博客头部实现 (06:21)
& a m( [3 _6 T; q3 H" y8 v$ Q+ l$ [7-9 响应式案例：博客导航实现 (15:00)! h5 p& U0 z' e& s- Y0 [
7-10 响应式案例：博客文章列表实现 (15:09)' c3 T* s0 \8 M
7-11 响应式案例：博客辅助列表实现 (11:50)
( s( N2 e& o5 \' G& n7-12 响应式案例：博客尾部实现 (11:33)
% X. X2 o/ [3 R% L" A1 [3 I' X) @7-13 章节总结 (03:10)
8 l1 _" U. }! E3 |' M& m( r7-14 练习题
. A! I) `& r6 r2 W$ ?7-15 测试题0 X4 v# [# }: e2 j& q
1 M4 H& @# W, n4 `) }
第8章 综合实战 Ant Design Pro 管理系统18 节 | 165分钟; [8 f0 }, A+ l
8-1 章节介绍 (02:51)
$ U! U% U3 \6 H3 Q6 b8-2 8-2 CSS文件划分及功能分类( i( s' u1 V$ Z. M) ^8 m$ o
8-3 8-3 CSS方法论及样式规范
, E: U" p% _& ]5 F: w8-4 实战项目：框架搭建 (11:53) U' `, M9 L. P( i' k# G, P5 J
8-5 实战项目：侧边栏结构编写 (08:32)5 t0 z1 ^0 q9 i
8-6 实战项目：侧边栏样式编写 (13:48)
7 q, z" U# L6 R8-7 实战项目：侧边栏列表交互 (08:48); G% p! G4 l; e2 ~8 E& q9 g
8-8 实战项目：侧边栏折叠交互 (09:18)
+ m+ Y3 C: B: T7 `* ?& R- A8-9 实战项目：主体头部尾部实现 (11:47)' C0 a7 {2 x* {; ^( @6 q; w: K: r& _
8-10 实战项目：主体网格布局实现 (17:40)
* ]3 f# E: w6 y: E0 Z/ O6 b, o7 t8-11 实战项目：设置模块主题色实现 (20:57)
3 }# ~; Q& ^+ o" U8 i8-12 实战项目：设置模块切换按钮实现 (07:53)
. D. t6 J# ?( C$ |- u1 y# X/ w8-13 实战项目：设置模块主题色交互 (10:57)0 V& Z* R# @/ o2 T- s! _
8-14 实战项目：设置模块切换按钮交互 (18:53)
4 c- Z/ w; N; a7 V" H* p8-15 实战项目：响应式内容及菜单实现 (18:28)2 f& E/ \! g6 [$ X- T, Q
8-16 章节总结 (03:07)/ N, c' B3 G! h% b0 \+ J
8-17 练习题# @6 @, u3 O, m, P) U
8-18 测试题
$ U4 B( O. E5 ]( \
$ b1 `. k- j4 Z' C* C J第9章 课程福利加餐6 节 | 76分钟. W& E u% u( y: z- u4 _: T
9-1 横向瀑布流布局-1 (13:34)& V& I: G$ z) k
9-2 竖向瀑布流布局-2 (19:11)
& f$ `8 z! Y) H# a9-3 视觉差布局原理解析 (13:25)& ^9 }2 Y5 D# E: Y; H& O* h
9-4 视觉差布局案例实现-1 (16:13)# u9 b) Z! f) Y( ]. b* J
9-5 视觉差布局案例实现-2 (13:27) }6 I8 I) U* p
9-6 文字环绕布局% w. B* ]0 Q. g
, |- A2 {8 m2 q' x
4 Y9 N7 F; R, n) T6 B〖下载地址〗
3 i8 N' X3 }: ~# L2 J
% u% T! C J0 k0 C〖升级为永久会员免金币下载全站资源〗" @! G% {5 c' {& ]
全站资源高清无密，每天更新，一次充值，永久可查看网站全部资源：http://www.mano100.cn/rjyfk_url-url.html
* s* @& z- y$ ^ |
|
[复制链接]
