# k8 ]* g- T% P0 g
* K i0 t( y4 P8 l〖课程介绍〗
1 p8 q. B+ w+ w) T8 R$ `实现精美页面是前端工程师的核心能力之一，CSS布局技术是实现精美页面的核心技术，但CSS布局好入门，难精通。本课将围绕前端4大主流布局，通过大量的实际案例，带你边学习，边实操，让你系统掌握CSS布局进阶技术，轻松解决各种精美页面布局难题。2 j& @, s6 z* U. a6 L% ]. S
〖课程目录〗
9 I' ] o1 o# [& o) R第1章 课程介绍(了解本课程必看) 试看4 节 | 18分钟# L2 _. S: J# W
1-1 课程导学 (09:16)
; A/ d5 m# }+ w6 ^, c( f+ ~, I0 g1-2 常见布局展示及技术分析 (08:02)
$ \. K. L9 F- j3 h' U* n+ J. o) y1-3 软件安装与课件获取方式7 T- Z: E9 B) M( I' U( L
1-4 CSS发展史与CSS模块划分0 x M! S! M, d8 V6 P
. M( |, c" `' A' F
第2章 CSS还原UI设计 试看10 节 | 37分钟0 t- I: d/ t4 y$ i
2-1 章节简介 (02:09)% P; A7 G" B" i
2-2 长度单位与颜色分类
4 X' i) _8 T6 e0 C, g) @2-3 UI设计图的源文件种类6 z' s2 Q9 l, P1 D v5 V
2-4 Photoshop还原UI设计 (06:59)
# U1 F' z% F7 g2 q- M3 n$ p# b% m2-5 蓝湖App快速标注信息 (07:51)( j" t, v0 l% K; ^$ Z
2-6 PxCook自动标注工具 (08:59)
& n8 A7 A% e9 z2-7 imgcook设计稿智能平台 (06:41)
! T4 }& f0 a& Q; l2-8 章节总结 (03:51)
, o$ [6 K$ {6 C0 x2 o; C6 J2 [2-9 【练习题】测试psd中的相关CSS数值: {* N9 Z3 j5 p# @1 R8 @
2-10 测试题 {' P# K1 ?7 j4 E6 F) ~
0 {! v; H& U6 R; K, X! G
第3章 布局中的尺寸与位置16 节 | 102分钟
' C3 p% D8 {, y" q3-1 章节介绍 (03:43)
, L5 @% A9 B* h, v3-2 CSS盒模型的组成 (17:32)
% S7 p6 |3 q1 V, r- Z D3-3 块级盒子与内联盒子 (11:11)( {) }1 A7 M" B# ?9 E* {- B
3-4 自适应盒模型的特性 (05:43)
6 U9 ^- N* u& O9 l+ ^& X0 @( E }# w3-5 标准盒模型与怪异盒模 (11:26)5 w" E! W0 A5 E
3-6 浮动样式详解 (18:52)
" J' ~' c, P' F9 G$ @3-7 浮动特性注意点 (07:58) S# h. v& q/ H7 W7 `4 q
3-8 定位样式详解 (12:44)# I* s3 Z2 [* Z7 ^$ w$ t
3-9 定位特性注意点 (08:48)
2 i: ]/ d- r8 U. z6 h3-10 详解display属性
( Z( e% f5 ~3 t% F3-11 书写模式与逻辑属性
3 o+ m% C$ H' x- ^7 c& a' x& h8 j9 n3-12 BFC块级格式化上下文
& N% X! T9 K4 I: _ S R! y3-13 标签默认样式及清除
: ?$ J- A5 {/ H8 u, t4 H/ H9 B3-14 章节总结 (03:04)6 F" K; [/ C8 }2 L$ \4 k
3-15 【练习题】编写对应CSS代码
2 X$ c3 e4 y" Z5 s+ }6 D3-16 测试题
5 t" O' C7 F& p, b
9 G6 g; q8 A* M5 u6 ^第4章 flex弹性布局 试看21 节 | 194分钟3 q% s$ y6 @1 |4 o" K2 m
4-1 章节介绍 (04:45)
P( }9 _; ?/ W) j4 K4 M4-2 主轴与交叉轴 (07:47); h/ u& ]2 {+ V1 B: B! v: c
4-3 换行与缩写 (11:18)
, b: g+ a+ y# W$ `, c \) K4-4 主轴对齐详解 (08:26)
$ {& [6 ^5 p4 V$ _2 B4-5 交叉轴对齐详解 (12:28)7 M, O4 p- c/ i$ b
4-6 内联与块的上下左右居中布局 (12:10)
% `$ d: E3 L/ r# t. l& q4 F4-7 不定项居中布局 (08:20)
7 p* Z2 h/ u" c- c/ o7 Y4-8 均分列布局 (09:00)
& n6 ^6 z) `3 W1 j# X# ]: w# v$ O4-9 子项分组布局 (07:43)( {# A( l% h1 Q6 u S o) C
4-10 flex-grow扩展比例 (11:13)! F" c" t' `0 R$ z( G, O
4-11 flex-shrink收缩比例 (12:34)
; l w% C9 t0 @2 z8 m4-12 flex-basis及flex缩写 (14:17)
; A m( p* N C4-13 等高布局 (07:00)
3 N% P3 y1 i- f+ ^& O; @4-14 两列与三列布局 (08:29) p8 m. x6 f1 @0 B
4-15 Sticky Footer布局 (04:30)
, q: M' F! ]* v. H9 T4-16 溢出项布局 (06:19) N0 _0 ]) u+ v' l. h
4-17 综合案例一(Swiper轮播图) (19:23)
$ f; ]+ c l, c8 L. v/ x4-18 综合案例二(知乎导航) (24:59)- R. e8 j, Z+ p7 Y" z
4-19 章节总结 (02:47)+ z6 k3 M1 l& @6 `9 V& q
4-20 练习题
/ |% U/ _1 K; Q) J! b, F5 D3 O4-21 测试题
; E, G( A; S) F4 s+ ?6 ]& I- @% H
第5章 grid网格布局17 节 | 158分钟. p6 \' ]4 K8 |( j- s, P
5-1 章节介绍 (04:36)3 S8 Z. X, g$ h
5-2 定义网格及fr单位 (08:48)( {, g4 S. N% ]% L( H% M3 n q- i+ c% {
5-3 合并网格及网格命名 (08:57)
5 Z: @2 t+ N; L9 F; h9 J/ @5-4 网格间隙及简写 (06:13)6 j. z+ W, X% F; ~9 A
5-5 网格对齐方式及简写 (08:35)& W7 i2 o( j5 k9 {3 i9 ]
5-6 显式网格与隐式网格 (13:31)1 o* Z& J* K0 d, B: U
5-7 基于线的元素放置 (16:28)
9 F5 ^% L% z3 b0 J( e5-8 repeat()与minmax() (12:59)
6 p; G M k/ w9 W9 K8 ?" v5-9 比定位更方便的叠加布局 (08:08)
# r5 ~% p/ V& `. u+ g. I5-10 多种组合排列布局 (05:02)- l# Q5 T6 y) E6 Z
5-11 栅格布局 (08:35)" L# i" g. v* V( {
5-12 容器自适应行列布局 (07:11)
8 j9 M6 q7 }: a3 ]5-13 综合案例一(百度热词风云榜) (22:46)* l V- K7 p- V) V6 }
5-14 综合案例二(小米商品导航菜单) (22:30)4 ~" e m) ?0 h
5-15 章节总结 (03:16)
2 O* J: c4 l( p: A' Q' ]. z5-16 练习题4 O; h5 G% i" j4 Q7 h
5-17 测试题' q q& B4 f6 ]5 C7 n9 K
R5 {- ?9 ]* ?9 m, Y第6章 移动端适配布局16 节 | 151分钟' N5 D o8 N8 R4 s
6-1 章节介绍 (04:00)4 e- B5 U0 e4 {! r3 e; ^
6-2 移动端概念及UI设计稿尺寸; ^+ g- L- r. L# C+ `% M9 Z% i/ H9 |
6-3 移动端rem布局原理解析 (08:00)
1 Z& q) h: n/ |! W: G( ]6-4 动态计算font-size (10:16)- _) Z% Y v3 ?9 L, a b0 c
6-5 测量rem数值及插件使用 (12:39)9 |$ l8 ]; g$ M& }: _/ D
6-6 rem案例：网易移动端头部实现 (13:56)
a7 i% A }* v; b% {" V6-7 rem案例：网易移动端导航实现 (17:45)* i* D/ A( q9 {: X3 \; q3 g) W5 { S1 V
6-8 rem案例：网易移动端新闻列表实现(1) (10:35)2 Q. t+ ?& [( W5 A$ ]9 q5 Z. c2 l
6-9 rem案例：网易移动端新闻列表实现(2) (15:31)
& _7 G/ [- d; d8 _/ \ l6-10 移动端vw布局及插件使用 (06:40)3 D8 L& X/ G2 z, T
6-11 vw案例：B站移动端头部实现 (14:49)4 }( ~' h- K2 B' s
6-12 vw案例：B站移动端导航实现 (17:43)
0 f' z5 F) W& `4 X' P- d( _4 j6-13 vw案例：B站移动端视频列表实现 (15:35)
7 o! T# Z+ y1 B9 p/ B4 b6-14 章节总结 (03:26)
2 X9 I" T' C. O0 _3 r6-15 【练习题】测量"个人中心"页的css数值# h5 m5 L" U' E
6-16 测试题
3 I9 H! F' V, r# i. j1 J
+ g; X. O3 [3 \! y3 X第7章 响应式布局15 节 | 117分钟, _3 V3 W4 K# b: z- o; R7 I
7-1 章节介绍 (04:56)! b4 O$ H; h1 r R4 b/ T) G
7-2 媒体查询语法详解 (12:18)2 r% N2 j3 W3 Q. y- r A o$ n
7-3 媒体查询的编写位置及顺序 (08:52)$ p- Q7 V T0 q S4 l! h, e
7-4 响应断点(阈值)的设定 (07:19)# u. ?: _4 f+ Z5 K
7-5 响应式栅格系统 (11:19)
7 f# W: i: p0 |3 _8 J7-6 响应式交互实现 (08:25)+ ?9 ?/ J. [' k% ]1 N
7-7 响应式框架bootstrap
6 e2 L' G( `* c, Y2 L" r# o2 t7-8 响应式案例：博客头部实现 (06:21)
4 t2 P' p, ^' N% J7-9 响应式案例：博客导航实现 (15:00)
! N5 ^1 o# U( z) p) C- t7-10 响应式案例：博客文章列表实现 (15:09)- Y5 M4 C- o: d6 l3 T8 e# j
7-11 响应式案例：博客辅助列表实现 (11:50)1 v6 |. ?1 B d. O+ q
7-12 响应式案例：博客尾部实现 (11:33). _ a3 Q+ B. ]# J, [0 m9 Q2 l8 S5 M; w
7-13 章节总结 (03:10)( ?' Q' G, S D& U' A0 W
7-14 练习题
' g1 E+ V( ?4 q" M7 |7-15 测试题
1 d0 C) N1 f: t* G7 K
6 O* o: I/ D; K9 n第8章 综合实战 Ant Design Pro 管理系统18 节 | 165分钟, s e u) r, D% B( ~/ N1 r: p
8-1 章节介绍 (02:51)0 Z0 H' s5 v) c/ T" I7 W% V
8-2 8-2 CSS文件划分及功能分类
4 B- J! S! N p8 G8-3 8-3 CSS方法论及样式规范$ ~9 B7 Z- a' J+ d9 s% z
8-4 实战项目：框架搭建 (11:53)
9 U9 r) m% g" d1 v T# o! ?8-5 实战项目：侧边栏结构编写 (08:32)
! l$ L& j1 V9 x+ X" J/ T4 Z6 _8-6 实战项目：侧边栏样式编写 (13:48)8 T* ^7 i3 M( i0 F4 J
8-7 实战项目：侧边栏列表交互 (08:48)
" K! V! w5 E3 @( |- L+ K& L0 s8-8 实战项目：侧边栏折叠交互 (09:18)
9 T& }3 H( d5 c, z7 q3 Y0 C8-9 实战项目：主体头部尾部实现 (11:47); d6 S( d' F F) U: {" Z' `
8-10 实战项目：主体网格布局实现 (17:40)
+ K3 ^: w4 v$ Z, c, n& Z8-11 实战项目：设置模块主题色实现 (20:57): Z7 T3 w- N( j& Y& g
8-12 实战项目：设置模块切换按钮实现 (07:53)
8 ?; X& Z% {% @3 G8-13 实战项目：设置模块主题色交互 (10:57)
3 a' G: J* V0 e. y- A" b6 k4 @5 Y! |8-14 实战项目：设置模块切换按钮交互 (18:53)& `6 P3 n' i: t4 Q) D8 e
8-15 实战项目：响应式内容及菜单实现 (18:28)6 B0 L7 ^7 q' r- n% z5 X* {
8-16 章节总结 (03:07)* U* b7 j& Z$ ^
8-17 练习题! d8 z j4 T& `6 Y/ T' b
8-18 测试题
5 A; |$ t: j* V$ h% u
/ l6 f% r1 w2 L Z9 T1 u第9章 课程福利加餐6 节 | 76分钟9 Q S1 a. `- N" D& b3 h" K
9-1 横向瀑布流布局-1 (13:34)
8 Y' h5 i5 u7 g0 F! S- N9-2 竖向瀑布流布局-2 (19:11)
' U- I7 ?; m D$ X9-3 视觉差布局原理解析 (13:25)
0 f/ c) T# S6 q1 b9-4 视觉差布局案例实现-1 (16:13)
7 |' z+ k. \" {. u7 S# l9-5 视觉差布局案例实现-2 (13:27)
2 J7 `2 D/ ^% y! x E9-6 文字环绕布局
( L# u& U2 s6 F0 c4 p! U' `
' R H% t& s( V a' Y' w$ S. A4 p$ A: [1 y* B5 Q$ _
〖下载地址〗
& `4 }4 Q4 t5 ~
6 ]. H# v; |6 V. Q. L4 F/ _9 `$ [〖升级为永久会员免金币下载全站资源〗
2 q" G' n: F+ S全站资源高清无密，每天更新，一次充值，永久可查看网站全部资源：http://www.mano100.cn/rjyfk_url-url.html
. a; L6 ^6 y' F. n. W7 l: R |
|
[复制链接]
