# F& _/ f( a1 s5 d3 b* f7 v3 i) r! n. ^, X' c4 V/ j
〖课程介绍〗8 i- N- K* F, S5 y. G* c2 R
实现精美页面是前端工程师的核心能力之一，CSS布局技术是实现精美页面的核心技术，但CSS布局好入门，难精通。本课将围绕前端4大主流布局，通过大量的实际案例，带你边学习，边实操，让你系统掌握CSS布局进阶技术，轻松解决各种精美页面布局难题。( g& J5 u- X1 _4 k \9 D( S4 [# J
〖课程目录〗9 Q( x& Y' U4 ?" A
第1章 课程介绍(了解本课程必看) 试看4 节 | 18分钟
$ g& [4 }7 W3 b7 i/ R4 M9 M" w1-1 课程导学 (09:16)+ C& i6 d" s6 d5 Q
1-2 常见布局展示及技术分析 (08:02)" L8 J* {0 x. ~6 U' I# b
1-3 软件安装与课件获取方式
v& m/ A) {2 i( d1-4 CSS发展史与CSS模块划分
+ @9 z& l& Q' K1 q ~, I4 w$ n0 G3 S8 Y* |
第2章 CSS还原UI设计 试看10 节 | 37分钟
' `0 C- n. G+ L o- W. g+ ]2-1 章节简介 (02:09)1 g) `" J" l# u0 `# R# @
2-2 长度单位与颜色分类
& O; @ h4 ?. g; ]' D2-3 UI设计图的源文件种类8 E; t( i" L$ v" p$ [9 `3 t# s
2-4 Photoshop还原UI设计 (06:59)( Q2 J) {! j" X& G
2-5 蓝湖App快速标注信息 (07:51)" \9 j1 Z2 O# ]0 L7 f
2-6 PxCook自动标注工具 (08:59)
* v B5 v9 f( o. m- U2-7 imgcook设计稿智能平台 (06:41)2 v5 }4 N V9 m
2-8 章节总结 (03:51)
% T! u' H7 t6 O$ k8 `6 d2-9 【练习题】测试psd中的相关CSS数值- L1 w: R6 C, Q. K# e
2-10 测试题( x4 [. D4 s$ ^- M
& x2 x) \- n0 r' ]
第3章 布局中的尺寸与位置16 节 | 102分钟4 p9 }9 f3 [; B( |, s. G
3-1 章节介绍 (03:43)
: m( Z+ ^/ y* A' ?; e3-2 CSS盒模型的组成 (17:32)+ n {2 K& {8 x1 G) l% ~5 K( |
3-3 块级盒子与内联盒子 (11:11)
% @% Q4 s5 h6 G: @/ v6 m ?3-4 自适应盒模型的特性 (05:43)
% n. O- Q0 ?$ u, ?6 D- l% T3-5 标准盒模型与怪异盒模 (11:26)+ H4 p `$ e5 \" x$ @6 C/ m
3-6 浮动样式详解 (18:52)1 O n: `: y/ ^
3-7 浮动特性注意点 (07:58)
% Z/ q# a' [" Q. ?3 Q3-8 定位样式详解 (12:44)
I- c9 n3 k$ F- v- \+ e9 a3-9 定位特性注意点 (08:48)
, \, E/ ~6 n( c* c) V3-10 详解display属性& M/ T% k$ R& _2 j& e; G' L
3-11 书写模式与逻辑属性
+ c1 H" |7 ~( W3 S+ ^ Q/ |& k3-12 BFC块级格式化上下文
1 n$ l7 Z, Q7 l$ y3-13 标签默认样式及清除
' F4 }/ x; Z2 e% g4 l) A3-14 章节总结 (03:04)
7 P7 ^% `1 a, P& R/ h7 F3 q3-15 【练习题】编写对应CSS代码! ?# N! g) n0 X, y2 y* i
3-16 测试题
: C. u, A. Z a& ]+ Z9 D4 i7 e0 I8 o
第4章 flex弹性布局 试看21 节 | 194分钟
/ |6 e, d' c3 L4-1 章节介绍 (04:45)- Y5 o" ~: k0 _2 p) A" g
4-2 主轴与交叉轴 (07:47)- c- @8 G. v0 y _/ [ M4 D" k0 ~
4-3 换行与缩写 (11:18)) ]" x7 U& z) ~& F, S
4-4 主轴对齐详解 (08:26)8 h0 \* e7 N! R" @* w) [$ u
4-5 交叉轴对齐详解 (12:28)4 k( n* u* S7 _ u: J7 e; ~' @
4-6 内联与块的上下左右居中布局 (12:10)* M; i/ U6 Q; M
4-7 不定项居中布局 (08:20)# [( U, f; t& |9 |
4-8 均分列布局 (09:00)) k( Z) s( {" Q! ~
4-9 子项分组布局 (07:43)' B% }$ y% K- Y# e
4-10 flex-grow扩展比例 (11:13)5 m! K/ k" Y! x, X& T( \1 @
4-11 flex-shrink收缩比例 (12:34)
1 [$ P$ }9 ` O7 x$ P! H4-12 flex-basis及flex缩写 (14:17)7 p w: a1 H P/ d m
4-13 等高布局 (07:00): c/ ~! E7 V& C% T3 X3 w! g* w0 E/ b
4-14 两列与三列布局 (08:29)+ g6 `7 K: [! P5 h6 D
4-15 Sticky Footer布局 (04:30)$ K3 D3 f! H4 ?- t
4-16 溢出项布局 (06:19)* \! k l# ~; c2 g
4-17 综合案例一(Swiper轮播图) (19:23)- w( x) }3 z. J' w( M ~
4-18 综合案例二(知乎导航) (24:59)
' }" g6 ~+ O, T4 h$ M+ i ~4-19 章节总结 (02:47)
e2 [ T) O% {- T" S a: q' b4-20 练习题
" {3 |- }" C) \3 Z* U4-21 测试题
& K4 R% v# H6 [5 i" F) V$ G1 B0 S8 l, h% Y- @6 A7 H, |9 f4 {6 Y( D' _
第5章 grid网格布局17 节 | 158分钟; h1 } {% `, p5 I+ Q6 ^/ p
5-1 章节介绍 (04:36)8 M7 u5 y# |7 V; e7 u
5-2 定义网格及fr单位 (08:48)
& o6 U& V5 t% R! H; i+ a5-3 合并网格及网格命名 (08:57)9 c: A/ A$ Q, M1 U# X- |' ]- X+ I
5-4 网格间隙及简写 (06:13)& j; N, m& {( Q2 j
5-5 网格对齐方式及简写 (08:35). }0 z$ J: W: b- k3 [
5-6 显式网格与隐式网格 (13:31)& B9 t7 @% i: s7 |$ P# I
5-7 基于线的元素放置 (16:28)( D# m/ y0 i: Y% r" K
5-8 repeat()与minmax() (12:59). K! d% v0 ~! S' E. x( ~8 z
5-9 比定位更方便的叠加布局 (08:08), T9 o4 i; b$ f+ J- B2 t
5-10 多种组合排列布局 (05:02)
0 f; P7 ~7 }+ \+ A( A* A9 j5-11 栅格布局 (08:35)
+ I9 w/ K; I. x5 r+ k5-12 容器自适应行列布局 (07:11)
2 Z3 |, a7 J7 l1 b5-13 综合案例一(百度热词风云榜) (22:46)
6 w) ?5 B2 K: j; x# z5-14 综合案例二(小米商品导航菜单) (22:30)" z1 Q+ ^- K7 Y1 s& l* x1 H
5-15 章节总结 (03:16)
5 i6 ]6 m/ g8 G5-16 练习题
) O0 o: m6 E0 t# @5-17 测试题- Y& G6 q) E% A2 f$ B, R6 ]
7 t' p1 m- j7 N' l3 D
第6章 移动端适配布局16 节 | 151分钟1 c0 j) T# U( N$ S- C- m- a
6-1 章节介绍 (04:00)
& P5 S3 T+ ^! N: S& _5 Q6-2 移动端概念及UI设计稿尺寸. ^7 z3 N& O* F7 G# m- R7 ?
6-3 移动端rem布局原理解析 (08:00)) z& K4 b) q" Y( d" V' N; {
6-4 动态计算font-size (10:16)
( w; a) F: r. T8 ?3 J6-5 测量rem数值及插件使用 (12:39)
1 m4 W) m/ |* w) ?6-6 rem案例：网易移动端头部实现 (13:56)
1 K4 H& {9 ~; u% g P6 n( S! i. T) F, J6-7 rem案例：网易移动端导航实现 (17:45)3 w3 ~0 K/ O# n- E) A d9 b
6-8 rem案例：网易移动端新闻列表实现(1) (10:35)* e, l& w' S7 c! F6 }! [ e* n
6-9 rem案例：网易移动端新闻列表实现(2) (15:31)
+ I$ M6 e8 \% K6-10 移动端vw布局及插件使用 (06:40)
- M" p$ G' T0 h. f" {, \3 G4 `6-11 vw案例：B站移动端头部实现 (14:49)
3 }! Y6 D( G3 G* B; T6-12 vw案例：B站移动端导航实现 (17:43)6 `5 {& {& ]$ m; y; ^) U# u8 n
6-13 vw案例：B站移动端视频列表实现 (15:35)
: ^7 O3 y/ P3 A+ p6-14 章节总结 (03:26)
% Q9 g, d" d) T& ~4 G0 B6-15 【练习题】测量"个人中心"页的css数值
; V$ o! S/ I0 G$ g: b6-16 测试题% ^" i9 W. v+ O( W& S
$ K5 [' x% v) r2 f1 e第7章 响应式布局15 节 | 117分钟
$ ?+ }% L* [& F, j. ^' W' ]' Z7-1 章节介绍 (04:56)
* b7 b2 @1 N$ s7 R. K! Q- A7-2 媒体查询语法详解 (12:18)
4 s4 n/ S7 a% {- w7-3 媒体查询的编写位置及顺序 (08:52)
$ {3 Q# y; ?) H, B/ `7-4 响应断点(阈值)的设定 (07:19)7 w6 p1 E! l" C$ |7 G" F( R
7-5 响应式栅格系统 (11:19)
$ J8 D! f7 f2 z6 ~( R% e& D7-6 响应式交互实现 (08:25)
5 J% h8 I2 T6 S! b& h& U7-7 响应式框架bootstrap1 `$ q# g% t+ J3 d9 i" @6 m4 m
7-8 响应式案例：博客头部实现 (06:21)0 i) @* h6 b& I! t/ y
7-9 响应式案例：博客导航实现 (15:00)
4 ~: {& z% t3 V! ^7-10 响应式案例：博客文章列表实现 (15:09)
3 `( `: Z2 R- Q7-11 响应式案例：博客辅助列表实现 (11:50)( y* U D8 A- Y4 O6 u
7-12 响应式案例：博客尾部实现 (11:33)
6 b7 S1 D! U( G( A8 O3 T' E! @( E+ @7-13 章节总结 (03:10)
5 i* S1 b% l- s, v9 ?: K1 P7-14 练习题7 c- G$ U" J% E7 J- X3 r
7-15 测试题$ U4 g& p6 O) W2 o; \. k
0 U! g1 l5 _& E4 F/ n0 v; [& x
第8章 综合实战 Ant Design Pro 管理系统18 节 | 165分钟
# O4 h! n( v9 `0 X0 E' Q% T8 |8-1 章节介绍 (02:51) A8 l8 F& i% P3 \
8-2 8-2 CSS文件划分及功能分类) Q, G5 L6 x/ f# r# K& B; ]+ V. G% M
8-3 8-3 CSS方法论及样式规范; ^5 D7 `9 f5 ?; w. R. `" d
8-4 实战项目：框架搭建 (11:53)! h, G% u! p9 b7 x' i
8-5 实战项目：侧边栏结构编写 (08:32)& o7 f; p, v* u7 h4 i+ Y
8-6 实战项目：侧边栏样式编写 (13:48)
3 |9 C) X6 v' J' r8-7 实战项目：侧边栏列表交互 (08:48); i. V, R: e" q" x6 h
8-8 实战项目：侧边栏折叠交互 (09:18)9 F9 ? O a: J+ }. T3 K# v
8-9 实战项目：主体头部尾部实现 (11:47)
, Z% ~( D2 ~. Q8 r8-10 实战项目：主体网格布局实现 (17:40)
# S% ~1 d h, V9 X! c$ n8-11 实战项目：设置模块主题色实现 (20:57)
$ f# r$ o2 }+ }8 ?+ {" V8-12 实战项目：设置模块切换按钮实现 (07:53)
8 A. r- Q. r2 O/ R; v: w8-13 实战项目：设置模块主题色交互 (10:57)4 w1 N& E# A' _: Z- d* z, X1 t
8-14 实战项目：设置模块切换按钮交互 (18:53)
' s( ~( V) n5 c8-15 实战项目：响应式内容及菜单实现 (18:28)
# q% [% |( j. }0 Y2 _8-16 章节总结 (03:07)
" N, J4 u, a8 ^# x7 p5 l. A8-17 练习题
" K$ k; H1 V0 M5 H, G- M8-18 测试题: ]5 \. l* Q* m. r: [+ _
8 P7 {! Z* \! ]3 U! Q第9章 课程福利加餐6 节 | 76分钟# @ w2 C$ s& ~' I! l, E {
9-1 横向瀑布流布局-1 (13:34)0 Z7 H/ P: Q. {. y
9-2 竖向瀑布流布局-2 (19:11)
( P- h2 j0 @2 ]' g0 }9-3 视觉差布局原理解析 (13:25)
6 f4 E$ B; m- d- H) e. [6 n0 F9-4 视觉差布局案例实现-1 (16:13)
: N9 r; b! P0 S& x! L% [8 _8 o' Q9-5 视觉差布局案例实现-2 (13:27)$ M8 i( B# u; n8 t# ]/ {
9-6 文字环绕布局
/ ?+ e( p9 }- y, |4 a4 W; z+ a5 o& P" E
) w% d% D% `2 N
/ U. X7 G7 f7 R& v! J% ?$ w1 L〖下载地址〗! C( f, K# t5 e' a& v0 F) X! Z7 L
. ?* E$ n, l. }* G( P7 m. J: P
〖升级为永久会员免金币下载全站资源〗
- p0 j( E0 F( @7 K全站资源高清无密，每天更新，一次充值，永久可查看网站全部资源：http://www.mano100.cn/rjyfk_url-url.html. T4 X1 a9 k4 }* T
|
|
[复制链接]
