/ 实战 / 2021必修 首门CSS架构系统精讲 理论+实战玩转蘑菇街
收藏

2021必修 CSS架构系统精讲

一课解决CSS难维护、难扩展、难复用问题,助力前端工程师实现弯道超车

2021必修 首门CSS架构系统精讲 理论+实战玩转蘑菇街

难度 中级 时长 14小时 学习人数 258 综合评分 10.00

2021必修 首门CSS架构系统精讲 理论+实战玩转蘑菇街

¥288.00
全部展开
  • 第1章 课程介绍(了解本课程必看) 试看

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

    共 1 节 (7分钟) 收起列表

    • 1-1 导学 (06:16) 试看
  • 第2章 蘑菇街之 CSS 架构搭建

    CSS 代码臃肿、难维护、难复用以成为前端头号难题。来,学完本章,解决痛点!!!

    共 23 节 (274分钟) 展开列表

    • 2-1 vue3创建与初始配置 (16:14)
    • 2-2 vue3创建与初始配置 (18:00)
    • 2-3 node版本选择小技巧
    • 2-4 CSS设计模式完结(1) (18:05)
    • 2-5 CSS设计模式完结(2) (23:42)
    • 2-6 CSS设计模式完结(3) (17:35)
    • 2-7 CSS架构方案 (16:41)
    • 2-8 CSS架构之Settings层代码实现 (16:45)
    • 2-9 CSS架构之Tools层代码实现(上) (07:07)
    • 2-10 CSS架构之Tools层代码实现(下) (11:50)
    • 2-11 CSS架构之Base层代码实现(1) (05:16)
    • 2-12 CSS架构之Base层代码实现(2) (08:58)
    • 2-13 CSS架构之Base层代码实现(3) (13:28)
    • 2-14 CSS架构之Base层代码实现(4) (04:17)
    • 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层代码实现(中) (13:37)
    • 2-20 CSS架构之Acss层代码实现(下) (15:27)
    • 2-21 CSS架构之Theme层代码实现(上) (04:43)
    • 2-22 CSS架构之Theme层代码实现(中) (11:17)
    • 2-23 CSS架构之Theme层代码实现(下) (07:44)
  • 第3章 蘑菇街首页 试看

    玩转 OOCSS,将抽象出复用性极高的组件

    共 14 节 (159分钟) 展开列表

    • 3-1 搭建本地 MockJs(上) (04:53) 试看
    • 3-2 搭建本地 MockJs(下) (12:50)
    • 3-3 响应式布局(上) (03:23)
    • 3-4 响应式布局(下) (05:50)
    • 3-5 首页设计稿构思 (03:28)
    • 3-6 架构之Elements层扩展 (12:57)
    • 3-7 架构之ACSS层扩展(上) (13:45)
    • 3-8 架构之ACSS层扩展(下) (09:59)
    • 3-9 架构之Components层扩展(上) (12:07)
    • 3-10 架构之Components层扩展(下) (15:39)
    • 3-11 多色图标 SvgIcon (12:40)
    • 3-12 纯 CSS 实现轮播图 (14:04)
    • 3-13 完成首页布局(上) (16:14)
    • 3-14 完成首页布局(下) (20:29)
  • 第4章 蘑菇街商城页

    字蛛是性能优化最重要一环,却往往被人忽视

    共 3 节 (23分钟) 展开列表

    • 4-1 商城页设计稿构思 (03:52)
    • 4-2 架构之 Components 层扩展 (08:59)
    • 4-3 完成商城页布局 (09:20)
  • 第5章 蘑菇街时快抢页

    200 行 CSS 代码降到 30 行,让你见识一下极限复用的威力

    共 6 节 (81分钟) 展开列表

    • 5-1 限时快抢页设计稿构思 (04:08)
    • 5-2 中文字体压缩:字蛛(font-spider) (17:28)
    • 5-3 border-radius原理及实现复杂图形 (15:08)
    • 5-4 完成限时快抢页布局(上) (10:08)
    • 5-5 完成限时快抢页布局(中) (15:29)
    • 5-6 完成限时快抢页布局(下) (17:40)
  • 第6章 蘑菇街直播列表页

    不懂 CSS 的美化功能,还说你能玩转 CSS

    共 4 节 (37分钟) 展开列表

    • 6-1 直播列表页设计稿构思 (03:44)
    • 6-2 ACSS层扩展滤镜特效 (08:28)
    • 6-3 完成直播列表页布局(上) (14:51)
    • 6-4 完成直播列表页布局(下) (09:39)
  • 第7章 蘑菇街直播详情页

    还没听过 “全屏响应式” 吗,你不得不学

    共 3 节 (31分钟) 展开列表

    • 7-1 直播详情页设计稿构思 (04:02)
    • 7-2 方案的选择 (10:32)
    • 7-3 完整直播详情页 (16:02)
  • 第8章 经典框架之 CSS 源码分析

    唯有向经典框架取经,才能写出更优的 CSS 代码及架构

    共 5 节 (48分钟) 展开列表

    • 8-1 ElementUI 之 CSS 架构揭秘new (06:49)
    • 8-2 Ant Design 之 CSS 架构揭秘 (06:23)
    • 8-3 Bootstrap 之 CSS 架构揭秘 (11:52)
    • 8-4 TailWind 框架介绍(上) (08:25)
    • 8-5 TailWind 框架介绍(下) (14:19)
  • 第9章 CSS 奇淫巧计

    你不得不学的 CSS 技能

    共 4 节 (51分钟) 展开列表

    • 9-1 CSSModules(上) (12:37)
    • 9-2 CSSModules(下) (10:55)
    • 9-3 CSS-in-JS (14:09)
    • 9-4 CSS视差滚动 (12:57)
  • 第10章 打造高性能 CSS 动画

    不懂这些,你根本不懂 CSS 动画

    共 5 节 (56分钟) 展开列表

    • 10-1 通过渲染原理看动画 (08:57)
    • 10-2 高性能CSS动画(上) (15:01)
    • 10-3 高性能CSS动画(中) (13:34)
    • 10-4 高性能CSS动画(下) (07:04)
    • 10-5 CSS Time (10:49)
  • 第11章 课程总结

    课程总结

    共 1 节 (2分钟) 展开列表

    • 11-1 11课程总结 (01:41)
本课程持续更新中

试看

全部试看小节



讲师

小小小 Web前端工程师

8年互联网老兵,有丰富的授课经验,曾在某大型独角兽公司担任前端架构师一职,之后在金融公司担任过前端负责人及前端架构师等职位。

课程预览

检测到您还没有关注慕课网服务号,无法接收课程更新通知。请扫描二维码即可绑定
重新观看
意见反馈 帮助中心 APP下载
官方微信

学习咨询

选课、学习遇到问题?

扫码添加指导老师 1V1 帮助你!

添加后老师会第一时间解决你的问题