# q/ A: H" {2 f) w( `5 D. A4 r+ o) X; p( f; O$ g: R
〖课程介绍〗& `7 T& ?- M& K1 a
实现精美页面是前端工程师的核心能力之一，CSS布局技术是实现精美页面的核心技术，但CSS布局好入门，难精通。本课将围绕前端4大主流布局，通过大量的实际案例，带你边学习，边实操，让你系统掌握CSS布局进阶技术，轻松解决各种精美页面布局难题。3 D# u4 u9 y) u
〖课程目录〗
; ?0 V2 X; L& u. O第1章 课程介绍(了解本课程必看) 试看4 节 | 18分钟
. R+ K. I9 K; l0 Z1-1 课程导学 (09:16)/ q( l2 _4 v6 V
1-2 常见布局展示及技术分析 (08:02)
- D/ B2 `6 }/ \$ T: ?8 A9 e& a1-3 软件安装与课件获取方式$ D: i4 u P5 Y
1-4 CSS发展史与CSS模块划分
% C$ A5 a( r6 A4 N+ c+ C& D% n; o. d/ z0 m
第2章 CSS还原UI设计 试看10 节 | 37分钟
" v3 L0 o$ @+ g# m2-1 章节简介 (02:09)- q2 u+ n. j# v1 \' X+ K; I9 Q7 Z
2-2 长度单位与颜色分类
. t! q5 i2 b/ ] w7 [* X! a2-3 UI设计图的源文件种类
" M/ L: m( I' z# m) d2-4 Photoshop还原UI设计 (06:59)% q. B7 S1 I2 H: o1 z9 {" }
2-5 蓝湖App快速标注信息 (07:51)
( f% ~% y2 Y0 P: Z2-6 PxCook自动标注工具 (08:59)1 j2 N6 e7 N5 z9 g, S
2-7 imgcook设计稿智能平台 (06:41)$ L+ T; O2 X% A; u9 }1 a, R2 j
2-8 章节总结 (03:51) n7 v5 ~$ [4 P/ k; p
2-9 【练习题】测试psd中的相关CSS数值0 I9 y0 i( D1 s+ s- L& X2 h! r
2-10 测试题
* z) S/ u4 r; V m
1 w2 E, o% c3 h1 P; s第3章 布局中的尺寸与位置16 节 | 102分钟+ f4 g% v: g" [1 a2 r' |
3-1 章节介绍 (03:43)
% h5 n# V+ r1 d* P8 h, a! O3-2 CSS盒模型的组成 (17:32)
. x- ~/ M8 X7 S5 e" U* ~3 L3-3 块级盒子与内联盒子 (11:11) D+ K; i$ X7 L: [) B
3-4 自适应盒模型的特性 (05:43)
* ]& ?7 _+ w3 W# v; S! N3-5 标准盒模型与怪异盒模 (11:26)
. L+ m" I- B5 i+ v3-6 浮动样式详解 (18:52)
! Q$ l* U! w" d# M1 ^# Y" o& B3-7 浮动特性注意点 (07:58)0 N( R6 x2 A6 v3 w) a# I
3-8 定位样式详解 (12:44)
5 u! t2 n9 `3 M" W5 d3-9 定位特性注意点 (08:48)8 ?- I' b. C# T0 p
3-10 详解display属性 t: s1 W$ w9 H# Y+ y# b4 h k' i! N
3-11 书写模式与逻辑属性1 ? s8 x$ U M$ @
3-12 BFC块级格式化上下文6 S: ]4 \' p6 c% l8 [
3-13 标签默认样式及清除
/ m/ [# v: O! Z3-14 章节总结 (03:04)
: t/ y) ?) J8 w) g- F9 {3-15 【练习题】编写对应CSS代码. S0 c) E( E/ A* ^& X$ s
3-16 测试题, ^8 Q& _: T2 t0 ^2 J z
; A7 @( i) c- ~# g0 `8 b
第4章 flex弹性布局 试看21 节 | 194分钟
" \4 I- N. G' b/ A' R2 D4-1 章节介绍 (04:45)3 r% c- o( ~5 `0 Q/ s2 d4 ~
4-2 主轴与交叉轴 (07:47)5 c; x% b2 h/ j1 X
4-3 换行与缩写 (11:18)6 Y# |/ C9 E% E5 d
4-4 主轴对齐详解 (08:26)' J+ [* [% ~! \: h0 m! o
4-5 交叉轴对齐详解 (12:28); a- G5 |, a/ _
4-6 内联与块的上下左右居中布局 (12:10) r5 n. {$ o, o* M8 s0 Y
4-7 不定项居中布局 (08:20)& P$ P$ B) y4 \& L) n+ f7 E! s: |
4-8 均分列布局 (09:00)
3 Q, M9 S; E! \4-9 子项分组布局 (07:43), @$ u% ?) n; _
4-10 flex-grow扩展比例 (11:13)
1 L* x5 t4 Z2 ^$ a* E. y4-11 flex-shrink收缩比例 (12:34)
) x9 U! k6 }) c0 R& G3 \4-12 flex-basis及flex缩写 (14:17)
2 t- \$ W$ f9 V3 E$ b0 p4 ?4-13 等高布局 (07:00)
; }# l1 f p: t8 v) t, Y2 k" w4-14 两列与三列布局 (08:29)
. [+ h8 P: m2 Q2 } y4 `4-15 Sticky Footer布局 (04:30)
( @: i7 y$ I: C/ [! R9 m0 M6 |4-16 溢出项布局 (06:19)
/ Z' f1 H% _" @& j$ e3 J; k* D4-17 综合案例一(Swiper轮播图) (19:23)9 ?. c' s3 p" `) t
4-18 综合案例二(知乎导航) (24:59)% d. {9 U }/ K9 g+ G
4-19 章节总结 (02:47) F; O& R; g1 p& Z3 l
4-20 练习题: l8 u/ D7 c/ E, g1 z$ ?
4-21 测试题6 n. X& O' O, ~2 [; K/ A# X
" a9 J) v; x! B1 l4 V8 m5 T7 K
第5章 grid网格布局17 节 | 158分钟
* N8 r& m, k3 L5-1 章节介绍 (04:36). l! _4 v$ v; w& E; V1 w% _
5-2 定义网格及fr单位 (08:48) y5 U0 _' E+ c2 U. v! e
5-3 合并网格及网格命名 (08:57)
- t& M6 h+ J S% y5-4 网格间隙及简写 (06:13)
; @# F% J/ H8 u4 `( H- L+ f5-5 网格对齐方式及简写 (08:35)
# l; n, @" R. E, l F& B! V5-6 显式网格与隐式网格 (13:31)
! Q/ D8 z# s9 e/ _ J* |# p5-7 基于线的元素放置 (16:28)
, `# b* L# d- F5-8 repeat()与minmax() (12:59)
0 ^5 a6 ~; U4 \' l+ [9 ~8 z9 _( E5-9 比定位更方便的叠加布局 (08:08)1 c) t t% `3 _ _; L
5-10 多种组合排列布局 (05:02)- b; i: G9 c* ~9 v1 a5 ]
5-11 栅格布局 (08:35)! L. ^2 M q' e7 n( i, H
5-12 容器自适应行列布局 (07:11)
; h" l. _9 G% S; N5 Y5-13 综合案例一(百度热词风云榜) (22:46)
# a+ w1 q* y# j5-14 综合案例二(小米商品导航菜单) (22:30)* c% F; ~& K5 q/ \% m& z
5-15 章节总结 (03:16)
8 ?: J1 @& A! P1 Z! P5-16 练习题$ L9 W4 D) N( C* S* `
5-17 测试题' ]' }/ V( R( \9 V5 C5 b
7 V8 N( L3 U7 e- P% Q* [; r第6章 移动端适配布局16 节 | 151分钟
5 O" {' s# f0 ]$ s2 Q& }6-1 章节介绍 (04:00)
7 Y& j0 g3 [( k9 N( c2 V5 c$ f* {6-2 移动端概念及UI设计稿尺寸& B6 p1 a+ h9 n% A+ f
6-3 移动端rem布局原理解析 (08:00)
0 e& X0 M2 }9 i5 f6-4 动态计算font-size (10:16)
! \5 y0 [7 D- d; I) q6-5 测量rem数值及插件使用 (12:39); T W+ y u x& B5 V) Q
6-6 rem案例：网易移动端头部实现 (13:56)
+ x8 p. [1 f3 w2 E" e6-7 rem案例：网易移动端导航实现 (17:45)
7 L$ y/ u+ {$ I( G. a' D. ~6-8 rem案例：网易移动端新闻列表实现(1) (10:35)2 N8 ~3 H3 B# D( M J
6-9 rem案例：网易移动端新闻列表实现(2) (15:31)2 z7 \( l) ]! N1 h3 _, `
6-10 移动端vw布局及插件使用 (06:40)
6 Q* `7 z, w8 b1 [& x6-11 vw案例：B站移动端头部实现 (14:49)0 \, M# }4 A* _! |- P( h t
6-12 vw案例：B站移动端导航实现 (17:43)
, W' H6 A) q) o/ C6-13 vw案例：B站移动端视频列表实现 (15:35)' b: v5 x& k' k. ^/ {
6-14 章节总结 (03:26); h! j) x: g4 l9 ]( H
6-15 【练习题】测量"个人中心"页的css数值3 U8 M; Y% L( ]$ U
6-16 测试题
7 }# x& X1 e: _. Q' i+ b# H
j7 E/ N; _ J3 t第7章 响应式布局15 节 | 117分钟: `* o2 K* v0 h/ c* Q. s( |
7-1 章节介绍 (04:56)
) H2 w9 }* k \% E s7-2 媒体查询语法详解 (12:18): v" o1 U. G5 B- ]
7-3 媒体查询的编写位置及顺序 (08:52)5 R' V& J. U3 i- l
7-4 响应断点(阈值)的设定 (07:19)8 x- D" Y/ R5 S& f0 f @3 ?( {
7-5 响应式栅格系统 (11:19)
) B- G# E' a& M K5 G7-6 响应式交互实现 (08:25)
: l9 B" [' m& ^ e7-7 响应式框架bootstrap
2 K& g" ~/ ^! n* n7-8 响应式案例：博客头部实现 (06:21)6 z, W3 [) l/ p* Y8 V
7-9 响应式案例：博客导航实现 (15:00)
& n) j$ ?! F" j* ?7-10 响应式案例：博客文章列表实现 (15:09)
$ A# i# B+ E$ Z* V7-11 响应式案例：博客辅助列表实现 (11:50)
8 y7 f/ D0 H1 n Z3 m* S7 C7-12 响应式案例：博客尾部实现 (11:33)
$ v Z7 I' ], L! v! r8 `* T7-13 章节总结 (03:10)
) s: Y3 ?& f* _7-14 练习题+ y/ ]2 w& Y& O" `/ _" U7 ^, A8 k
7-15 测试题
& f) O, P2 [2 J% M1 q0 x3 i9 q) }$ F* e/ e) e% S! Z
第8章 综合实战 Ant Design Pro 管理系统18 节 | 165分钟3 n4 H, ?, B/ y/ m
8-1 章节介绍 (02:51)
: S' f- h) E1 t& T+ I! ]8-2 8-2 CSS文件划分及功能分类7 j0 u( d% [8 C3 p
8-3 8-3 CSS方法论及样式规范8 u( s. m' j# z' w' ]; w& C2 r f
8-4 实战项目：框架搭建 (11:53)
! M; h* k& F0 o/ b1 R6 j8-5 实战项目：侧边栏结构编写 (08:32)! v3 ?1 R- o3 A$ `1 O" P
8-6 实战项目：侧边栏样式编写 (13:48)3 F/ K1 u, t% E3 b/ m: Z
8-7 实战项目：侧边栏列表交互 (08:48)
. R- v7 T1 S' X7 q0 c8-8 实战项目：侧边栏折叠交互 (09:18)
$ D+ X2 _5 N2 [0 \! s0 F8-9 实战项目：主体头部尾部实现 (11:47): }" z/ a$ O! F8 g+ Z
8-10 实战项目：主体网格布局实现 (17:40)
& O# _, K- l5 V7 c0 X; ~. x) \8-11 实战项目：设置模块主题色实现 (20:57)
- t6 V3 K. j5 D* A% M6 O- W- F0 ^8-12 实战项目：设置模块切换按钮实现 (07:53)
3 E. |) E- t) a' n8-13 实战项目：设置模块主题色交互 (10:57)
3 C4 j. H1 T/ t+ s" B8-14 实战项目：设置模块切换按钮交互 (18:53)
: e; ~, M5 C4 B* i! _% G# v! ]3 c8-15 实战项目：响应式内容及菜单实现 (18:28)
; ]' _2 A* Q2 `. p! m- N8-16 章节总结 (03:07)3 G1 W4 V$ H- q7 d! _" A" Z% y
8-17 练习题
# T' N" `' I8 J1 B! i8-18 测试题! _0 v: X; T3 [2 K4 e' v
7 x2 {7 e; L& z5 c+ M' f
第9章 课程福利加餐6 节 | 76分钟
9 d$ i! G4 B7 K9 w+ T. b9 }9-1 横向瀑布流布局-1 (13:34)
: [" M: w. O+ r9 a9-2 竖向瀑布流布局-2 (19:11)3 c5 h4 w& V }3 ^) U
9-3 视觉差布局原理解析 (13:25)
. m7 }2 f C& v9 }: F9-4 视觉差布局案例实现-1 (16:13)
: G3 v6 M4 w2 C, |0 a& C9-5 视觉差布局案例实现-2 (13:27). G* N, A* T: P; Z( V& G& y
9-6 文字环绕布局
3 n- @% k6 \, U7 ~0 T; T) w8 F2 p( k1 b/ J' j" X0 K9 {
" l& F# M2 @4 ?% r% D
〖下载地址〗0 S# q3 W7 B" @2 X' o$ u
' |1 w5 x* t0 ]( ^/ ]
〖升级为永久会员免金币下载全站资源〗$ ^+ h# C c& J
全站资源高清无密，每天更新，一次充值，永久可查看网站全部资源：http://www.mano100.cn/rjyfk_url-url.html
3 ?& u3 {9 N. k' U8 @: m- f |
|
[复制链接]
