) k# w. i) l, Z& V- n6 R0 V2 \
) ^0 b8 z" J3 q. i2 H2 S+ e( @
〖课程介绍〗
4 n: g! _3 ~& P) \7 s实现精美页面是前端工程师的核心能力之一，CSS布局技术是实现精美页面的核心技术，但CSS布局好入门，难精通。本课将围绕前端4大主流布局，通过大量的实际案例，带你边学习，边实操，让你系统掌握CSS布局进阶技术，轻松解决各种精美页面布局难题。
& E7 z4 E" e! b+ R/ A: W) M〖课程目录〗
. n, ?2 G. ~& I1 t6 b7 [第1章 课程介绍(了解本课程必看) 试看4 节 | 18分钟
. m' F9 j. ~5 ]; P0 f1-1 课程导学 (09:16)
$ B( ]& N# }$ J0 x0 P u1-2 常见布局展示及技术分析 (08:02)4 C& ]( r1 E& y( j
1-3 软件安装与课件获取方式
" t( W! g0 Y E0 P* s1-4 CSS发展史与CSS模块划分, ?# N3 p+ P" |3 H v- W. J
5 O* C( y1 `* X- z/ E
第2章 CSS还原UI设计 试看10 节 | 37分钟3 L$ a s3 s& z7 E( T' E \
2-1 章节简介 (02:09)
5 g$ C/ ^: t, g/ ]2 y7 S; s. O# ^2-2 长度单位与颜色分类
- ]% c- ]% f3 C8 s$ g2-3 UI设计图的源文件种类7 x( h1 I' f7 @+ a' R
2-4 Photoshop还原UI设计 (06:59)
0 l& i$ }/ I! Y3 }2-5 蓝湖App快速标注信息 (07:51), G U2 Z% C) L5 g* _
2-6 PxCook自动标注工具 (08:59)2 `: P0 e5 e1 T# X7 W8 {; y( D
2-7 imgcook设计稿智能平台 (06:41): L$ Q0 `0 x7 j4 X7 _
2-8 章节总结 (03:51)8 Z4 P7 Z& a- ?3 \
2-9 【练习题】测试psd中的相关CSS数值
7 k6 ~0 t; j; n) _- u1 x2-10 测试题& v. S' {, U+ {( H1 \
1 S& M. r3 Y$ Q! Q第3章 布局中的尺寸与位置16 节 | 102分钟
5 g- x* H5 p8 F, ~; O3-1 章节介绍 (03:43)% A. d0 N# F. b
3-2 CSS盒模型的组成 (17:32)" D: W* W! i6 m! H, V$ d! m
3-3 块级盒子与内联盒子 (11:11)' I$ }% a& D( h0 c
3-4 自适应盒模型的特性 (05:43)
K* K. r p3 X3-5 标准盒模型与怪异盒模 (11:26)- [0 X6 w! S6 y, T
3-6 浮动样式详解 (18:52)
7 s" w6 C; r) P$ f3-7 浮动特性注意点 (07:58), q+ J1 y, B3 h' i' M2 ^
3-8 定位样式详解 (12:44)
2 V4 ?6 ?2 b8 m2 g! H9 y0 x3-9 定位特性注意点 (08:48)
5 n8 c2 a- K' F! r3-10 详解display属性
$ Z; Z3 Y- R: `/ p3-11 书写模式与逻辑属性
, l% r- T+ O; g/ B1 d& w3-12 BFC块级格式化上下文
# S( m! d$ H- g3-13 标签默认样式及清除
' c3 C. Y9 y/ R d3-14 章节总结 (03:04)
! K2 m0 }& _" z/ N( @8 B9 m, Z$ ?) B3-15 【练习题】编写对应CSS代码3 [! m( \0 b6 F! e3 V
3-16 测试题
' d) T0 f9 e- Y2 k$ }$ X8 O
( P, ?# t# ] a第4章 flex弹性布局 试看21 节 | 194分钟
0 ]1 e# P! Z: T7 k4-1 章节介绍 (04:45)
- b! U& B( a% Y* _2 W4-2 主轴与交叉轴 (07:47)
8 j. ]: p- p5 Y9 M/ k8 a4-3 换行与缩写 (11:18)( }- | {# L: M" j
4-4 主轴对齐详解 (08:26)3 n" ` c6 \& d4 X6 ?' [2 O% F
4-5 交叉轴对齐详解 (12:28)0 K/ _ j9 [! i5 X6 {9 e1 V. s
4-6 内联与块的上下左右居中布局 (12:10)
6 f* A1 P0 `: J5 Y4-7 不定项居中布局 (08:20)
/ `/ m/ x7 C- y4 z' [4-8 均分列布局 (09:00)
5 C+ [* X# [ ~/ G( ~9 p# I) Q: m; E4-9 子项分组布局 (07:43)
6 E# q a: y" V2 `2 E; t4-10 flex-grow扩展比例 (11:13)
9 {1 E0 M1 G# \9 b8 u$ w9 A4-11 flex-shrink收缩比例 (12:34)
9 e5 Y# S% O! h" C& j; n4-12 flex-basis及flex缩写 (14:17)( T6 m8 ~+ Q$ D
4-13 等高布局 (07:00)( ?& }$ f, ^) {1 a2 w& d) _
4-14 两列与三列布局 (08:29)% O5 e, P* C3 j. y- l: j+ F
4-15 Sticky Footer布局 (04:30)2 z W0 }1 w( V$ ]8 V
4-16 溢出项布局 (06:19)
$ Y; i" b7 w0 \6 E! Z9 g4-17 综合案例一(Swiper轮播图) (19:23)
1 b1 u' ]+ q( S. g8 @2 r1 r4-18 综合案例二(知乎导航) (24:59)
1 w/ f, T* u( z4-19 章节总结 (02:47)
+ u' S& d5 p+ d! ~% E4 M4-20 练习题- ~7 |7 b! `+ Q
4-21 测试题) Z* T0 H3 t$ n
3 s5 G& U+ X7 u0 H
第5章 grid网格布局17 节 | 158分钟
) a# ?% P# Y! x3 v3 ^5-1 章节介绍 (04:36). B: ~& Z+ X2 Q6 Q
5-2 定义网格及fr单位 (08:48)
: \9 ?6 i+ y* C Y% f" m5-3 合并网格及网格命名 (08:57)2 Y x0 O! n, y
5-4 网格间隙及简写 (06:13)& r3 y8 e$ O }. q5 `
5-5 网格对齐方式及简写 (08:35)& I- C# y; u! L" t
5-6 显式网格与隐式网格 (13:31)3 q8 w- u" J5 h
5-7 基于线的元素放置 (16:28)2 \; t W0 v# o! l- K6 n9 h
5-8 repeat()与minmax() (12:59)3 s V" y: \) ~ Q) Y7 E
5-9 比定位更方便的叠加布局 (08:08)
# y8 r7 M7 l5 E4 R3 z0 C1 L% M: M5-10 多种组合排列布局 (05:02)# \ ^4 \, X3 W* D! S
5-11 栅格布局 (08:35)
# N5 [3 G9 Q" b7 [& I5-12 容器自适应行列布局 (07:11)
3 ?8 W- Q) W" ~$ R/ }$ F& @5-13 综合案例一(百度热词风云榜) (22:46)4 \ ?; p4 S5 h5 s& Y: I- Y2 Y% D! U* g
5-14 综合案例二(小米商品导航菜单) (22:30)4 L1 v9 p' ^$ E
5-15 章节总结 (03:16)& K- H( R k! o0 q
5-16 练习题2 X9 U, g4 m$ C3 C1 s
5-17 测试题
6 _6 o. n1 f- k2 k) e/ D& B+ W
! @6 v; n. s; x, w第6章 移动端适配布局16 节 | 151分钟
: G* Q) L# a5 R, {6-1 章节介绍 (04:00)
9 M8 m5 X7 j. D6-2 移动端概念及UI设计稿尺寸7 F. |. P S! j5 J4 x- J$ {% s" s
6-3 移动端rem布局原理解析 (08:00)
k a; T" j- ]% E0 Y6-4 动态计算font-size (10:16)8 c2 N2 I8 b- Q. j- P7 A
6-5 测量rem数值及插件使用 (12:39), p7 G3 K+ ^4 P: S. j! `! u( a: i
6-6 rem案例：网易移动端头部实现 (13:56)
5 R# K `& _0 \0 C6-7 rem案例：网易移动端导航实现 (17:45)7 G; Z; R3 a0 r3 ~: Z
6-8 rem案例：网易移动端新闻列表实现(1) (10:35)& B7 h% G+ p T$ x
6-9 rem案例：网易移动端新闻列表实现(2) (15:31); \: K! z4 N+ Z0 s* j
6-10 移动端vw布局及插件使用 (06:40)
+ @, v1 i$ `( l% `6 M6-11 vw案例：B站移动端头部实现 (14:49)
9 z* t) G, j& x, ~1 T7 x+ |6-12 vw案例：B站移动端导航实现 (17:43)9 f" E& O( N0 @$ T5 J7 _- H1 T
6-13 vw案例：B站移动端视频列表实现 (15:35)+ d \& I) r$ w1 y* a+ G
6-14 章节总结 (03:26)
; c) K% e c: p' ]- X# T9 t( n6-15 【练习题】测量"个人中心"页的css数值. o7 Z* f& C. B. W- n
6-16 测试题
q* @# P0 |6 Y$ n) ?) V& D% C
' m4 p, u6 ]- d' [# v& @' o第7章 响应式布局15 节 | 117分钟: z `+ f i3 h
7-1 章节介绍 (04:56)
# g$ `7 _1 C- i2 t' }( |9 y4 U7-2 媒体查询语法详解 (12:18)0 u/ I* e* o, [0 j1 ?6 z) U1 x$ z) R9 f9 Y
7-3 媒体查询的编写位置及顺序 (08:52)
8 B2 W. @3 |; s3 e% s# c" V- O0 N7-4 响应断点(阈值)的设定 (07:19)" R0 P3 }, y2 q! y' q1 P
7-5 响应式栅格系统 (11:19)% p1 p0 J2 S" ~0 w; F) b+ O( l
7-6 响应式交互实现 (08:25)2 p- ]8 q* [( c
7-7 响应式框架bootstrap; j) q0 o) q6 M& t Z8 Y6 W0 J
7-8 响应式案例：博客头部实现 (06:21)
e2 a P, [% T" {7-9 响应式案例：博客导航实现 (15:00)
: u3 C- _0 C+ h y" R7 s! R, N7-10 响应式案例：博客文章列表实现 (15:09)
! ^) {% K6 {+ c7-11 响应式案例：博客辅助列表实现 (11:50)5 s# z8 t" r' Q1 V' R
7-12 响应式案例：博客尾部实现 (11:33)
b4 k# u& ]. [1 q* {- ~9 y7 u5 J7-13 章节总结 (03:10)3 m; K0 O8 _9 M& e/ A* N1 I* Q
7-14 练习题
4 X. j0 M. r6 e% s/ C1 J7-15 测试题+ k. T& ~, L& s4 u( q) O6 L
; [2 O2 s- X4 d% Z+ o9 j第8章 综合实战 Ant Design Pro 管理系统18 节 | 165分钟& V7 A, F* x% Z
8-1 章节介绍 (02:51): H" r& W$ K2 g9 f [( J* s
8-2 8-2 CSS文件划分及功能分类
, I2 B3 P5 P9 i: K: l8 Y8-3 8-3 CSS方法论及样式规范
( k* A: X" Q: ]5 K6 |& @8-4 实战项目：框架搭建 (11:53)
' V5 Z4 E0 b9 {! R8-5 实战项目：侧边栏结构编写 (08:32)+ O& S1 S6 A! Y9 J' g: T
8-6 实战项目：侧边栏样式编写 (13:48)
0 ~' ^6 ?, Q c* f8-7 实战项目：侧边栏列表交互 (08:48)# I0 _) |) Y# }6 X" p
8-8 实战项目：侧边栏折叠交互 (09:18)
, \, V4 V# }. p6 [8-9 实战项目：主体头部尾部实现 (11:47)( X9 j. @- f1 E; i- W5 q
8-10 实战项目：主体网格布局实现 (17:40)
) A# Z0 P+ d# J8-11 实战项目：设置模块主题色实现 (20:57)0 C t4 c) M% K1 w
8-12 实战项目：设置模块切换按钮实现 (07:53)
0 \. c) F7 D' u( X, v8-13 实战项目：设置模块主题色交互 (10:57)3 @( v* E: M+ U: ]& k$ g
8-14 实战项目：设置模块切换按钮交互 (18:53) L0 M% u& a+ c, ^
8-15 实战项目：响应式内容及菜单实现 (18:28)' d- |0 W- f: n! j8 h0 Z+ L1 @
8-16 章节总结 (03:07)
) L: s2 d7 s: T+ l- f+ B" g K8-17 练习题' i: Z" S1 @, z6 N
8-18 测试题9 S7 `3 j) P" `* m" L/ f$ J
9 M& c- |1 Y7 Z( G' ?2 Y @
第9章 课程福利加餐6 节 | 76分钟7 I" r+ l. `0 Z( ^/ B
9-1 横向瀑布流布局-1 (13:34)
1 U X# b5 ?5 [* [# ?+ k7 ?! t) {; r9-2 竖向瀑布流布局-2 (19:11)
% Z7 g( t+ N0 L5 e9 b9-3 视觉差布局原理解析 (13:25)+ E* u& {! O( T5 t' N5 j6 y
9-4 视觉差布局案例实现-1 (16:13)
& x* f! t# @( d5 ~6 N3 `/ \9 r3 l9-5 视觉差布局案例实现-2 (13:27)4 H6 T% K! o! p+ v- _
9-6 文字环绕布局
E# N$ Y$ {$ O" c! J8 Q: c7 C# O, Q# R1 }# J
8 ~- h0 Q7 T. G% ]〖下载地址〗: E$ k" @% f2 \) }$ p4 l: E1 V( X8 d
, Z ], O$ ?- c3 Y. b$ D
〖升级为永久会员免金币下载全站资源〗
0 y- X, H f5 V; _; O$ M* Y全站资源高清无密，每天更新，一次充值，永久可查看网站全部资源：http://www.mano100.cn/rjyfk_url-url.html7 G2 C2 z! p: x
|
|
[复制链接]
