价格: 19 学币

分类: HTMLCSS

发布时间: 2022年1月23日 10:51

最近更新: 2022年2月20日 15:18

资源类型: VIP


第1章 课程介绍(了解本课程必看)

本章节介绍整个课程的内容,让大家了解课程的核心和安排,了解什么是CSS架构,课程安排、学习方
法等方面的介绍。
1-1 导学 (06:16)

第2章 蘑菇街之 CSS 架构搭建

CSS 代码臃肿、难维护、难复用以成为前端头号难题。来,学完本章,解决痛点!!!
2-1 课前了解
2-2 vue3创建与初始配置 (16:14)
2-3 vue3创建与初始配置 (18:00)
2-4 node版本选择小技巧
2-5 CSS设计模式完结(1) (18:05)
2-6 CSS设计模式完结(2) (23:42)
2-7 CSS设计模式完结(3) (17:35)
2-8 按 OOCSS 原则重写如下样式
2-9 CSS架构方案 (16:41)
2-10 CSS架构之Settings层代码实现 (19:31)
2-11 CSS架构之Tools层代码实现(上) (07:07)
2-12 CSS架构之Tools层代码实现(下) (11:50)
2-13 CSS架构之Base层代码实现(1) (05:16)
2-14 CSS架构之Base层代码实现(2) (11:07)
2-15 CSS架构之Components层代码实现(上) (09:09)
2-16 CSS架构之Components层代码实现(中) (09:43)
2-17 CSS架构之Components层代码实现(下) (16:09)
2-18 CSS架构之Acss层代码实现(上) (07:48)
2-19 CSS架构之Acss层代码实现(下) (08:21)
2-20 CSS架构之Theme层代码实现(上) (04:43)
2-21 CSS架构之Theme层代码实现(中) (11:17)
2-22 CSS架构之Theme层代码实现(下) (07:44)
2-23 面试题

第3章 蘑菇街首页

玩转 OOCSS,将抽象出复用性极高的组件
3-1 课前了解
3-2 搭建本地 MockJs(上) (04:53)
3-3 搭建本地 MockJs(下) (12:50)
3-4 响应式布局(上) (03:23)
3-5 响应式布局(下) (05:50)
3-6 自适应 VW 布局
3-7 首页设计稿构思 (03:28)
3-8 架构之Elements层扩展 (12:57)
3-9 架构之ACSS层扩展(上) (13:45)
3-10 架构之ACSS层扩展(下) (09:59)
3-11 架构之Components层扩展(上) (12:07)
3-12 架构之Components层扩展(下) (15:39)
3-13 多色图标 SvgIcon (12:40)
3-14 launch 组件中星星图标用 SvgIcon 实现
3-15 纯 CSS 实现轮播图 (14:04)
3-16 完成首页布局(上) (15:54)
3-17 完成首页布局(下) (20:29)
3-18 面试题

第4章 蘑菇街商城页

字蛛是性能优化最重要一环,却往往被人忽视
4-1 课前了解
4-2 商城页设计稿构思 (03:52)
4-3 架构之 Components 层扩展 (08:59)
4-4 完成商城页布局 (09:20)

第5章 蘑菇街时快抢页

200 行 CSS 代码降到 30 行,让你见识一下极限复用的威力
5-1 课前了解
5-2 限时快抢页设计稿构思 (04:08)
5-3 中文字体压缩:字蛛(font-spider) (17:28)
5-4 border-radius原理及实现复杂图形 (15:08)
5-5 完成限时快抢页布局(上) (10:08)
5-6 完成限时快抢页布局(中) (15:29)
5-7 完成限时快抢页布局(下) (17:40)
5-8 面试题

第6章 蘑菇街直播列表页

不懂 CSS 的美化功能,还说你能玩转 CSS
6-1 课前了解
6-2 直播列表页设计稿构思 (03:44)
6-3 ACSS层扩展滤镜特效 (08:28)
6-4 完成直播列表页布局(上) (14:51)
6-5 完成直播列表页布局(下) (09:39)

第7章 蘑菇街直播详情页

还没听过 “全屏响应式” 吗,你不得不学
7-1 课前了解
7-2 直播详情页设计稿构思 (04:02)
7-3 方案的选择 (10:32)
7-4 完整直播详情页 (16:02)

第8章 经典框架之 CSS 源码分析

唯有向经典框架取经,才能写出更优的 CSS 代码及架构
8-1 课前了解
8-2 ElementUI 之 CSS 架构揭秘new (06:49)
8-3 Ant Design 之 CSS 架构揭秘 (06:23)
8-4 Bootstrap 之 CSS 架构揭秘 (11:52)
8-5 TailWind 框架介绍(上) (08:25)
8-6 TailWind 框架介绍(下) (14:19)

第9章 CSS 奇淫巧计

你不得不学的 CSS 技能
9-1 课前了解
9-2 CSSModules(上) (12:37)
9-3 CSSModules(下) (10:55)
9-4 CSS-in-JS (14:09)
9-5 CSS视差滚动 (12:57)

第10章 打造高性能 CSS 动画

不懂这些,你根本不懂 CSS 动画
10-1 课前了解
10-2 通过渲染原理看动画 (08:57)
10-3 高性能CSS动画(上) (15:01)
10-4 高性能CSS动画(中) (13:34)
10-5 高性能CSS动画(下) (07:04)
10-6 CSS Time (10:49)
10-7 动画实战(1) (10:49)
10-8 动画实战(2) (11:20)
10-9 动画实战(3) (11:29)
10-10 动画实战(4) (18:13)
10-11 动画实战(5) (12:44)
10-12 动画实战(6) (14:11)
10-13 面试题

第11章 课程总结

课程总结
11-1 11课程总结 (01:41)