. i$ G! d. i3 |- A
4 i& o* y& ~5 V3 Z& I+ k! @〖课程介绍〗8 R N' L) N7 f! o/ c$ G# l
实现精美页面是前端工程师的核心能力之一，CSS布局技术是实现精美页面的核心技术，但CSS布局好入门，难精通。本课将围绕前端4大主流布局，通过大量的实际案例，带你边学习，边实操，让你系统掌握CSS布局进阶技术，轻松解决各种精美页面布局难题。
- b5 `- @% p# A! N' f〖课程目录〗
0 Y- Z6 P! i) {# s. u第1章 课程介绍(了解本课程必看) 试看4 节 | 18分钟
6 }! d7 O. J8 J& c1 P1-1 课程导学 (09:16)! Z4 q* ?* E1 g X" B8 N
1-2 常见布局展示及技术分析 (08:02)+ R; o: S' n* ?% P7 E: o8 E+ N, J2 y
1-3 软件安装与课件获取方式 h# F4 r2 F3 {5 t! t( k
1-4 CSS发展史与CSS模块划分! l4 M# T1 q9 j( J, K5 I0 k
9 `8 ~0 w( V5 ]5 }/ C
第2章 CSS还原UI设计 试看10 节 | 37分钟. u" w# `7 I- \0 T( @! l* c* e$ w
2-1 章节简介 (02:09)
2 I% O! M; z; z: c0 _2-2 长度单位与颜色分类/ v2 @& ~) M; ?4 d: M
2-3 UI设计图的源文件种类
) ]* I; L; _4 F0 f2-4 Photoshop还原UI设计 (06:59); q. \* o$ Z3 x( a
2-5 蓝湖App快速标注信息 (07:51)( K9 }2 M/ `. ^$ o
2-6 PxCook自动标注工具 (08:59)( V' e: n( e( s4 T, |
2-7 imgcook设计稿智能平台 (06:41)
+ z. N" }1 E- P8 ^9 Q2-8 章节总结 (03:51)
2 I, s3 j) B8 [1 ]2-9 【练习题】测试psd中的相关CSS数值1 @7 w6 i% Y2 C6 S, g
2-10 测试题: `' h# s3 S8 i# o
1 n+ }) a; O/ A8 N0 d, O* D+ v- r第3章 布局中的尺寸与位置16 节 | 102分钟8 V7 q) ?) ~% d
3-1 章节介绍 (03:43)& ?4 M5 }, R% t/ ]2 @" h& R
3-2 CSS盒模型的组成 (17:32)$ A6 Q' m" {7 o3 O! r; n ?% y
3-3 块级盒子与内联盒子 (11:11); T$ Y7 L. B* Q0 |8 s6 q4 C" E5 J
3-4 自适应盒模型的特性 (05:43)
' R- S: U! R8 }3 j, m$ f3-5 标准盒模型与怪异盒模 (11:26)
. W! W. y# ]" ?! P+ j" f. ^3-6 浮动样式详解 (18:52)
$ M8 w; {. [$ T3-7 浮动特性注意点 (07:58) ]% a9 H. b" t( u" Q9 N( Z
3-8 定位样式详解 (12:44)
* y( ]/ a/ K5 j' y5 O0 u3-9 定位特性注意点 (08:48)
$ `) L' A+ N$ j4 D/ A3 D. d3-10 详解display属性: e- I% j7 c: J: k5 |1 |
3-11 书写模式与逻辑属性
, {) R5 i" ]7 _+ Y3 ^3-12 BFC块级格式化上下文. j% U0 q5 }4 Y j; Y" \
3-13 标签默认样式及清除% L& V" a% o. A1 c+ w
3-14 章节总结 (03:04)* |) v$ `2 [- F! e+ |7 y4 S
3-15 【练习题】编写对应CSS代码$ _- N7 D" ]& W9 K
3-16 测试题3 {4 h! W- |$ X- s4 \
8 [% s0 L6 N5 E4 k/ {% p6 W
第4章 flex弹性布局 试看21 节 | 194分钟/ D& g0 S- i0 r- `8 J2 v
4-1 章节介绍 (04:45)2 ]! y' T$ I1 B1 E; [
4-2 主轴与交叉轴 (07:47)! m5 J, z4 q) G* G2 O
4-3 换行与缩写 (11:18)
" O/ B$ R6 d8 x7 H& f0 a4-4 主轴对齐详解 (08:26)
) V, x% @1 X. K0 N; [4-5 交叉轴对齐详解 (12:28)
( M* C' ]- O7 M& ?! W4-6 内联与块的上下左右居中布局 (12:10)
5 b- n% W" b4 x4-7 不定项居中布局 (08:20)
) Q, K% m: i" ]; k7 \* Q9 k9 w4-8 均分列布局 (09:00)
, [9 _% P, T# k0 E/ X5 l4-9 子项分组布局 (07:43)! m, D( M a$ M$ s8 U/ c
4-10 flex-grow扩展比例 (11:13): M$ D$ f' s+ k% L' x* B; V
4-11 flex-shrink收缩比例 (12:34)6 I6 i* p' ?8 \2 s( C* S
4-12 flex-basis及flex缩写 (14:17)/ K8 s5 l- e% ?( m$ Z" Y1 H
4-13 等高布局 (07:00)4 ^0 I8 N/ d/ [
4-14 两列与三列布局 (08:29)
: U, k) h, F& ?& B* m, Q, V4-15 Sticky Footer布局 (04:30)
% d) Q" ~; }9 Y: K7 d$ v( m4-16 溢出项布局 (06:19)$ c6 O2 H2 \# @: r1 U2 d+ a
4-17 综合案例一(Swiper轮播图) (19:23); k; k) f! H1 j! M6 \
4-18 综合案例二(知乎导航) (24:59)
1 v% a8 K& S; @5 h3 c, r4-19 章节总结 (02:47)9 A4 u. T- G1 k w% f& `2 B. R. l5 |
4-20 练习题' J' N" {+ X) {+ ^0 p% {# q( q
4-21 测试题. L3 n) [( _5 C. o3 x% ]' p4 n
% L9 F0 z. r- o6 X, R( d" ?第5章 grid网格布局17 节 | 158分钟
) |; e8 s2 h" @5 H5-1 章节介绍 (04:36)' n+ M4 p5 @: B6 z! `& P- W
5-2 定义网格及fr单位 (08:48)# n( [% | ]+ J- N/ F6 {
5-3 合并网格及网格命名 (08:57)
6 g0 J+ `, Z3 V5 o% O. n, ^5-4 网格间隙及简写 (06:13)
7 I$ Z! U# o; T, X' {# S5-5 网格对齐方式及简写 (08:35)2 E9 D" @( f. P. m
5-6 显式网格与隐式网格 (13:31)( L6 D$ |- O4 t; f% s* ]
5-7 基于线的元素放置 (16:28)
3 U& x% C7 a% G0 B5-8 repeat()与minmax() (12:59)
S, a! D+ y6 S- G9 O' U5-9 比定位更方便的叠加布局 (08:08), i& x! n( ]; W
5-10 多种组合排列布局 (05:02)
3 Y) G. A- k2 H# Z' e% z0 N5-11 栅格布局 (08:35)
' `; O9 ^: V2 Y( _8 i2 r5-12 容器自适应行列布局 (07:11)0 m1 B" Q G/ h8 c. Q, ~
5-13 综合案例一(百度热词风云榜) (22:46)
7 d u" Y5 k0 K) v* K+ B0 R5-14 综合案例二(小米商品导航菜单) (22:30), a: x- h: x& w: L
5-15 章节总结 (03:16)
+ z. ~) Q! z8 X0 d* D5-16 练习题+ M6 i+ N2 K: W& F# a8 F( _
5-17 测试题' z6 k; \, S" C% E5 f+ P
T7 G# j6 i) {7 Y2 s* Z& |2 q7 |
第6章 移动端适配布局16 节 | 151分钟9 [$ |9 v7 g$ m" c4 d7 v; @: c
6-1 章节介绍 (04:00)+ l. ?" ~9 m; d0 X
6-2 移动端概念及UI设计稿尺寸: a6 y3 y( L' S+ I- U; j4 U4 h6 b# K
6-3 移动端rem布局原理解析 (08:00)6 I& k/ w# J3 ~
6-4 动态计算font-size (10:16)
( t+ N E' b6 j" \ A6-5 测量rem数值及插件使用 (12:39)
: x3 q2 B" K! L3 k6 P. A6-6 rem案例：网易移动端头部实现 (13:56)( E& t1 ~: M2 v9 h* A9 C7 i( }
6-7 rem案例：网易移动端导航实现 (17:45)% d3 N9 h; q- B8 q3 t- b
6-8 rem案例：网易移动端新闻列表实现(1) (10:35)) @& A- E* c: K7 U
6-9 rem案例：网易移动端新闻列表实现(2) (15:31)4 r- V9 K) a7 R1 g" _+ N+ p
6-10 移动端vw布局及插件使用 (06:40)
4 }7 I I& r1 M: Y5 I5 h6-11 vw案例：B站移动端头部实现 (14:49)/ ~' o( _+ L" S( b8 b
6-12 vw案例：B站移动端导航实现 (17:43)
) T* X' F$ g1 k5 ?4 R. E/ O Y a6-13 vw案例：B站移动端视频列表实现 (15:35)
) ]: ?, j1 m' G- `6 F; }6-14 章节总结 (03:26)
: V; p' j5 g. z |6 ~6-15 【练习题】测量"个人中心"页的css数值
\. E, N2 w" b* F9 D" F6-16 测试题
' Y' u- W" a& s. U) p0 G# Q! N
, w0 x. e2 u4 Y3 H$ U第7章 响应式布局15 节 | 117分钟6 M @( ]5 M2 _9 ~" Z1 j2 _
7-1 章节介绍 (04:56)% a* e Q/ f! } F2 E: a) R
7-2 媒体查询语法详解 (12:18)/ V! b) w/ t6 T5 ]7 u: s
7-3 媒体查询的编写位置及顺序 (08:52)
/ \- d1 v" ~" I, f0 O: d7-4 响应断点(阈值)的设定 (07:19)! m/ i) Y' f3 o
7-5 响应式栅格系统 (11:19)
/ V! y" u& i/ q3 b% [* v. P+ R7-6 响应式交互实现 (08:25)
/ ^! H y2 ^* H! q1 @% n1 H7-7 响应式框架bootstrap/ c% S) |& K9 o, o( G" L
7-8 响应式案例：博客头部实现 (06:21)7 R" ~& H5 E8 ?* {" u) S6 }
7-9 响应式案例：博客导航实现 (15:00) ]2 g _6 ]( \
7-10 响应式案例：博客文章列表实现 (15:09)
1 M+ M5 v" b g! k7-11 响应式案例：博客辅助列表实现 (11:50)
/ b+ }9 i; w* `3 q7 r7-12 响应式案例：博客尾部实现 (11:33)! I0 f" S5 i+ _- |' l& m
7-13 章节总结 (03:10)
. f8 K$ h# q; f5 |. \% i- M6 q7-14 练习题
5 M6 M& r+ \4 T& {( `1 _7-15 测试题
7 h; e2 h" j; z+ r; S: V- K# @8 d. l% M r) L- ^
第8章 综合实战 Ant Design Pro 管理系统18 节 | 165分钟2 S# i8 _$ d/ k9 v9 a6 W
8-1 章节介绍 (02:51)
0 K* o1 i' p5 r7 D/ E! m$ X8-2 8-2 CSS文件划分及功能分类
$ v) y( {5 F* G6 q5 T Z8-3 8-3 CSS方法论及样式规范
# _+ e3 n4 I5 |* j* Z" E8-4 实战项目：框架搭建 (11:53)
% w% l$ F; a1 s& n) m$ m# X" m5 E: A8-5 实战项目：侧边栏结构编写 (08:32)
" o9 K. R/ p |# V# M8-6 实战项目：侧边栏样式编写 (13:48)6 l# `0 m6 A9 N: D k+ e3 h
8-7 实战项目：侧边栏列表交互 (08:48)
3 q4 W* v9 B, h7 w8-8 实战项目：侧边栏折叠交互 (09:18)
2 C% @4 ^8 C0 m6 F: d8-9 实战项目：主体头部尾部实现 (11:47)
! Z, A( {* B. ^8 x8-10 实战项目：主体网格布局实现 (17:40)1 d2 F3 X s& Z9 l X: y3 {9 v. Q
8-11 实战项目：设置模块主题色实现 (20:57)
9 D- |7 ~0 _$ D% a8-12 实战项目：设置模块切换按钮实现 (07:53). } Q3 t' _! a- {) n4 t" W P
8-13 实战项目：设置模块主题色交互 (10:57)6 y; P- j+ i [2 w, H' t* d6 h
8-14 实战项目：设置模块切换按钮交互 (18:53)
1 A; F- g9 Z$ y8-15 实战项目：响应式内容及菜单实现 (18:28)0 q6 l7 D- o! @1 U1 g, r
8-16 章节总结 (03:07)2 E) h. ]# t: v5 E# ~
8-17 练习题
* _: C# C" E1 p9 X1 B) j+ U# V5 |2 L0 x8-18 测试题
- \' T6 |4 a) z" B7 ~2 F# X
, R4 H! v9 b6 J+ x5 d6 I4 x第9章 课程福利加餐6 节 | 76分钟$ f0 \6 W7 g: w' C+ @
9-1 横向瀑布流布局-1 (13:34)' z$ v+ h. M+ Q' a v, v; L0 }
9-2 竖向瀑布流布局-2 (19:11)
7 e* {. U L- E2 O' W# ]9-3 视觉差布局原理解析 (13:25)
# c( A( X( `( Q" y p9-4 视觉差布局案例实现-1 (16:13)( f. Y( z- V J( c* f( ^
9-5 视觉差布局案例实现-2 (13:27)
9 _$ l1 o7 I; K4 x: z6 i; x9-6 文字环绕布局/ u$ t" N. R( _; R8 b- [2 c
9 f4 Q, R) L( j4 M5 C; \9 ~* K& o- ?/ ]3 Q2 v
〖下载地址〗1 I# j1 c$ ]4 d1 C
! _. B4 Q! f! B: V0 F/ n
〖升级为永久会员免金币下载全站资源〗8 g' E. M) z* T& k. H# k! \
全站资源高清无密，每天更新，一次充值，永久可查看网站全部资源：http://www.mano100.cn/rjyfk_url-url.html
3 R0 o0 R5 x" }- Z/ | B2 `! Q |
|
[复制链接]
