* K3 z$ u3 a/ \
, F' l) s' r0 O& M0 R〖课程介绍〗
# M) |( a. X# W' e实现精美页面是前端工程师的核心能力之一，CSS布局技术是实现精美页面的核心技术，但CSS布局好入门，难精通。本课将围绕前端4大主流布局，通过大量的实际案例，带你边学习，边实操，让你系统掌握CSS布局进阶技术，轻松解决各种精美页面布局难题。; ]! v# w, N6 `- n% R
〖课程目录〗/ k: p+ T5 y9 W% w0 ?
第1章 课程介绍(了解本课程必看) 试看4 节 | 18分钟
( b. a6 E C/ E6 I& Q1-1 课程导学 (09:16)1 v7 V( e0 T4 B' E, J( D: b0 |
1-2 常见布局展示及技术分析 (08:02) o9 i" \' V" N7 r- G& I# B
1-3 软件安装与课件获取方式! F# r4 o# E* V6 D% r" {* ~) c. p* C
1-4 CSS发展史与CSS模块划分4 K& T* |$ m0 [$ t; h6 V
; L0 w# i1 I0 T6 s5 A$ H Y' W第2章 CSS还原UI设计 试看10 节 | 37分钟+ e9 b! x: [- c# ?. P1 X! j
2-1 章节简介 (02:09)8 T' R5 y; X( {
2-2 长度单位与颜色分类* c% T3 |5 Y# `- Q, O/ e
2-3 UI设计图的源文件种类8 x4 h% g, a7 t4 p) {
2-4 Photoshop还原UI设计 (06:59)
) O( Y' x/ M A3 u' L2-5 蓝湖App快速标注信息 (07:51)
1 Q' A4 F$ I$ u% x, M, v$ p! O2-6 PxCook自动标注工具 (08:59)5 z- c Z0 ?, ]1 E6 ^5 h2 t, a$ f
2-7 imgcook设计稿智能平台 (06:41)0 z% T( c* d! u8 @5 I9 Y' F; l
2-8 章节总结 (03:51)
( f! U) M2 n7 t# b( O; K- \- e2-9 【练习题】测试psd中的相关CSS数值
9 S- ^! s9 U, m, Q& l" p6 o/ i2-10 测试题8 M( U; T: p- L
. {. S+ l, e5 {. v! |; [
第3章 布局中的尺寸与位置16 节 | 102分钟
/ H( ^" N$ ~, V! F. ~: K! K3-1 章节介绍 (03:43)
% ^3 s5 a% }4 V* j) [& r4 E3-2 CSS盒模型的组成 (17:32)
& G6 [$ v W$ [" K0 _3 W5 l4 p, U3-3 块级盒子与内联盒子 (11:11)
6 |9 P: r" c$ Y5 h( L3-4 自适应盒模型的特性 (05:43), w# q. J' a: F0 w6 M7 m% r8 j
3-5 标准盒模型与怪异盒模 (11:26)
3 n) H9 N' l5 q6 m( j; |/ g1 H/ Y3-6 浮动样式详解 (18:52)
' f3 ]$ [9 x% e1 S& c0 B3-7 浮动特性注意点 (07:58)
5 M9 s6 _6 P& S- s) _3-8 定位样式详解 (12:44)
|4 g- ^) F3 X' o8 X3-9 定位特性注意点 (08:48)
6 O+ `) G4 u' y/ w3-10 详解display属性7 S3 l& r3 ? N7 b
3-11 书写模式与逻辑属性
" O- w; U5 d6 w" ^# x1 N: r4 J3-12 BFC块级格式化上下文
( G, ~2 L" _, f! y0 x3-13 标签默认样式及清除
/ R$ ?- \! i4 _3-14 章节总结 (03:04)
/ P7 P3 p( S; N* t2 l/ r3-15 【练习题】编写对应CSS代码
9 A4 h. B9 ^6 V P3-16 测试题) H, z$ ]8 l# z- [+ }" e" y! }0 k
% W+ X1 N8 q+ o4 P8 W7 q
第4章 flex弹性布局 试看21 节 | 194分钟/ j3 v% e+ b9 b3 `( D3 [7 k# M# K3 f
4-1 章节介绍 (04:45)( A% X% z+ W3 [# D. U" J' _' G) y; B
4-2 主轴与交叉轴 (07:47)0 ~; S; {% q3 C" a; x, Z+ x
4-3 换行与缩写 (11:18)
4 o" J* X- p9 i" m0 d0 N7 h4-4 主轴对齐详解 (08:26)
$ k6 W5 m6 ?. |! U4-5 交叉轴对齐详解 (12:28)8 ]2 g' M# {+ t8 ^8 {% @
4-6 内联与块的上下左右居中布局 (12:10)
& b$ M' _- J4 W- n* f' g3 a4-7 不定项居中布局 (08:20)
# e+ p7 A, Y3 C! ]% w; w- t" S; I4-8 均分列布局 (09:00)4 m/ O1 b W. a: Q5 t
4-9 子项分组布局 (07:43)
5 z5 r0 e/ b" H& e( D& k% |# }4-10 flex-grow扩展比例 (11:13) [3 X; H0 w; L2 f6 a+ A
4-11 flex-shrink收缩比例 (12:34)
, \# w; A3 Q: A$ q, ~4-12 flex-basis及flex缩写 (14:17)
% V- E, h* H: V, o4-13 等高布局 (07:00)
, P/ i$ w, A+ _$ v; Y4-14 两列与三列布局 (08:29)
& b4 e Q* V, T9 J( }4-15 Sticky Footer布局 (04:30)/ k( p o% W9 W5 O5 E7 W2 G8 X
4-16 溢出项布局 (06:19)
1 g) a# }& ~, {% G4-17 综合案例一(Swiper轮播图) (19:23)
& S- i% p* n+ i. b4-18 综合案例二(知乎导航) (24:59)
- K* \0 A* T- O4-19 章节总结 (02:47)
0 W9 M) w: P7 J1 q7 Q& y4-20 练习题) _, J) C( z+ u2 x# i/ ?1 i% a
4-21 测试题1 [) t6 n$ [; U* x
( S, Q4 K6 D) v' c2 j, L
第5章 grid网格布局17 节 | 158分钟
; N9 @' ^4 r1 D! T/ X# n5-1 章节介绍 (04:36)
' E! k) r* D. l* |5-2 定义网格及fr单位 (08:48)
% b9 ~( w( U4 \7 Y# p7 P: z- e5-3 合并网格及网格命名 (08:57)( i J/ @/ E; [3 V
5-4 网格间隙及简写 (06:13)( | V6 g/ ^1 l3 m; y' K
5-5 网格对齐方式及简写 (08:35)* J, L1 h5 n0 ?
5-6 显式网格与隐式网格 (13:31)
6 X1 d8 v% x: q. \5-7 基于线的元素放置 (16:28)
6 |) L2 U; J0 [- c. ?( {5-8 repeat()与minmax() (12:59)$ x0 D5 T' q9 H+ G8 s8 Y; \& n! |
5-9 比定位更方便的叠加布局 (08:08)
i3 d& {! l1 I( T& g" x5-10 多种组合排列布局 (05:02), C1 ]- I2 Z u8 |" G
5-11 栅格布局 (08:35) z6 b8 @/ T; N q/ q6 \+ a, w
5-12 容器自适应行列布局 (07:11)4 c% I" R4 ^- @" d" O! A
5-13 综合案例一(百度热词风云榜) (22:46)2 e! c* e$ S& W) l B6 g
5-14 综合案例二(小米商品导航菜单) (22:30). c B0 ^0 t0 {- m
5-15 章节总结 (03:16)
, c9 N; h/ T$ q. i6 P& v- R1 I) s5-16 练习题7 }; _' ]3 B4 I9 k+ `' r: j
5-17 测试题4 m; X( B# G7 V. f t$ o5 e9 v) [: w
# M0 M1 Y% g0 |& n( \, n0 ^
第6章 移动端适配布局16 节 | 151分钟# C& h4 f/ c4 o1 R2 H9 |8 `
6-1 章节介绍 (04:00)
* k0 u: _6 K9 I2 N- c( o6-2 移动端概念及UI设计稿尺寸
7 p% O* b3 q! n1 \& |' J+ l% f0 B6 U6-3 移动端rem布局原理解析 (08:00)
2 }& q& F4 M0 S+ @, x, | I* F6-4 动态计算font-size (10:16)
* \8 E3 U; _, c" }8 M0 v6-5 测量rem数值及插件使用 (12:39)/ t: C* p# x8 F! [% a
6-6 rem案例：网易移动端头部实现 (13:56). b# e( }: t0 O4 w
6-7 rem案例：网易移动端导航实现 (17:45)
/ A V7 S+ r4 r/ e/ Q( Q, c6-8 rem案例：网易移动端新闻列表实现(1) (10:35)& E3 _: M+ E. B, l6 R6 ?: M6 H1 \
6-9 rem案例：网易移动端新闻列表实现(2) (15:31)
+ T9 k8 Y5 `- ^: v6-10 移动端vw布局及插件使用 (06:40)
& \: Y; M. {2 U. n8 j/ j9 Q6-11 vw案例：B站移动端头部实现 (14:49)
5 I' g! q7 j# N3 ]; e: J g1 I6-12 vw案例：B站移动端导航实现 (17:43): ?6 `3 E' I3 L8 o
6-13 vw案例：B站移动端视频列表实现 (15:35)2 y/ `* q* M G
6-14 章节总结 (03:26)) d1 t: r, X( I0 D( T o6 V
6-15 【练习题】测量"个人中心"页的css数值
& W$ F; j* ~& V$ f+ F6-16 测试题/ p& a. c# s& W( }
- z9 G9 j: c8 V( R" _8 B
第7章 响应式布局15 节 | 117分钟
- J0 W; L% L" w/ s( K, u- M* X7-1 章节介绍 (04:56)- x b1 F1 H% U1 V" O
7-2 媒体查询语法详解 (12:18)1 F! }5 T! A5 T) l
7-3 媒体查询的编写位置及顺序 (08:52)
3 w+ u- N- p: n7-4 响应断点(阈值)的设定 (07:19)
% d. S* l* Y _/ t( T- Z5 k$ z! h7-5 响应式栅格系统 (11:19)
8 R9 l; d7 `' b* k7-6 响应式交互实现 (08:25)
9 [: m, P; @1 p0 `1 Y7-7 响应式框架bootstrap0 S6 ~ ?- P; N% T6 b
7-8 响应式案例：博客头部实现 (06:21)
# R5 z: c" z7 c1 M' X8 p7-9 响应式案例：博客导航实现 (15:00)# `9 p5 Z, I' _+ S) a8 K
7-10 响应式案例：博客文章列表实现 (15:09)
! ^0 q+ g. B L6 i* Q2 V# {7-11 响应式案例：博客辅助列表实现 (11:50)- q( b, ?$ [2 i3 ?
7-12 响应式案例：博客尾部实现 (11:33)
7 |$ R& P3 I) o3 t& {! ~7-13 章节总结 (03:10)
[' p5 Q) r' L- Q$ T7-14 练习题
' n; o: I4 q* d! G' m7-15 测试题+ e, j9 T1 \8 `! R+ w
, J. e- Z: M/ U, h. ?第8章 综合实战 Ant Design Pro 管理系统18 节 | 165分钟0 J; j8 Q+ P" u
8-1 章节介绍 (02:51), }8 K9 E: I$ I9 \& V
8-2 8-2 CSS文件划分及功能分类& l5 w( |) j; s
8-3 8-3 CSS方法论及样式规范
) j6 }7 p+ Z1 A8-4 实战项目：框架搭建 (11:53)% \: N' |1 b8 B9 n" A
8-5 实战项目：侧边栏结构编写 (08:32)
7 u+ h% j+ w$ T1 y- w; D% r( y$ e8-6 实战项目：侧边栏样式编写 (13:48): g! e' d7 f( H6 ~ C; w1 n8 B* j
8-7 实战项目：侧边栏列表交互 (08:48)3 u" E: L0 t4 L9 r; T9 b
8-8 实战项目：侧边栏折叠交互 (09:18)* E' ` O f1 r" v/ K/ i
8-9 实战项目：主体头部尾部实现 (11:47)
+ j3 f# d, F: {$ ?& ~) \1 M8-10 实战项目：主体网格布局实现 (17:40)
! z* A5 N4 ]& M/ C( m8-11 实战项目：设置模块主题色实现 (20:57)- z r _- _$ n
8-12 实战项目：设置模块切换按钮实现 (07:53)- ~! C4 s6 u9 g+ o
8-13 实战项目：设置模块主题色交互 (10:57)" i+ f& x# T) k
8-14 实战项目：设置模块切换按钮交互 (18:53)9 Y; m! U; W, M( F
8-15 实战项目：响应式内容及菜单实现 (18:28)
; t$ G6 v+ M6 u; b5 I& l8-16 章节总结 (03:07)
6 H" |9 t: v7 y- I9 [$ I8-17 练习题
7 e; I$ h! K6 y* M3 W& a; ~8-18 测试题0 h5 G8 N y$ y( c: @0 M0 T: D; w
" i! D9 d; r5 \& W+ Q, Z: e% f第9章 课程福利加餐6 节 | 76分钟+ {. h5 W q1 U4 _( G# P7 z
9-1 横向瀑布流布局-1 (13:34)
" K# |' ~: C% ]+ { Q2 B9 i7 V$ B9-2 竖向瀑布流布局-2 (19:11)
! w# d+ b, \0 [1 \- C O9-3 视觉差布局原理解析 (13:25)0 j) d* f2 E6 u/ ]
9-4 视觉差布局案例实现-1 (16:13)
1 I( M. {/ ?! k9-5 视觉差布局案例实现-2 (13:27)# |% {1 T9 P% M" X, C$ U& X0 n
9-6 文字环绕布局- N: m8 e! h: H- @; S* p
9 Q4 b( ]# |1 D7 D: C: G$ A- n, ]* \# [) z
〖下载地址〗: T# ~ \' O+ Y# p9 K4 w% p
, I6 y5 m; x8 v2 r
〖升级为永久会员免金币下载全站资源〗
w8 P [. y7 }) {* K% a全站资源高清无密，每天更新，一次充值，永久可查看网站全部资源：http://www.mano100.cn/rjyfk_url-url.html* D- I' d* k+ w8 ]
|
|
[复制链接]
