l8 F* W5 M- L' s
" m; { W. o7 p4 {! W& m' s6 ?, [
〖课程介绍〗
* j' U/ n: V6 \2 o% B' U* L' @3 a# m) `实现精美页面是前端工程师的核心能力之一，CSS布局技术是实现精美页面的核心技术，但CSS布局好入门，难精通。本课将围绕前端4大主流布局，通过大量的实际案例，带你边学习，边实操，让你系统掌握CSS布局进阶技术，轻松解决各种精美页面布局难题。
9 u4 `, S0 V; h2 ]) b〖课程目录〗
1 u3 m" c2 s. u! d1 k" G第1章 课程介绍(了解本课程必看) 试看4 节 | 18分钟' i- Q/ m- p4 [% ~" o
1-1 课程导学 (09:16)( D- F3 G; L& r' y7 h$ ]+ Y. ]
1-2 常见布局展示及技术分析 (08:02)
9 F: M5 a w7 [$ V# b7 q1-3 软件安装与课件获取方式0 o/ T9 K% V- i
1-4 CSS发展史与CSS模块划分: ~" \: z2 B* j' \* i( g* b
0 R. z/ h8 p( s; o6 w8 ~# L- ^第2章 CSS还原UI设计 试看10 节 | 37分钟4 U4 n& a, h& P' U" p
2-1 章节简介 (02:09)
- d' @* p, ]2 A, j( U6 c. R2-2 长度单位与颜色分类% V! Y2 ]. R5 w9 }( i# m4 e: }
2-3 UI设计图的源文件种类
; v% v3 M5 ?' T$ @' z2 H/ M. G2-4 Photoshop还原UI设计 (06:59)
% |6 s" r) W% l3 y% p" L* d$ p& x2-5 蓝湖App快速标注信息 (07:51)
I" T2 ^1 l) q, [0 \" F. `2-6 PxCook自动标注工具 (08:59)
" W( v& R1 ]7 x7 J. s2-7 imgcook设计稿智能平台 (06:41)( r+ r# u' a! E
2-8 章节总结 (03:51)
; C4 l! k) Z; X, H1 h0 R2-9 【练习题】测试psd中的相关CSS数值
/ |# n8 G$ s9 @# J5 J& C2-10 测试题
; h g$ c! X" }" y. ]: O) T0 E0 {) @0 F* u& w
第3章 布局中的尺寸与位置16 节 | 102分钟, e6 `3 E2 I- g( t8 s, W- U
3-1 章节介绍 (03:43)2 d+ B$ c+ m, k1 N! J. Z: |
3-2 CSS盒模型的组成 (17:32)9 G$ G8 D" p% b* m k
3-3 块级盒子与内联盒子 (11:11) _" P" d9 m+ C% `
3-4 自适应盒模型的特性 (05:43)
8 W# g4 J+ B! d1 M; g3-5 标准盒模型与怪异盒模 (11:26)
+ f$ j+ c' h; h: Y3-6 浮动样式详解 (18:52)
4 [8 I$ _: ]: B, Q! d3-7 浮动特性注意点 (07:58)
9 G9 m! ]) r2 B: u3 [" \3-8 定位样式详解 (12:44)
4 `+ z! y& `) U( Q4 m* k3-9 定位特性注意点 (08:48)
: t5 A" E3 J1 y8 }9 ~$ w4 q; \3-10 详解display属性
" { k* k! z* ]; _: Y3-11 书写模式与逻辑属性
4 S* X) o) J0 T, o9 z; D" g3 t3-12 BFC块级格式化上下文; J2 n1 f5 f7 ~, ]5 a1 k
3-13 标签默认样式及清除
6 u% C( q. u$ T& o$ w( V3-14 章节总结 (03:04)$ o1 x) J5 F! G0 R' X' l/ d* h: E
3-15 【练习题】编写对应CSS代码; p* u# e6 o) n4 w( l( n. x
3-16 测试题; _' O+ M5 h, {* Z& e7 s. t% ^
" P4 H% H( h9 R+ @( _
第4章 flex弹性布局 试看21 节 | 194分钟. i* j! h, l( P5 b) l9 T
4-1 章节介绍 (04:45)0 b+ q7 d% R. Y) Q) C4 m
4-2 主轴与交叉轴 (07:47)4 e: P6 B; v3 h
4-3 换行与缩写 (11:18)
5 L/ [3 X# r% G* u; ]4 f! s4-4 主轴对齐详解 (08:26)1 k' Y% l7 t8 n4 T
4-5 交叉轴对齐详解 (12:28)9 d1 g% H) K3 p; _( _3 G
4-6 内联与块的上下左右居中布局 (12:10)
+ R l9 b4 Y& @0 @4-7 不定项居中布局 (08:20)' Q8 _3 D& y y# j
4-8 均分列布局 (09:00)
9 Q( b1 O/ K3 T; Z0 N5 R( a4-9 子项分组布局 (07:43)
, k1 r9 l+ p& f2 d4-10 flex-grow扩展比例 (11:13)
4 Y% A8 R- v* K/ Y, W7 }8 y M) R+ o4-11 flex-shrink收缩比例 (12:34)
0 S1 C1 p( k9 @8 \1 V4 j: D; z4-12 flex-basis及flex缩写 (14:17)8 `# V1 O, [' [6 a
4-13 等高布局 (07:00)$ f' I m2 s; t
4-14 两列与三列布局 (08:29)8 A( [% c! y% w5 d! y
4-15 Sticky Footer布局 (04:30)
; b, D8 j& ~' }; w4-16 溢出项布局 (06:19)5 F, @! p5 w9 B% n8 k: V' J8 h8 S
4-17 综合案例一(Swiper轮播图) (19:23)
# m7 [! |1 j' p* g* _! w4-18 综合案例二(知乎导航) (24:59)! \2 p' B. ?0 s; g) \
4-19 章节总结 (02:47)
# |7 D* q* @1 Z4-20 练习题+ e3 y$ R( f9 O" h+ E# l7 y7 ?
4-21 测试题
- T5 i9 F# ^ ]8 j- V, Q4 D9 O" e& x6 [5 r: { s; e
第5章 grid网格布局17 节 | 158分钟3 P* D8 G6 s$ Q, q# C" v3 S; a3 t+ A M% H9 E
5-1 章节介绍 (04:36)
$ u" L+ j5 X" l" d* l* o5-2 定义网格及fr单位 (08:48)
* I6 B: D2 D( \5-3 合并网格及网格命名 (08:57)# v" H8 W% P" M
5-4 网格间隙及简写 (06:13)
- y$ b( p4 d" O3 ]& z' ?& m9 i( Y/ X6 z5-5 网格对齐方式及简写 (08:35)
3 z7 ^# f2 j0 u! y0 H9 e, s5-6 显式网格与隐式网格 (13:31)
@2 B @* F' ^* p! c9 m5-7 基于线的元素放置 (16:28)& \, P& U' ~* D" f+ j
5-8 repeat()与minmax() (12:59)
4 Z8 E& | |2 B1 e+ J9 r, G5-9 比定位更方便的叠加布局 (08:08). q4 x! ?, t2 L; A0 N1 X
5-10 多种组合排列布局 (05:02)% X+ T: H8 X, \* Y. a7 }
5-11 栅格布局 (08:35)
. E) f* d3 U h: R- B6 c% ^% ~5-12 容器自适应行列布局 (07:11)
" w! ]9 U) _* c3 n+ a+ Z8 h6 N/ V5-13 综合案例一(百度热词风云榜) (22:46)
$ Y" G& S+ ?) B Y5-14 综合案例二(小米商品导航菜单) (22:30)
E0 q6 z; h: z8 {7 W9 [% X" ]5-15 章节总结 (03:16)2 }% r* I! L8 ]) j' k8 u n: g5 r% e
5-16 练习题0 V) y4 \2 i4 G# L, N9 K [
5-17 测试题- `& p8 E- S7 J: @5 L
' c: e) {% O7 ^- r) ^9 ^5 _
第6章 移动端适配布局16 节 | 151分钟
- l7 t3 J2 ]6 R5 H0 `6-1 章节介绍 (04:00)8 g p5 P* n' A4 G* v8 Y8 B
6-2 移动端概念及UI设计稿尺寸7 X1 o/ j. `2 {8 D
6-3 移动端rem布局原理解析 (08:00)
1 ]- l6 `$ P& |& K; w7 j6-4 动态计算font-size (10:16)
( F( @+ x; Z' z5 i6-5 测量rem数值及插件使用 (12:39)1 p+ H) ~4 ~ h2 K
6-6 rem案例：网易移动端头部实现 (13:56)( D' o B" U5 S j1 f& E0 z8 j4 u
6-7 rem案例：网易移动端导航实现 (17:45)2 q; U5 `; Z$ _3 x E0 C% g
6-8 rem案例：网易移动端新闻列表实现(1) (10:35)( A( p& h; t' q
6-9 rem案例：网易移动端新闻列表实现(2) (15:31)# s# i) I; ~! ^
6-10 移动端vw布局及插件使用 (06:40)0 L0 c1 p% w. h& T/ g8 X* R1 J# D
6-11 vw案例：B站移动端头部实现 (14:49)
% G; r0 \* G/ b' _ j* Y6-12 vw案例：B站移动端导航实现 (17:43)
& _; H- o0 [2 f- S* k6-13 vw案例：B站移动端视频列表实现 (15:35)
+ e: e0 z1 @% {. a6-14 章节总结 (03:26)
! H1 |+ t* S+ h8 D6-15 【练习题】测量"个人中心"页的css数值
2 @% T( _2 _7 ?; S( a9 W5 H, }5 L" P2 w6-16 测试题1 I" W- K9 K5 c1 Y
- h5 h/ s9 ?7 }: G1 e, e第7章 响应式布局15 节 | 117分钟
; f' x6 [' J% C7 K6 ]! A7-1 章节介绍 (04:56)0 n9 `9 M- G$ W. U* f/ O* B; O
7-2 媒体查询语法详解 (12:18)
% i8 s& {5 A9 R7-3 媒体查询的编写位置及顺序 (08:52)
( y% S3 f$ \: U, C& J* `7-4 响应断点(阈值)的设定 (07:19); g; X4 e8 l: P$ O1 F7 C( w+ Y
7-5 响应式栅格系统 (11:19). |9 N* T( m3 j& ^# h# T
7-6 响应式交互实现 (08:25)" T, y7 O' v" W0 [9 Y# L8 X
7-7 响应式框架bootstrap, Z$ G# a5 k. b+ Q9 j- _
7-8 响应式案例：博客头部实现 (06:21)
$ ?: ^6 D+ i* h7 ]! g# B1 ~9 h8 I7-9 响应式案例：博客导航实现 (15:00)! F3 Y9 B+ Z5 @; G6 `% n
7-10 响应式案例：博客文章列表实现 (15:09)5 O3 D. g% ]2 @, d$ E9 h
7-11 响应式案例：博客辅助列表实现 (11:50)
( o$ K4 Y5 \7 o8 ]/ i7-12 响应式案例：博客尾部实现 (11:33), m1 J; H* s/ |: h, ?# O
7-13 章节总结 (03:10)
5 {1 H+ R! N& a9 r7-14 练习题# ~8 i% s z+ D l( s" I
7-15 测试题
+ l' P1 T6 g6 `9 X" H( N. G3 s6 }. S- u8 @8 x
第8章 综合实战 Ant Design Pro 管理系统18 节 | 165分钟
( n6 _1 g6 C( O2 x# P- L) Q8-1 章节介绍 (02:51), ^+ F; W) L' q" R( ?2 A
8-2 8-2 CSS文件划分及功能分类
) ^; X* M! Z, I0 S5 l7 j8 x" Y8-3 8-3 CSS方法论及样式规范
. T1 r7 ]6 u+ \* Y& v; m8-4 实战项目：框架搭建 (11:53)/ {# {# d! r. R9 h" Y0 ^1 G+ Q
8-5 实战项目：侧边栏结构编写 (08:32)
1 C& n( t$ r u# `9 I: H& P8-6 实战项目：侧边栏样式编写 (13:48)+ d" [( \; Q, U( O) E0 A7 r
8-7 实战项目：侧边栏列表交互 (08:48)
% W P& p' f, h: H) e. ~' ?2 q8-8 实战项目：侧边栏折叠交互 (09:18)
* K+ V0 G, Q6 T7 r3 W$ @0 ~7 p! Q8-9 实战项目：主体头部尾部实现 (11:47)' b& v0 j- C, }5 q* Z3 E F* C
8-10 实战项目：主体网格布局实现 (17:40)
, U. k# r$ ^5 |8 \6 I8-11 实战项目：设置模块主题色实现 (20:57)
4 l. M5 j" N( K$ i8-12 实战项目：设置模块切换按钮实现 (07:53)8 b& F/ P$ |: H/ m1 l+ l
8-13 实战项目：设置模块主题色交互 (10:57)' f4 B/ i x6 b0 n
8-14 实战项目：设置模块切换按钮交互 (18:53)) ?3 p3 N2 Z! y' E
8-15 实战项目：响应式内容及菜单实现 (18:28)
$ \1 J7 Q# t: K, J! b8-16 章节总结 (03:07)( ^6 `: o! C3 s' x8 }" j
8-17 练习题
& F! V; e/ m' j8-18 测试题. a6 X! W' V3 J
' H9 w1 ~( z1 X$ _1 G) s" I% b第9章 课程福利加餐6 节 | 76分钟6 Z9 z( P, N! C5 @
9-1 横向瀑布流布局-1 (13:34)$ B7 D2 K `" T% x
9-2 竖向瀑布流布局-2 (19:11)
5 U* d2 m. c' [% ?" N9-3 视觉差布局原理解析 (13:25)
4 T0 B2 X1 [' o9 Y& V; i9-4 视觉差布局案例实现-1 (16:13)
& r) G# t9 H2 A" n( e Q9-5 视觉差布局案例实现-2 (13:27); \. T2 ?5 Z' c1 y
9-6 文字环绕布局/ v; h" ]: A' T$ p$ n
8 w. z6 A( L; M* f( q5 l
* g$ [2 K s$ A# ~2 D- _) H
〖下载地址〗
9 m( o% Z3 u7 W" J+ \( M I2 Z
" U+ L6 L8 {. h J〖升级为永久会员免金币下载全站资源〗
8 f. w! G2 f& Q3 ` N: {全站资源高清无密，每天更新，一次充值，永久可查看网站全部资源：http://www.mano100.cn/rjyfk_url-url.html; B+ D1 Q' k3 u* s# ~6 d9 \
|
|
[复制链接]
