7 _, x( j6 d- b
6 u/ V' i! _; D. r〖课程介绍〗3 L" r* U; g# ^& ?% c
实现精美页面是前端工程师的核心能力之一，CSS布局技术是实现精美页面的核心技术，但CSS布局好入门，难精通。本课将围绕前端4大主流布局，通过大量的实际案例，带你边学习，边实操，让你系统掌握CSS布局进阶技术，轻松解决各种精美页面布局难题。
( `2 o& Y7 P. J1 x) I+ k〖课程目录〗
2 Y. `% q' F/ G% h0 C, ~第1章 课程介绍(了解本课程必看) 试看4 节 | 18分钟
/ T4 H+ B" L& A: n" B" r% G1-1 课程导学 (09:16)0 m Y% c N& f K
1-2 常见布局展示及技术分析 (08:02)7 E( ~/ u5 a( g. q" L
1-3 软件安装与课件获取方式6 d, B) s3 T, L8 @2 W
1-4 CSS发展史与CSS模块划分3 _% B- {# B7 d/ C m
2 ~3 x/ I' \: U
第2章 CSS还原UI设计 试看10 节 | 37分钟$ I1 f w+ o5 z- i% S7 G" ^8 `1 L
2-1 章节简介 (02:09). h" z1 i" A! v0 p; x7 F) V) a
2-2 长度单位与颜色分类
! n8 t4 i/ l* ]# w0 ], g3 z- O2-3 UI设计图的源文件种类( X: b2 l2 a& A* b* L0 a2 W9 N" A
2-4 Photoshop还原UI设计 (06:59)
% e+ {" Z4 c4 u' x8 K2-5 蓝湖App快速标注信息 (07:51)
; r, |" n' ]0 t/ b& a/ \ S2-6 PxCook自动标注工具 (08:59)# R! G* y7 ^0 d6 x% W0 ~7 T
2-7 imgcook设计稿智能平台 (06:41)0 d0 `* H9 q j8 m d* a2 u" t
2-8 章节总结 (03:51)# j; m) l8 B! k4 w: F
2-9 【练习题】测试psd中的相关CSS数值
: t# D' j1 P8 X2-10 测试题% V) P+ t& U+ g
4 x9 h9 ^. V* |6 b& F
第3章 布局中的尺寸与位置16 节 | 102分钟2 R2 e3 N. u; ?+ q/ ^8 h
3-1 章节介绍 (03:43)
( k" H$ `; I+ c. ?- G: i: C0 o4 g3-2 CSS盒模型的组成 (17:32)0 W! {! S/ T6 @* m- b8 \
3-3 块级盒子与内联盒子 (11:11)
O% P$ A0 V4 Z. w- `9 c3-4 自适应盒模型的特性 (05:43)
7 d8 A7 V/ |5 b: |3-5 标准盒模型与怪异盒模 (11:26)0 c' z! l/ W! f
3-6 浮动样式详解 (18:52)# k& U4 n. A9 y8 m- \ }5 B
3-7 浮动特性注意点 (07:58)
: X, {' o, R' @" r3-8 定位样式详解 (12:44)5 I4 {$ v3 a! [$ n% L: o
3-9 定位特性注意点 (08:48)" R3 M, t# I, Q+ W2 d
3-10 详解display属性
! p! G6 o+ G) u9 M3 @3-11 书写模式与逻辑属性
& L d* s* c' M4 m! m5 c' x- K3-12 BFC块级格式化上下文; E4 o$ h# q" e1 U. d) T
3-13 标签默认样式及清除
- r4 {" r, Q% k( B; p/ _3-14 章节总结 (03:04)
: w5 C. _" `( F3 q( H: v3-15 【练习题】编写对应CSS代码9 P% A; n$ q3 Q! |! o5 w
3-16 测试题
* ~2 t/ O: S4 N
* P. f2 ~, v$ v* X! M; s第4章 flex弹性布局 试看21 节 | 194分钟7 z2 O; I6 Y3 `! a, e4 x5 q! z
4-1 章节介绍 (04:45)
2 F; [! Q* L) P- u4 x9 B4-2 主轴与交叉轴 (07:47)
" z7 Q. z/ m8 s. B' [5 d% K4-3 换行与缩写 (11:18)
% B# M/ D& w6 H% ^; Q4-4 主轴对齐详解 (08:26)
- ]6 b( M3 \- [8 Q n- s4-5 交叉轴对齐详解 (12:28)
8 t: g* _3 A6 V u! B4-6 内联与块的上下左右居中布局 (12:10)
j$ P d9 \9 ?, ?) Y4-7 不定项居中布局 (08:20)0 |" r3 W u% p! U
4-8 均分列布局 (09:00)
2 k; Z8 M- \ Q, |8 @( K( V8 O4-9 子项分组布局 (07:43)
Q3 }! R8 C1 Z( b( P2 H4-10 flex-grow扩展比例 (11:13)
( M) g! ~" Q. }4-11 flex-shrink收缩比例 (12:34)$ J3 Z' p' y. g5 b/ O' P: P
4-12 flex-basis及flex缩写 (14:17)( X3 l$ C( v8 H, ^* A7 T: [, T5 l7 b9 ]
4-13 等高布局 (07:00)
, {, R9 M6 j6 m% W6 z4-14 两列与三列布局 (08:29)
: I6 j6 ~6 p. w# F. b7 {4-15 Sticky Footer布局 (04:30)
" R4 p8 k7 X7 H+ ^; }4-16 溢出项布局 (06:19)
( c$ \5 n0 D9 E) ~4-17 综合案例一(Swiper轮播图) (19:23)+ o; j' _- {; b) ^/ [
4-18 综合案例二(知乎导航) (24:59)' ~% r" B6 c( g
4-19 章节总结 (02:47)
8 P4 X8 L4 _: }* ]- y8 C4-20 练习题
- ~# X! k0 V) m3 H' g6 ^% {. H4-21 测试题
* X4 v& ` E E. s" E" C) _+ B9 B( j/ _4 ^- c
第5章 grid网格布局17 节 | 158分钟1 D" X3 m3 X2 B6 G& h9 O3 D2 b
5-1 章节介绍 (04:36)2 t+ j" N4 r- h, U. Y7 |4 A9 `
5-2 定义网格及fr单位 (08:48): |3 O3 Q+ b N' N+ F) x
5-3 合并网格及网格命名 (08:57)
( t, C% Q) n+ G }2 s0 q0 h, Z+ f5-4 网格间隙及简写 (06:13)% |1 [- _3 H/ }9 A1 A& j- `' f
5-5 网格对齐方式及简写 (08:35)9 j- K" r& b5 n$ h- t( z+ y' j
5-6 显式网格与隐式网格 (13:31)! F( {3 w5 x% x
5-7 基于线的元素放置 (16:28)
$ b7 @7 J) x& T8 m3 G3 G. B5-8 repeat()与minmax() (12:59)
% r. j5 r8 p# x7 {1 n% v& G5-9 比定位更方便的叠加布局 (08:08)
+ i8 p6 ?8 H1 c0 T5-10 多种组合排列布局 (05:02)) H/ p' q. w0 D6 p3 b2 B% N) q
5-11 栅格布局 (08:35)
2 ~8 e1 Z0 p: I5-12 容器自适应行列布局 (07:11)
2 U+ u" ~$ J# S# \$ I d5-13 综合案例一(百度热词风云榜) (22:46)
! f: l: d( v8 ~; V! d2 g' M5-14 综合案例二(小米商品导航菜单) (22:30)
6 I4 L# C: Z) [+ K9 A) |. C5-15 章节总结 (03:16)1 ~ S( M, X D x N( T5 C; \
5-16 练习题
( ?/ E( C* o: r( z- Q5-17 测试题8 l) M4 l2 U& I- n; b. g
0 ^5 M) [2 u' T9 j" S第6章 移动端适配布局16 节 | 151分钟; N. O1 E& R5 \
6-1 章节介绍 (04:00)1 y: c- p% t* m: _7 e9 B0 P# k
6-2 移动端概念及UI设计稿尺寸2 M& `3 n# Q; z9 G# ]4 {
6-3 移动端rem布局原理解析 (08:00); |8 Y& [) i" m W1 s
6-4 动态计算font-size (10:16)( R2 r: V+ ~. z! x$ y
6-5 测量rem数值及插件使用 (12:39)7 d( J& u: `6 j
6-6 rem案例：网易移动端头部实现 (13:56)* z2 [- I( N: U+ w4 s; M
6-7 rem案例：网易移动端导航实现 (17:45)) Z2 J$ A7 C, S" t+ x; K0 [
6-8 rem案例：网易移动端新闻列表实现(1) (10:35); L; n9 A6 E. d$ u
6-9 rem案例：网易移动端新闻列表实现(2) (15:31)
+ O! W z4 m, J3 d- u8 d( i1 v6-10 移动端vw布局及插件使用 (06:40): `8 D* j7 e' Y" N: z# P
6-11 vw案例：B站移动端头部实现 (14:49): n+ g" e; o% V! c( y
6-12 vw案例：B站移动端导航实现 (17:43)
+ ~1 U2 y, O/ l ]2 h- l" L6-13 vw案例：B站移动端视频列表实现 (15:35)
8 n0 u5 n8 i, `6-14 章节总结 (03:26)
M) e8 `1 [* P# j4 }' h! C* |6-15 【练习题】测量"个人中心"页的css数值: f0 J; g7 e8 K
6-16 测试题9 o1 ^9 X i# M
1 g% i8 W: [) s! d; _2 u5 t
第7章 响应式布局15 节 | 117分钟0 d" g l! h! B" [
7-1 章节介绍 (04:56)
/ a2 [" A8 v8 _8 P2 P$ \* K0 ~7-2 媒体查询语法详解 (12:18)/ @8 g4 X6 _. O
7-3 媒体查询的编写位置及顺序 (08:52)5 e- J7 L1 | P2 { F
7-4 响应断点(阈值)的设定 (07:19)
9 C6 M( z/ y) `- g& g4 O7-5 响应式栅格系统 (11:19)
4 `! b/ D. G& f! Y8 `7-6 响应式交互实现 (08:25)1 U0 a3 o# i/ u# ]
7-7 响应式框架bootstrap
3 L( f0 {9 @& {7-8 响应式案例：博客头部实现 (06:21)
# F& w& z. x( ]( W7-9 响应式案例：博客导航实现 (15:00)# j: t. Z( M& d0 O) h
7-10 响应式案例：博客文章列表实现 (15:09)
& m E, \, U0 c6 W( ^3 J/ K7-11 响应式案例：博客辅助列表实现 (11:50)
$ r) C& E. f+ a7-12 响应式案例：博客尾部实现 (11:33); V6 N$ S" X! T$ R. @7 {
7-13 章节总结 (03:10)
. V; r! q8 [8 X8 m L* y4 I# r" s7-14 练习题" @& f( [" |5 n" m* s
7-15 测试题- Z5 o: K+ Q4 h5 k9 y. f9 ?
' E9 I# N* `+ O+ Z) b第8章 综合实战 Ant Design Pro 管理系统18 节 | 165分钟; _1 \8 p+ R1 l& L- H' t0 P
8-1 章节介绍 (02:51)4 @8 Q' [ L1 o& S- L
8-2 8-2 CSS文件划分及功能分类
1 K+ k. K' f& Z2 D# z6 t4 A p8-3 8-3 CSS方法论及样式规范
1 T- Y. ]1 c3 z. m8-4 实战项目：框架搭建 (11:53): } a1 o7 Y7 k# z* g& O
8-5 实战项目：侧边栏结构编写 (08:32)* t) v- n8 i6 S2 \; P& V
8-6 实战项目：侧边栏样式编写 (13:48)
5 R; ^, t* |2 J( K" B8-7 实战项目：侧边栏列表交互 (08:48)$ s- E/ r; F7 }6 F. L
8-8 实战项目：侧边栏折叠交互 (09:18)9 c; d- W1 Q$ F% r% X
8-9 实战项目：主体头部尾部实现 (11:47)
/ S& B& k( ^: R2 ^4 M: G% ~7 d7 N8-10 实战项目：主体网格布局实现 (17:40)
1 k! q, h# m3 m! G A3 w: X, v8-11 实战项目：设置模块主题色实现 (20:57)) e3 n: T& i5 }+ u+ o% Z9 a# M% f
8-12 实战项目：设置模块切换按钮实现 (07:53)
( i: q0 K( a. `- A. O, T8-13 实战项目：设置模块主题色交互 (10:57). W8 J q- P3 H u$ {. x
8-14 实战项目：设置模块切换按钮交互 (18:53)
: T; _3 Y4 }0 v! t6 y8-15 实战项目：响应式内容及菜单实现 (18:28)
* J. u+ m9 L) O0 m8-16 章节总结 (03:07)0 [/ x6 z4 z6 H( B! J; z
8-17 练习题
z) A" j, y4 u8-18 测试题
6 X- K. r! M ~- j8 _$ Z' p3 j3 r+ I( g+ `+ \
第9章 课程福利加餐6 节 | 76分钟
7 L' s! e* r, I: \. q/ m9-1 横向瀑布流布局-1 (13:34)8 T3 V7 K, I: c7 H7 F
9-2 竖向瀑布流布局-2 (19:11)
2 \6 @* U5 J% V9-3 视觉差布局原理解析 (13:25)
- X# i q% X1 F5 H# _5 x9-4 视觉差布局案例实现-1 (16:13)- R; J$ G2 Z8 v) A# Q \7 \( C; q- }; W
9-5 视觉差布局案例实现-2 (13:27)
7 n5 L1 t, A; f9-6 文字环绕布局4 p2 {/ j8 x' m0 R5 m
1 _# |5 i% q4 _3 J) x1 P
7 l3 T- O+ A6 V+ @: O7 l/ |/ F〖下载地址〗; B; u8 U0 S' N6 ~5 p6 I
/ ?' d3 J9 x8 }
〖升级为永久会员免金币下载全站资源〗
9 n# U Y4 q% [: F3 S6 M2 }全站资源高清无密，每天更新，一次充值，永久可查看网站全部资源：http://www.mano100.cn/rjyfk_url-url.html' K) U+ S+ {# w4 `
|
|
[复制链接]
