首页 实战 CSS架构系统精讲 理论+实战玩转蘑菇街
收藏

CSS架构系统精讲 理论+实战玩转蘑菇街

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

CSS架构系统精讲 理论+实战玩转蘑菇街

￥288.00
已完结 难度 高级 时长 14小时 学习人数 561 综合评分 9.95
立即购买 加购物车
立即购买 加购物车

CSS代码越来越臃肿难维护？前期编程不重视，后期重构累秃头？ 本课程基于CSS开发中的痛点问题，通过高仿蘑菇街项目，带你从0到1构架自己的CSS代码，形成一套成熟的易维护、易扩展、易复用的架构思想。不管是架构还是技巧层面，都能玩转CSS！

小小小
讲师

高级前端工程师

课程预览

检测到您还没有关注慕课网服务号，无法接收课程更新通知。请扫描二维码即可绑定
重新观看
课程目标

系统精讲CSS架构，助力前端工程师跨入架构师大门

设计模式+架构思想+落地能力+酷炫技巧，一课多得

全面掌握
CSS设计模式
灵活运用各种设计模式优点，
打下CSS架构方案基础，实现
代码工程化
快速形成一套成熟
的CSS架构思想
保持清醒，杜绝混乱。从根源
解决CSS代码难维护、难扩
展、难复用的头号难题。
高效提升
CSS架构落地能力
体验完整项目流程，使用真实
接口数据，学会自己开发一个
蘑菇街，彻底掌握 CSS 架构。
轻松玩转
CSS十大酷炫技巧
详解疑难重点，提升硬性技能
让你的项目锦上添花。
课程亮点

从零学习CSS架构思想，系统提升代码设计能力，快速实现角色蜕变

具备架构思想的工程师薪资增长普遍高于普通工程师

初级工程师
80%编码 + 20%设计
+
CSS架构思想
=
高级工程师
80%设计 + 20%编码

手把手教你高仿蘑菇街，在实战中提升CSS架构落地能力

穿插技术点细讲，学懂学透CSS经典框架（BEM，Sass， OOCSS等）

实战预热

1）Vue3.0 环境配置

2）组合不同 CSS 设计模式搭建
     CSS 架构

3）MockJs、Axios 配置

4）响应式布局配置

首页开发

1）分析设计稿提取公共样式

2）写出复用性极高的公共组件

3）多色图标 SvgIcon 的应用

4）纯 CSS 实现轮播图

5）CSS 实现主题色切换

6）挑战极少样式代码完成首页

限时快抢页开发

1）CSS 实现复杂图形

2）秒杀区域布局

3）自定义滚动条样式

4）挑战仅 50 行 CSS
     代码完成此页

直播页开发

1）header 区域布局

2）CSS 滤镜效果的实现

3）全屏响应式布局的实现

4）footer 区域布局

针对 CSS 疑难困惑，详解十大酷炫技巧，轻松玩转CSS

多色图标
SvgIcon
中文字体压缩器
fontspider
纯 CSS
制作轮播特效
响应式布局原理
及优缺点
CSS 画复杂图形
CSS 视差滚动
CSS Modules
CSS IN JS
从底层原理
讲通 CSS 动画
玩转 CSS动画
课程大纲
第1章 导入篇：课程简介
第2章 蘑菇街之 CSS 架构搭建
第3章 蘑菇街首页
第4章 蘑菇街商城页
第5章 蘑菇街限时快抢页
本章节介绍整个课程的内容，让大家了解课程的核心和安排。
CSS 代码臃肿、难维护、难复用以成为前端头号难题。来，学完本章，解决痛点！！！
玩转 OOCSS，将抽象出复用性极高的组件。
字蛛是性能优化最重要一环，却往往被人忽视。
200 行 CSS 代码降到 30 行，让你见识一下极限复用的威力。
查看完整目录

每个慕课网课程，都是一个专业的技术社区

个性化增值服务，学习有保障更高效

学练测一体
课程不仅包括视频讲解，还提供练习、
测验等巩固学习效果的环节
答疑专区+技术社区
连百度谷歌都搜不到的问题，在这里讲
师都将耐心详细解答，更有小伙伴一起
交流互动，共同进步。
源码开放
课程案例代码完全开放给你，你可以根
据所学知识，自行修改、优化
教辅材料
丰富的教辅材料实时上传
技术适合人群要求
工作2-5年的前端工程师
技术储备要求
掌握前端基础（HTML+CSS+JS）
对Vue+ Scss有基本了解
技术参数
Vue3.0、CSS3、Sass、Webpack4

相关推荐

万事俱备 只等你来

查看全部161条用户评价
提问
数据加载中...
意见反馈 帮助中心 APP下载
官方微信

学习咨询

选课、学习遇到问题？

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

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