T7 ~/ T9 U6 ?3 c# Z2 i' V
; Z2 H- g! N0 g* f6 L5 N: |
〖课程介绍〗
$ ^$ P ^, f4 e5 a/ `实现精美页面是前端工程师的核心能力之一，CSS布局技术是实现精美页面的核心技术，但CSS布局好入门，难精通。本课将围绕前端4大主流布局，通过大量的实际案例，带你边学习，边实操，让你系统掌握CSS布局进阶技术，轻松解决各种精美页面布局难题。
8 w/ U1 d& |/ s" z5 m$ V3 s: j- s〖课程目录〗& I: h9 x: G( L
第1章 课程介绍(了解本课程必看) 试看4 节 | 18分钟- Z W2 L! I. R
1-1 课程导学 (09:16)
5 c8 I5 m" F7 z7 K0 l1-2 常见布局展示及技术分析 (08:02)
( ~3 V* s# C8 j2 @" ~6 W$ E1-3 软件安装与课件获取方式* N8 {0 i" ]# A( M- b0 O- T; o
1-4 CSS发展史与CSS模块划分$ p0 H- P3 g" \9 K& g* n
1 l" \. q; Q9 e7 }8 |. F \
第2章 CSS还原UI设计 试看10 节 | 37分钟0 S- F& f4 `9 K5 @+ Z
2-1 章节简介 (02:09)4 c! E* x: v+ I9 w8 a+ J
2-2 长度单位与颜色分类1 h h0 K+ o5 s6 U5 \
2-3 UI设计图的源文件种类
0 h9 Q- L; H: Z0 o( o* Y2-4 Photoshop还原UI设计 (06:59)6 h" [: ^; [1 h
2-5 蓝湖App快速标注信息 (07:51)5 O }9 \, R* L( Y9 {
2-6 PxCook自动标注工具 (08:59)
; B! _0 S# [) H1 V. j2 m9 X4 F$ }2-7 imgcook设计稿智能平台 (06:41)+ j5 w4 D- `# }8 h/ v; K
2-8 章节总结 (03:51)6 C1 d% F' P: Q6 K8 b
2-9 【练习题】测试psd中的相关CSS数值
' i& T% g4 @8 ~5 v' R. d4 l2-10 测试题+ ^# H5 `1 @: Z, ~. ^' I
; d9 d, C' p8 Q9 D: V7 M8 ]. d9 m' L+ C
第3章 布局中的尺寸与位置16 节 | 102分钟
0 [9 ~: V7 j6 A5 Z% v# ~3-1 章节介绍 (03:43)
3 F3 \3 c7 M7 }# b' J7 F3-2 CSS盒模型的组成 (17:32)- G) S2 b) _' B: N9 j7 ]- j; b
3-3 块级盒子与内联盒子 (11:11): t( y5 \3 Q \* `4 E
3-4 自适应盒模型的特性 (05:43) l+ ?: ?' [5 E& @
3-5 标准盒模型与怪异盒模 (11:26)) |* k7 J, W9 h+ b( L! Z) ~# w
3-6 浮动样式详解 (18:52)
; [9 e& {. }$ U7 n) J' _5 U6 b9 d3-7 浮动特性注意点 (07:58)/ D# f& I. G8 ]: q$ C7 P
3-8 定位样式详解 (12:44), Y4 [) \+ j2 z; a6 G- c5 J0 U8 r
3-9 定位特性注意点 (08:48)
8 x/ l6 n% ]9 E" K' K3-10 详解display属性
5 n9 G% }, [9 ^3-11 书写模式与逻辑属性
3 n0 \4 z& Q: F$ }' `3-12 BFC块级格式化上下文
3 c2 }/ a& j; ~, y- H* D3-13 标签默认样式及清除; {( E+ a. b8 [ s
3-14 章节总结 (03:04)6 b% I" }6 S% C P" F; a
3-15 【练习题】编写对应CSS代码- r O: J2 ~1 H1 N* H) i+ ^
3-16 测试题
8 N! Y; a2 J5 B! h2 b7 j' ?( [& W v) a2 i) m* P$ L- u
第4章 flex弹性布局 试看21 节 | 194分钟( S, v I" l# ^+ J1 t7 H
4-1 章节介绍 (04:45)
" C& R$ z6 J4 W. t- j- r: P4-2 主轴与交叉轴 (07:47)9 [" S7 Z2 Y( L3 F; [
4-3 换行与缩写 (11:18), D( b% Z) z8 j8 P
4-4 主轴对齐详解 (08:26)
3 p7 V, @# j; ~- p; Y% `8 `8 b" Q4-5 交叉轴对齐详解 (12:28)
' U! |6 G2 {) B) ?, k4 ]1 O8 T4-6 内联与块的上下左右居中布局 (12:10)
# ?& M6 \4 G3 l4-7 不定项居中布局 (08:20)% n y+ l: u4 _/ u7 i. y
4-8 均分列布局 (09:00)3 U1 |7 a2 p2 [: \$ ^
4-9 子项分组布局 (07:43)
% H* e9 y& o+ w) W+ \4-10 flex-grow扩展比例 (11:13)2 I! V* |+ j% x$ B3 o, ?: H# g: D2 Z
4-11 flex-shrink收缩比例 (12:34)0 R- O9 ~9 t1 I# r1 g
4-12 flex-basis及flex缩写 (14:17)
2 h" _& t- ?$ `, J) p O+ }4-13 等高布局 (07:00)
. T, g; o' k) x; W9 e4-14 两列与三列布局 (08:29)
5 r) \ r7 M# p) K5 e4-15 Sticky Footer布局 (04:30)! K' x$ J) J: |9 q( {" ]! h/ V9 t' U
4-16 溢出项布局 (06:19)
/ i6 r2 }! o* d) [! g, u: ~4-17 综合案例一(Swiper轮播图) (19:23)0 ~2 ?5 S k1 Z+ U
4-18 综合案例二(知乎导航) (24:59)
( D# u5 ^8 e1 A" B1 o, ?4-19 章节总结 (02:47). `3 _; `2 s" I5 n9 C
4-20 练习题
# z7 K9 _. z' Q. Z9 s4-21 测试题
& ]! d, G/ L5 }6 p+ C7 s" A3 N( ^+ n, z( V, p
第5章 grid网格布局17 节 | 158分钟: B3 r& l( H( J7 v5 }( H
5-1 章节介绍 (04:36)& ~; F' z/ h' [6 i; Z- m" b
5-2 定义网格及fr单位 (08:48)
- Y! {6 ^! L3 A2 Y' g5-3 合并网格及网格命名 (08:57)8 O* D; E( J& R3 p# ]: F7 C+ A5 a
5-4 网格间隙及简写 (06:13)' t: J' q! @% x! b9 U2 ^. e
5-5 网格对齐方式及简写 (08:35)
- B8 c9 U% g2 E5-6 显式网格与隐式网格 (13:31)
5 Q9 d$ e: j+ t5 w( {; ]5-7 基于线的元素放置 (16:28)' p9 ?, ?) x: t; k
5-8 repeat()与minmax() (12:59)
, w$ {: ], M8 j$ f! x5-9 比定位更方便的叠加布局 (08:08)6 `. p" t# z1 V4 |
5-10 多种组合排列布局 (05:02)
3 `; V7 W* y" _; w. g7 d# r5-11 栅格布局 (08:35)
- o C- q( ]( V% R: q5-12 容器自适应行列布局 (07:11)
4 r( t+ P( b) M) G& z3 r y5-13 综合案例一(百度热词风云榜) (22:46)" n& a8 r# S: a N4 r
5-14 综合案例二(小米商品导航菜单) (22:30) Z! }6 c* [( ~9 E2 j9 [! n* d
5-15 章节总结 (03:16)1 k$ d3 ^7 ~0 L; n; @% P# |
5-16 练习题
9 U8 N) V* {% u7 n* S" q5 B5-17 测试题" h9 I O- I( l' }) S9 q6 A# a- E
6 X7 H) O, `% Y' B5 J
第6章 移动端适配布局16 节 | 151分钟9 A; R/ `% Z1 G% @+ J$ m: }! w9 \1 }
6-1 章节介绍 (04:00): n8 f0 P- a: Z; G! q
6-2 移动端概念及UI设计稿尺寸/ v# i8 \# B7 } g
6-3 移动端rem布局原理解析 (08:00)
$ } _% B& E) ~5 ^6-4 动态计算font-size (10:16)4 S: s, v! M& r \
6-5 测量rem数值及插件使用 (12:39)9 j* C! e& H0 i; Z( k
6-6 rem案例：网易移动端头部实现 (13:56)3 C. V$ b4 G7 {
6-7 rem案例：网易移动端导航实现 (17:45)
1 E' ]( }) l/ v. t3 Q) I K3 T- D6-8 rem案例：网易移动端新闻列表实现(1) (10:35), D2 C: H4 a9 K
6-9 rem案例：网易移动端新闻列表实现(2) (15:31)7 l: E) @. g [$ T9 h8 X! U
6-10 移动端vw布局及插件使用 (06:40)
. i, i6 |. X, J6 e! B8 V; l1 d' f2 O+ a6-11 vw案例：B站移动端头部实现 (14:49)8 B2 p$ `( i4 g8 C- j7 s
6-12 vw案例：B站移动端导航实现 (17:43)
5 F& z6 b0 r L5 N% B6-13 vw案例：B站移动端视频列表实现 (15:35)
( r4 ~) J1 V9 ]3 }6-14 章节总结 (03:26)1 d* T7 s9 g: T0 _
6-15 【练习题】测量"个人中心"页的css数值/ H, N! [5 ]1 U" x7 g
6-16 测试题5 C! e/ x8 e8 S6 h' l3 `+ s
$ q4 D& u6 ^' s8 T6 B2 u第7章 响应式布局15 节 | 117分钟
: p) _/ \; Z% K) [) ~$ E7-1 章节介绍 (04:56)
3 m& A. v2 J% @( _7 h1 _( D7-2 媒体查询语法详解 (12:18)( B& j W, t: ~- f: P# G
7-3 媒体查询的编写位置及顺序 (08:52)
. ]' n/ S- _: P, H7 u7-4 响应断点(阈值)的设定 (07:19)0 @6 U9 S C7 |
7-5 响应式栅格系统 (11:19)1 m" z# p( f O$ l% c ^3 h
7-6 响应式交互实现 (08:25)
8 H. ~9 |/ a& k a1 a/ n) j7-7 响应式框架bootstrap
3 ~) p$ J% e# \0 ~9 X4 b- F5 z. \7-8 响应式案例：博客头部实现 (06:21)
4 e3 P! g3 \1 k% x# V; r7-9 响应式案例：博客导航实现 (15:00)$ c x" U' J7 j" I
7-10 响应式案例：博客文章列表实现 (15:09)
5 x9 V @6 M- Q9 |, }- o7-11 响应式案例：博客辅助列表实现 (11:50)' z4 X/ I( b, Z9 ~% r
7-12 响应式案例：博客尾部实现 (11:33)
6 g( p" U, Q( | D: |( M7-13 章节总结 (03:10); S. P4 g$ T# Y3 }2 E/ P% R
7-14 练习题7 F' |' }0 w( o" I. Q
7-15 测试题! T0 m) U d |( k$ r/ k
, d# T Z& a( i) @0 q: y第8章 综合实战 Ant Design Pro 管理系统18 节 | 165分钟
% }4 ?" q# [% ~' v& C8-1 章节介绍 (02:51)7 F. N" H$ H5 @( r
8-2 8-2 CSS文件划分及功能分类* U0 N6 U/ d1 z C' w
8-3 8-3 CSS方法论及样式规范0 h: @: }" R: X( X% S5 Q0 e$ K
8-4 实战项目：框架搭建 (11:53)3 W8 `2 b2 E5 M* z
8-5 实战项目：侧边栏结构编写 (08:32)0 }) X& w* m9 i4 Z8 C. Y% o) a
8-6 实战项目：侧边栏样式编写 (13:48)/ v+ p1 N7 }: C
8-7 实战项目：侧边栏列表交互 (08:48)" `% u% Q+ P0 x; C6 s6 q. K
8-8 实战项目：侧边栏折叠交互 (09:18)+ [3 R9 a9 m @9 h
8-9 实战项目：主体头部尾部实现 (11:47)
0 H/ }0 Z7 _( h- K3 g8-10 实战项目：主体网格布局实现 (17:40)
. z# E7 m3 e0 g% H4 L5 y5 \: I. V8-11 实战项目：设置模块主题色实现 (20:57)
6 j8 Y5 C" k# v) c" I) e0 M+ I8-12 实战项目：设置模块切换按钮实现 (07:53)! `8 }) h3 T, t! s( y
8-13 实战项目：设置模块主题色交互 (10:57)
9 w, B; m2 A A5 `8-14 实战项目：设置模块切换按钮交互 (18:53)$ K R4 ~% M, D& E! P
8-15 实战项目：响应式内容及菜单实现 (18:28)9 F% h7 o% T+ ` @0 j
8-16 章节总结 (03:07)1 @8 ~2 D6 C ]4 a- r) b/ n5 v5 R6 ~- D' Y
8-17 练习题
# V; B: l0 O5 H8-18 测试题6 R% ~4 h3 P! Y4 q9 M% _: _; ?
4 L4 P2 m( y' H' `6 B9 t3 a$ w! b! v
第9章 课程福利加餐6 节 | 76分钟
3 I# E- D8 J! u+ W9-1 横向瀑布流布局-1 (13:34)
$ } V' O+ J/ C* \- w/ w b: D9-2 竖向瀑布流布局-2 (19:11), u5 P) u( c% r, J6 A* H+ E
9-3 视觉差布局原理解析 (13:25)3 z/ @) k- ~7 b$ W, s8 V4 l
9-4 视觉差布局案例实现-1 (16:13)2 L0 c1 G# d- v6 f2 T2 N2 X
9-5 视觉差布局案例实现-2 (13:27)
; C" G5 v1 Y/ m9-6 文字环绕布局6 Y+ K4 }7 [7 R9 a
; r/ D2 Z+ B! T1 l
: Z! ~: h6 |. X
〖下载地址〗( ?6 f$ U/ r9 D* g! M5 k
4 X5 O2 b! R& w+ W8 G& A$ O: F〖升级为永久会员免金币下载全站资源〗8 x0 X, y4 A/ B |% {6 N
全站资源高清无密，每天更新，一次充值，永久可查看网站全部资源：http://www.mano100.cn/rjyfk_url-url.html) M: P; n/ M( w* z" W; L% h
|
|
[复制链接]
