( \- s0 w6 W! m2 [8 h7 Q; E
) R: Y' B, H4 r- N: { q. n N/ e2 N1 f% W〖课程介绍〗
6 j' m1 v! h- W实现精美页面是前端工程师的核心能力之一，CSS布局技术是实现精美页面的核心技术，但CSS布局好入门，难精通。本课将围绕前端4大主流布局，通过大量的实际案例，带你边学习，边实操，让你系统掌握CSS布局进阶技术，轻松解决各种精美页面布局难题。5 i" \* n# R5 V: f8 n3 G
〖课程目录〗! y6 ~; ^) O) M% \7 f8 l
第1章 课程介绍(了解本课程必看) 试看4 节 | 18分钟7 @. r2 ]: h) G" O
1-1 课程导学 (09:16)& I$ H2 ~" v: K3 O% v+ R! ]" R' e2 H
1-2 常见布局展示及技术分析 (08:02)
* g N( _4 j9 d' U7 P. w' E1-3 软件安装与课件获取方式
1 v ~! N2 P' t- n; m# ~6 h1-4 CSS发展史与CSS模块划分, o" Q4 u! Z# Y+ B% k$ \& X
4 y+ U" Y% {, z# a3 z第2章 CSS还原UI设计 试看10 节 | 37分钟* T7 k6 M! N) L# {' u8 a% k
2-1 章节简介 (02:09). z( D+ \* h' y0 R
2-2 长度单位与颜色分类
6 I! N0 ^3 y& Z! N2-3 UI设计图的源文件种类& K, L$ g6 {* M
2-4 Photoshop还原UI设计 (06:59)
H7 e k B+ m2-5 蓝湖App快速标注信息 (07:51)$ ~- V/ G8 c, H* z3 q. I- e
2-6 PxCook自动标注工具 (08:59)' v* J" b3 s% W/ B) ~9 _
2-7 imgcook设计稿智能平台 (06:41)
. l* ]. d9 y- Y% |6 A2-8 章节总结 (03:51)
0 J9 A. F- y3 ~9 p9 y2-9 【练习题】测试psd中的相关CSS数值6 H' i* p- v8 Z0 O
2-10 测试题
" | K" g$ s4 d2 u2 I; o1 [, P& x9 W. K; O& f: Q
第3章 布局中的尺寸与位置16 节 | 102分钟
0 i7 N# h2 ]% F& k8 H3-1 章节介绍 (03:43)6 E. m h2 q+ f! R& \- n3 {
3-2 CSS盒模型的组成 (17:32)4 J- g& L7 U7 k& g( K2 t' K
3-3 块级盒子与内联盒子 (11:11)
' k8 \4 w- U8 M$ q( F! f3-4 自适应盒模型的特性 (05:43)9 `; C# z0 i1 } [: J0 Q4 {
3-5 标准盒模型与怪异盒模 (11:26)
d5 p1 i$ e9 v2 f. l/ I3-6 浮动样式详解 (18:52). n- t" a A% r9 }( |
3-7 浮动特性注意点 (07:58)
& o/ H, L3 H g; _3-8 定位样式详解 (12:44)
! {# W+ Z5 J' v* D1 _: D5 u3-9 定位特性注意点 (08:48), g/ U+ o0 Q& C" M- G# _4 r$ ^) X
3-10 详解display属性
. [; E" `/ b9 s' D9 K+ U. C3-11 书写模式与逻辑属性
: g5 Q9 i w3 i- g5 d n8 {3-12 BFC块级格式化上下文' Q: x9 m& i+ r: t
3-13 标签默认样式及清除
) v# k7 \. x8 ?: z I3-14 章节总结 (03:04)4 Q2 T- H& v0 ]* B6 d
3-15 【练习题】编写对应CSS代码
' k9 o* U% `/ b2 `4 N3-16 测试题 J8 ?2 r. t/ l h3 y, c
* d7 ~/ L1 [) q8 N, D0 s$ Q
第4章 flex弹性布局 试看21 节 | 194分钟0 ]0 c7 @& o8 ~* L
4-1 章节介绍 (04:45)
( {* Y. }# k) j @* v4-2 主轴与交叉轴 (07:47)
, \4 ?3 r d% j4-3 换行与缩写 (11:18)& w/ N4 N, Q1 d1 I2 C
4-4 主轴对齐详解 (08:26)3 n7 S- _4 \% y4 [8 [5 w- G
4-5 交叉轴对齐详解 (12:28)
( R5 L) n7 P* n8 m2 F4-6 内联与块的上下左右居中布局 (12:10) z; p8 m: }1 S" T' X; H
4-7 不定项居中布局 (08:20); z6 B6 k$ H H7 w9 X/ k8 z
4-8 均分列布局 (09:00)
/ |; ?+ e# s5 c7 ^0 z k" i4-9 子项分组布局 (07:43)+ O2 p3 M% d! I/ e9 S! C
4-10 flex-grow扩展比例 (11:13)
6 p0 R5 c6 @: C8 {" `+ i3 c- x/ f4-11 flex-shrink收缩比例 (12:34)4 ]5 Z3 _5 ~# K9 D% W. L
4-12 flex-basis及flex缩写 (14:17)
& {5 p) w- A0 O* q1 _$ `4-13 等高布局 (07:00)
& Q( T; j! F* R d3 f4-14 两列与三列布局 (08:29)
2 f% p+ z; K( p2 H6 T/ B4-15 Sticky Footer布局 (04:30)# B4 ~' l& ]/ Z" T$ A( c" Q! J
4-16 溢出项布局 (06:19)
$ R. b& j! b4 v' K/ ~4-17 综合案例一(Swiper轮播图) (19:23)( _2 E" E( {+ y4 p8 ?
4-18 综合案例二(知乎导航) (24:59)
; n8 J w" n" M2 ~. x' ~, s4-19 章节总结 (02:47)
8 a+ d/ J# i2 ^! m% M: k& l/ P4-20 练习题% R6 ^+ d3 O4 ~/ t+ l- V! D
4-21 测试题
" I6 {# d3 V3 S7 x! H; z) L: e0 G! x5 u" j" W4 X
第5章 grid网格布局17 节 | 158分钟
9 `* K# T6 B; v* ]) K5-1 章节介绍 (04:36)
- k% p$ b& t, ?' U. ~5 L5-2 定义网格及fr单位 (08:48)7 ~# Y. e4 h8 X! V/ M. I
5-3 合并网格及网格命名 (08:57)6 B( I$ y5 U0 G1 c
5-4 网格间隙及简写 (06:13)* K: H: \0 W. b5 T# L
5-5 网格对齐方式及简写 (08:35)
0 v% _2 T7 i- I5 m6 G/ h" M& X5-6 显式网格与隐式网格 (13:31)$ ?3 Q. k$ `% \
5-7 基于线的元素放置 (16:28)
" e( b3 ^2 A. i3 ~5-8 repeat()与minmax() (12:59)7 B, V( U: a) O/ ?* c% ]
5-9 比定位更方便的叠加布局 (08:08)
7 H N! H# f2 G8 C& b5-10 多种组合排列布局 (05:02)- k) {' A r' {: \
5-11 栅格布局 (08:35)( h) q y: l, {' ?1 w( o$ a
5-12 容器自适应行列布局 (07:11)3 h2 l) m" j" z6 ?( n7 }! B% d6 h8 L
5-13 综合案例一(百度热词风云榜) (22:46)& Z( q* |* H8 a& N0 v
5-14 综合案例二(小米商品导航菜单) (22:30)
1 Z. ^1 X T) r) u5-15 章节总结 (03:16)
5 {$ |. d9 c& L) j- b- E" G# B5-16 练习题
) a" Q* Q( ? n6 f5-17 测试题
, W! w8 q% U K$ P
1 Y: }( S, V+ Z1 k; J5 C" N1 ^3 l第6章 移动端适配布局16 节 | 151分钟: V' E* j/ V2 h: I& N& f0 s6 ~
6-1 章节介绍 (04:00)
c, {, i, {3 I6 d6-2 移动端概念及UI设计稿尺寸
1 ]- }5 N0 `& k c6-3 移动端rem布局原理解析 (08:00)
N0 I. ^( U$ N& B4 y9 f* V9 U6-4 动态计算font-size (10:16)- A& ]. X6 ?4 \; F2 z: \% ]) p
6-5 测量rem数值及插件使用 (12:39) Z, N4 b; c: b
6-6 rem案例：网易移动端头部实现 (13:56)% Y+ u8 y: c( L
6-7 rem案例：网易移动端导航实现 (17:45)
' ?3 D( ] v" c& N6-8 rem案例：网易移动端新闻列表实现(1) (10:35)6 B3 P/ {4 `5 Y z
6-9 rem案例：网易移动端新闻列表实现(2) (15:31)4 X2 T" [! U8 Y; R9 f
6-10 移动端vw布局及插件使用 (06:40)# n% w/ z6 \# i/ W8 ]
6-11 vw案例：B站移动端头部实现 (14:49)
' y% g' a0 V, v9 S6 M3 I! {) u6-12 vw案例：B站移动端导航实现 (17:43)
* Y3 y& n' k1 p E; b# j! K: `6-13 vw案例：B站移动端视频列表实现 (15:35)2 o& z; |( Z2 t5 a2 q @5 a+ r
6-14 章节总结 (03:26)
- K, }& e+ ^6 G# x4 ~7 u4 j6-15 【练习题】测量"个人中心"页的css数值 `7 o t0 Q3 x9 l. b+ g
6-16 测试题
% ?' n$ v: Q) d" \! z( k) [3 l* W( C1 F! E
第7章 响应式布局15 节 | 117分钟
% }' T6 d& @: m$ Y7-1 章节介绍 (04:56)
, y4 a/ y0 u) z: B7-2 媒体查询语法详解 (12:18)1 _1 U/ |3 o4 J+ M S
7-3 媒体查询的编写位置及顺序 (08:52)
- S v# e7 |. t# [* V7-4 响应断点(阈值)的设定 (07:19)9 C! d5 u# E. s
7-5 响应式栅格系统 (11:19)8 E+ u- ~7 Q. s5 ~% \ E2 G/ Z
7-6 响应式交互实现 (08:25) l7 o# o) O- ?+ X3 Q7 i
7-7 响应式框架bootstrap
8 n6 ^8 }/ c2 g! a4 ]' P! L% V1 c( S7-8 响应式案例：博客头部实现 (06:21)4 ]9 c5 O8 n7 h" L7 A4 R4 S: [) [
7-9 响应式案例：博客导航实现 (15:00)0 ~' j9 ^' W7 h; K. K
7-10 响应式案例：博客文章列表实现 (15:09)2 t$ V& F0 Y; I% R$ M! C
7-11 响应式案例：博客辅助列表实现 (11:50)/ m( m3 c" l" \, _8 `4 S
7-12 响应式案例：博客尾部实现 (11:33)/ A; U+ @* Q; U# C
7-13 章节总结 (03:10)/ I4 N% F' a e4 M
7-14 练习题1 ]5 m6 U1 j0 o" U" O5 z
7-15 测试题# v2 U* F- u3 Z2 F) p
9 c; }. C! T! j) n4 Z第8章 综合实战 Ant Design Pro 管理系统18 节 | 165分钟3 C/ U8 O% Z7 R# _
8-1 章节介绍 (02:51)8 Q( \9 p% [8 V" R1 v
8-2 8-2 CSS文件划分及功能分类9 {9 I( j" I5 a/ P5 K1 E
8-3 8-3 CSS方法论及样式规范9 Y' U$ }- g# n6 D: z p
8-4 实战项目：框架搭建 (11:53)
m s' |/ U/ G& x8-5 实战项目：侧边栏结构编写 (08:32)( \0 d! A; n4 v, o; _
8-6 实战项目：侧边栏样式编写 (13:48)
" A3 r- w" W% R# g9 Y/ g8-7 实战项目：侧边栏列表交互 (08:48)4 L: Q6 Y+ n9 i" C
8-8 实战项目：侧边栏折叠交互 (09:18)% L" ?8 o2 e4 q( m8 q; o
8-9 实战项目：主体头部尾部实现 (11:47)
; q/ ~6 H6 G. ]7 g/ ^0 `, Q8-10 实战项目：主体网格布局实现 (17:40)
# @8 @: i6 X$ H8-11 实战项目：设置模块主题色实现 (20:57)
0 F6 ~' [+ T2 v5 d* D8-12 实战项目：设置模块切换按钮实现 (07:53)7 K# G: }9 ]& P' _
8-13 实战项目：设置模块主题色交互 (10:57)- B! k( o5 b. @0 {; r, q) |
8-14 实战项目：设置模块切换按钮交互 (18:53)8 G: Z! Q7 I, ?, p
8-15 实战项目：响应式内容及菜单实现 (18:28)7 w7 o1 l3 y4 J& x% b2 }
8-16 章节总结 (03:07)
4 ?. a/ `& J/ K7 F7 k# X0 g8-17 练习题0 l8 k! d3 W1 @7 G4 m- T9 t0 ^
8-18 测试题+ Q+ x) w3 p( X$ R0 M( y
4 }" A# d; G7 m9 z3 G- B; _
第9章 课程福利加餐6 节 | 76分钟
( J" {, a5 x0 p1 i9-1 横向瀑布流布局-1 (13:34)
4 Z: P4 b. I" D9-2 竖向瀑布流布局-2 (19:11)
4 G; r" G z; }5 f. |/ \! R% n9-3 视觉差布局原理解析 (13:25)9 q7 N [4 u8 @. K" h9 `6 M, l
9-4 视觉差布局案例实现-1 (16:13)
# j! O% P% T: T/ u' F& a- F9-5 视觉差布局案例实现-2 (13:27)
: H; S W, O' d9 P9-6 文字环绕布局
% X/ v, S' [: M! n. ^+ E- G0 Q3 d! u7 x! \3 w5 Z' @3 K# X
3 p5 m" s# {4 F
〖下载地址〗
" }3 X0 M1 x* e7 k3 q, B% G2 x
' E* I& M+ Z6 w3 ^, r〖升级为永久会员免金币下载全站资源〗
$ ]" U, u% X5 s, [. `' J全站资源高清无密，每天更新，一次充值，永久可查看网站全部资源：http://www.mano100.cn/rjyfk_url-url.html: O: T% W1 w4 k4 q2 W$ m5 |9 X
|
|
[复制链接]
