7 U' R% q( e. Q) c" M" F' c% w8 @
! y5 A3 V ?+ N; ]) c M1 [〖课程介绍〗) f- _ i' {: m; h/ U9 D* l6 x
实现精美页面是前端工程师的核心能力之一，CSS布局技术是实现精美页面的核心技术，但CSS布局好入门，难精通。本课将围绕前端4大主流布局，通过大量的实际案例，带你边学习，边实操，让你系统掌握CSS布局进阶技术，轻松解决各种精美页面布局难题。
1 w) R$ x/ {, `4 F, }〖课程目录〗/ S7 z1 }1 ?) { a4 K) |5 `$ r0 v
第1章 课程介绍(了解本课程必看) 试看4 节 | 18分钟
& d* b1 x+ t; F5 N& m8 K1-1 课程导学 (09:16)
8 ]/ p+ v* Z1 i1-2 常见布局展示及技术分析 (08:02)( ]) b; c+ p/ c$ N. r$ `- A3 X
1-3 软件安装与课件获取方式& J" a% Q1 ?, y |+ V- O L
1-4 CSS发展史与CSS模块划分# Z0 g, |4 C0 q+ {
+ Y, ]" v' Y. a+ q, @9 S
第2章 CSS还原UI设计 试看10 节 | 37分钟( o5 Y. m" S0 |- ]# a1 }* d# z N
2-1 章节简介 (02:09)
; K. i! \# a, q2-2 长度单位与颜色分类
, G7 ~9 f$ U) o. S, c( k! |. O2-3 UI设计图的源文件种类 I6 C% T/ B O; Y0 {' n
2-4 Photoshop还原UI设计 (06:59)2 u3 w! H7 K9 F c$ n7 w
2-5 蓝湖App快速标注信息 (07:51)' M6 f4 [6 E: v! C
2-6 PxCook自动标注工具 (08:59)$ j1 w" R1 W$ g6 n) R& u. I
2-7 imgcook设计稿智能平台 (06:41)6 O! L3 P# w: a l' C% V; G
2-8 章节总结 (03:51) g1 E, J7 ]: d- {4 V; S. V8 b
2-9 【练习题】测试psd中的相关CSS数值
X- @' N! g/ b2 g6 d/ z8 D2-10 测试题" `8 v2 D% T' [" f
& I. J% [1 j) A0 h5 s! \, r' V第3章 布局中的尺寸与位置16 节 | 102分钟0 U, i8 w/ U3 U& |4 A
3-1 章节介绍 (03:43)6 r" |/ K0 G4 b' f5 k: i7 x& G
3-2 CSS盒模型的组成 (17:32)( ]" W4 l9 K" X1 m% |" T) r& Z
3-3 块级盒子与内联盒子 (11:11)& f0 {1 W+ \0 z& T( I7 J
3-4 自适应盒模型的特性 (05:43)$ b& h& m' w& q
3-5 标准盒模型与怪异盒模 (11:26)) k- `- j! M _% A) l# H
3-6 浮动样式详解 (18:52)1 @5 [1 f: i) H" f1 ~
3-7 浮动特性注意点 (07:58)
[1 p+ P5 r, O( }3 g4 V3-8 定位样式详解 (12:44)4 S; w! ]. t h$ \7 Q( x
3-9 定位特性注意点 (08:48)
' M( z# v, z5 n6 x; b) [6 d3-10 详解display属性
/ M3 R+ j7 ]+ B( r( J3-11 书写模式与逻辑属性' k% ?7 Q+ K9 R' z+ o
3-12 BFC块级格式化上下文" `4 i' f$ I$ V
3-13 标签默认样式及清除
5 h1 v, k& s% i& _& q/ W3-14 章节总结 (03:04)
' v& a7 j6 k; }: e `3 E3-15 【练习题】编写对应CSS代码
3 I( e. m7 ^$ ~: g6 W) G5 d3-16 测试题
! ~6 A4 f" d5 D4 x
! X8 ]9 s3 f7 H; f; p$ o第4章 flex弹性布局 试看21 节 | 194分钟1 w8 P5 c! j( [% I$ |5 S
4-1 章节介绍 (04:45). Q2 Q# q- j% f
4-2 主轴与交叉轴 (07:47)
, Y) M) K4 t+ k% ^' O4-3 换行与缩写 (11:18). b& o0 Y! j1 t( G& H
4-4 主轴对齐详解 (08:26)
1 Y; ?( n$ G; n; v* @4-5 交叉轴对齐详解 (12:28)1 ]5 G0 k5 n J: ^; w# A6 B
4-6 内联与块的上下左右居中布局 (12:10), F1 b2 \2 F5 F- X) J$ s0 p. \$ ~ {
4-7 不定项居中布局 (08:20)
, `9 |% W, W, p2 b7 N& |% C4-8 均分列布局 (09:00)
$ S7 p* ^ f% H# d% C$ \$ \4-9 子项分组布局 (07:43)9 Y9 v: ]; C1 c$ {8 y7 A
4-10 flex-grow扩展比例 (11:13)
: H+ O3 [0 U$ i4-11 flex-shrink收缩比例 (12:34)
) n/ d6 \# h, L. O4-12 flex-basis及flex缩写 (14:17) m+ J" t2 p7 s& U
4-13 等高布局 (07:00)
5 V; f4 Q9 M. y9 z4-14 两列与三列布局 (08:29)2 A. l* s8 J2 D8 @, M
4-15 Sticky Footer布局 (04:30); u2 W, ^& N# N2 Z! T( T
4-16 溢出项布局 (06:19)
) B5 x F1 a$ N% W7 z4-17 综合案例一(Swiper轮播图) (19:23)
$ w" B6 `: W7 q5 F" y4-18 综合案例二(知乎导航) (24:59)
3 D% H: T4 r1 ]; z4-19 章节总结 (02:47)
& T: d; |( L9 p+ Y7 r/ E4-20 练习题% m8 V8 G& S) l T6 n" u4 p( @
4-21 测试题, ~ L3 p6 I, N6 T# p; ?+ g$ p1 M# P
5 f0 o7 M5 c( a# J, G" L, c
第5章 grid网格布局17 节 | 158分钟" L! c/ |9 \1 K$ T7 V' L2 ?
5-1 章节介绍 (04:36)/ ^) u# X) H3 J9 Z) X6 N* X
5-2 定义网格及fr单位 (08:48)
0 ^- S& `$ G8 `8 z5-3 合并网格及网格命名 (08:57)
4 y7 Q" j7 p ^& X; ]7 k& c5-4 网格间隙及简写 (06:13)
5 e5 V7 u( L& l8 b+ T! D# |1 Z5-5 网格对齐方式及简写 (08:35)
2 v' a3 y* ]* p! @# X* H5 y [5-6 显式网格与隐式网格 (13:31)
2 ~/ i2 I2 ^) R; ^3 H" ?2 H7 |5-7 基于线的元素放置 (16:28)4 W3 p! l( `/ d0 a
5-8 repeat()与minmax() (12:59): w5 E( H' F0 S( ?; { ^3 V
5-9 比定位更方便的叠加布局 (08:08)
+ |7 T' O! I; X' v1 W6 u; D5-10 多种组合排列布局 (05:02)
# }7 p& a+ Q' }' j6 N9 |% V5-11 栅格布局 (08:35)1 N4 k4 O. K+ w; G
5-12 容器自适应行列布局 (07:11)
* |: z8 \4 p: K$ H: J( I4 H3 E7 Q% t5-13 综合案例一(百度热词风云榜) (22:46)
* {' l9 x+ i. B7 i+ }! {2 j5-14 综合案例二(小米商品导航菜单) (22:30)9 _, N' y: s8 m4 q$ C
5-15 章节总结 (03:16)$ p" L' U6 x3 ^+ v. ]/ B3 z
5-16 练习题% K k' Y' N- R0 B2 n. Y6 t: d
5-17 测试题
/ i6 T, W p4 l- E' i& ]4 l2 q# @# h8 I s
第6章 移动端适配布局16 节 | 151分钟
( ~( \" b' ]2 [7 L6-1 章节介绍 (04:00)* H$ T. S9 M& m) R
6-2 移动端概念及UI设计稿尺寸
2 z% `1 `- K1 r- M( \7 @# }6-3 移动端rem布局原理解析 (08:00)+ G1 j/ m) `* y* G& l1 b
6-4 动态计算font-size (10:16)
4 c8 I m$ L1 r6-5 测量rem数值及插件使用 (12:39)
1 `6 h, Z$ ]8 s6-6 rem案例：网易移动端头部实现 (13:56)
. m) t2 y- g0 R+ d! J- c% B6-7 rem案例：网易移动端导航实现 (17:45)
! f/ R: D4 q Q% p6-8 rem案例：网易移动端新闻列表实现(1) (10:35)
* b6 U# M4 ~3 i0 s0 [7 }6-9 rem案例：网易移动端新闻列表实现(2) (15:31)4 k" z- S+ s+ t" W
6-10 移动端vw布局及插件使用 (06:40), F% S2 W9 L/ M J- Z& ^% k% u
6-11 vw案例：B站移动端头部实现 (14:49)& i6 L j' G! C h
6-12 vw案例：B站移动端导航实现 (17:43)3 c' K: ]/ U1 l' w5 x: j
6-13 vw案例：B站移动端视频列表实现 (15:35)3 T. ?+ U! {/ _
6-14 章节总结 (03:26)/ C, ]+ D! D5 E! N9 l6 {! |; p
6-15 【练习题】测量"个人中心"页的css数值
: [) m/ d, F6 x' I6-16 测试题
! J G. `1 l. l. W- ?" G" Z+ [2 H- O1 `- o& k/ R9 U1 c
第7章 响应式布局15 节 | 117分钟9 m3 v8 O6 Q: T) n
7-1 章节介绍 (04:56)- ?9 w& |2 w9 ]( F+ I0 ?
7-2 媒体查询语法详解 (12:18)
! R" R* l8 H/ R: X7-3 媒体查询的编写位置及顺序 (08:52)
/ C; F ^2 T9 i6 m! i6 ?" U/ B7-4 响应断点(阈值)的设定 (07:19)9 f( q& M: c, z
7-5 响应式栅格系统 (11:19)$ D3 X7 W; e5 f' r* h
7-6 响应式交互实现 (08:25)5 u2 g' K ?% `* {4 ^
7-7 响应式框架bootstrap0 C1 e( u& @9 H1 z6 [( K: P
7-8 响应式案例：博客头部实现 (06:21)- S `0 `7 Y5 t0 U+ ^& C% _
7-9 响应式案例：博客导航实现 (15:00)
* V2 p& E5 C9 U8 D5 h7-10 响应式案例：博客文章列表实现 (15:09)
- c4 C% C8 [5 z$ v$ z% e7-11 响应式案例：博客辅助列表实现 (11:50)
9 o3 p- J1 H3 e; }" u7-12 响应式案例：博客尾部实现 (11:33)9 Z9 H8 w# z |# F+ x8 ~0 C
7-13 章节总结 (03:10)# v5 F9 Y- \8 ~* }
7-14 练习题
) K5 G q! {/ |' ~& A7-15 测试题
, H/ E2 U, O, R7 Z9 j6 U$ m% X! u$ r
% v" p+ `* M6 p第8章 综合实战 Ant Design Pro 管理系统18 节 | 165分钟) s1 v( w4 ~- Q: @1 Y" F
8-1 章节介绍 (02:51)9 ]) n8 x3 C* R, d9 [
8-2 8-2 CSS文件划分及功能分类: P/ V" b4 C' G, C5 ^
8-3 8-3 CSS方法论及样式规范3 U+ n+ X' g& z
8-4 实战项目：框架搭建 (11:53)
" J. c3 d; s4 P: Y/ s$ t4 t" }8-5 实战项目：侧边栏结构编写 (08:32)7 s8 l% j: I$ J5 F, e7 e
8-6 实战项目：侧边栏样式编写 (13:48)
8 B, e1 x2 X& J4 L$ r- s# W$ l8-7 实战项目：侧边栏列表交互 (08:48)6 x" m" s" d* Z( {$ R
8-8 实战项目：侧边栏折叠交互 (09:18)5 c$ l' r1 k) m) x! N. v; Q/ I
8-9 实战项目：主体头部尾部实现 (11:47)
" J% c! r" O# X! K# ?) F; f+ X8-10 实战项目：主体网格布局实现 (17:40)( C* v4 J8 w) Q' E3 _2 B( d) c( h; F
8-11 实战项目：设置模块主题色实现 (20:57)
9 A5 E$ r7 d# W% W6 I. i8-12 实战项目：设置模块切换按钮实现 (07:53)+ j( p. s+ J9 l. b1 s: }
8-13 实战项目：设置模块主题色交互 (10:57)' R( v5 ` N# p4 Q* j
8-14 实战项目：设置模块切换按钮交互 (18:53)1 W) ]- _- Y" _& p
8-15 实战项目：响应式内容及菜单实现 (18:28)
' e% ~) q2 c0 O7 J5 @8-16 章节总结 (03:07)! e) ~2 D# S5 X2 K
8-17 练习题9 d x9 F0 o M% r) W$ J6 _& ?
8-18 测试题
2 ~ i4 ]1 `7 `% D$ X$ u# s4 \: ]4 U- R+ D, ]( U
第9章 课程福利加餐6 节 | 76分钟
/ C& |2 S6 t* p* `3 r! X6 X- y0 H, D9-1 横向瀑布流布局-1 (13:34)
+ ]4 o: n1 ?* h; ] P- {9-2 竖向瀑布流布局-2 (19:11)2 f9 s: O) @2 l
9-3 视觉差布局原理解析 (13:25)6 {/ B+ o3 Z1 t) ^: H- }
9-4 视觉差布局案例实现-1 (16:13)8 l; U- F1 C: F
9-5 视觉差布局案例实现-2 (13:27)
- Q+ l+ o% Q$ x0 k9 |9-6 文字环绕布局; `$ I. G- c% b2 M: ^( f" `+ J
* o& L6 e u. Q( Z8 V
2 D2 L* f! E- N. B9 V- K〖下载地址〗
3 |$ M+ h, E L3 B/ M1 V! I* M5 p( l+ O3 ?, u
〖升级为永久会员免金币下载全站资源〗
5 T3 @6 O( D% Y9 y, k全站资源高清无密，每天更新，一次充值，永久可查看网站全部资源：http://www.mano100.cn/rjyfk_url-url.html
$ e+ N/ M3 U: M/ x |
|
[复制链接]
