采用“设计还原—>核心模型—>现代布局（Flex/Grid）—>移动端适配—>响应式架构—>企业级实战”的六阶跃迁模型，带你从UI设计稿标注、盒模型底层原理起步，彻底掌握BFC块级格式化上下文与逻辑属性，构建坚实的CSS视觉渲染底座。课程核心聚焦于现代布局双引擎，深度剖析Flex弹性布局（主轴对齐、换行、分组）与Grid网格布局（显式/隐式网格、叠加布局），助你彻底告别“浮动与定位”的旧时代。你将深入移动端Rem/Vw适配原理，掌握媒体查询与Bootstrap响应式栅格，最终通过Ant Design Pro管理系统的全链路实战，涵盖侧边栏折叠交互、主题色动态切换与响应式内容布局。这不仅是样式的编写教学，更是对2026年企业级“多端适配、高性能渲染、组件化架构”能力的深度重塑，助你从一名页面仔蜕变为具备全栈视觉架构思维的稀缺前端专家。
课程目录：
前端主流布局系统
| 资料.rar
|
+—第1章课程介绍
| 1-1 课程导学.mp4
| 1-2 常见布局展示及技术分析.mp4
| 1-3 软件安装与课件获取方式_.doc
| 1-4 CSS发展史与CSS模块划分_.doc
|
+—第2章 CSS还原UI设计
| 2-1 章节简介 .mp4
| 2-10 测试题_.doc
| 2-2 长度单位与颜色分类_.doc
| 2-3 UI设计图的源文件种类_.doc
| 2-4 Photoshop还原UI设计.mp4
| 2-5 蓝湖App快速标注信息.mp4
| 2-6 PxCook自动标注工具.mp4
| 2-7 imgcook设计稿智能平台.mp4
| 2-8 章节总结.mp4
| 2-9 【练习题】测试psd中的相关CSS数值_.doc
| BOSS直聘首页_.rar
|
+—第3章 布局中的尺寸与位置
| 3-1 章节介绍.mp4
| 3-10 详解display属性_.doc
| 3-11 书写模式与逻辑属性_.doc
| 3-12 BFC块级格式化上下文_.doc
| 3-13 标签默认样式及清除_.doc
| 3-14 章节总结.mp4
| 3-15 【练习题】编写对应CSS代码_.doc
| 3-16 测试题_.doc
| 3-2 CSS盒模型的组成.mp4
| 3-3 块级盒子与内联盒子.mp4
| 3-4 自适应盒模型的特性.mp4
| 3-5 标准盒模型与怪异盒模.mp4
| 3-6 浮动样式详解.mp4
| 3-7 浮动特性注意点.mp4
| 3-8 定位样式详解.mp4
| 3-9 定位特性注意点.mp4
|
+—第4章 flex弹性布局
| 4-1 章节介绍.mp4
| 4-10 flex-grow扩展比例.mp4
| 4-11 flex-shrink收缩比例.mp4
| 4-12 flex-basis及flex缩写.mp4
| 4-13 等高布局.mp4
| 4-14 两列与三列布局.mp4
| 4-15 Sticky Footer布局.mp4
| 4-16 溢出项布局.mp4
| 4-17 综合案例一(Swiper轮播图).mp4
| 4-18 综合案例二(知乎导航).mp4
| 4-19 章节总结.mp4
| 4-2 主轴与交叉轴.mp4
| 4-20 练习题_.doc
| 4-3 换行与缩写.mp4
| 4-4 主轴对齐详解.mp4
| 4-5 交叉轴对齐详解.mp4
| 4-6 内联与块的上下左右居中布局.mp4
| 4-7 不定项居中布局.mp4
| 4-8 均分列布局.mp4
| 4-9 子项分组布局.mp4
|
+—第5章 grid网格布局
| 5-1 章节介绍.mp4
| 5-10 多种组合排列布局.mp4
| 5-11 栅格布局.mp4
| 5-12 容器自适应行列布局.mp4
| 5-13 综合案例一(百度热词风云榜).mp4
| 5-14 综合案例二(小米商品导航菜单).mp4
| 5-15 章节总结.mp4
| 5-16 练习题_.doc
| 5-17 测试题_.doc
| 5-2 定义网格及fr单位.mp4
| 5-3 合并网格及网格命名.mp4
| 5-4 网格间隙及简写.mp4
| 5-5 网格对齐方式及简写.mp4
| 5-6 显式网格与隐式网格.mp4
| 5-7 基于线的元素放置.mp4
| 5-8 repeat()与minmax().mp4
| 5-9 比定位更方便的叠加布局.mp4
|
+—第6章 移动端适配布局
| 6-1 章节介绍.mp4
| 6-10 移动端vw布局及插件使用.mp4
| 6-11 vw案例：B站移动端头部实现.mp4
| 6-12 vw案例：B站移动端导航实现.mp4
| 6-13 vw案例：B站移动端视频列表实现.mp4
| 6-14 章节总结.mp4
| 6-15 【练习题】测量个人中心页的css数值.html
| 6-16 测试题.html
| 6-2 移动端概念及UI设计稿尺寸.pdf
| 6-3 移动端rem布局原理解析.mp4
| 6-5 测量rem数值及插件使用.mp4
| 6-6 rem案例：网易移动端头部实现.mp4
| 6-7 rem案例：网易移动端导航实现.mp4
| 6-8 rem案例：网易移动端新闻列表实现(1).mp4
| 6-9 rem案例：网易移动端新闻列表实现(2).mp4
|
+—第7章 响应式布局
| 7-1 章节介绍.mp4
| 7-10 响应式案例：博客文章列表实现.mp4
| 7-11 响应式案例：博客辅助列表实现.mp4
| 7-12 响应式案例：博客尾部实现.mp4
| 7-13 章节总结.mp4
| 7-2 媒体查询语法详解.mp4
| 7-3 媒体查询的编写位置及顺序.mp4
| 7-4 响应断点(阈值)的设定.mp4
| 7-5 响应式栅格系统.mp4
| 7-6 响应式交互实现.mp4
| 7-7 响应式框架bootstrap.pdf
| 7-8 响应式案例：博客头部实现.mp4
| 7-9 响应式案例：博客导航实现.mp4
|
+—第8章 综合实战 Ant Design Pro 管理系统
| 8-10 实战项目：主体网格布局实现.mp4
| 8-11 实战项目：设置模块主题色实现.mp4
| 8-12 实战项目：设置模块切换按钮实现.mp4
| 8-13 实战项目：设置模块主题色交互.mp4
| 8-14 实战项目：设置模块切换按钮交互.mp4
| 8-15 实战项目：响应式内容及菜单实现.mp4
| 8-1章节介绍.mp4
| 8-2 CSS文件划分及功能分类.pdf
| 8-3 CSS方法论及样式规范.pdf
| 8-4 实战项目：框架搭建.mp4
| 8-5 实战项目：侧边栏结构编写.mp4
| 8-6 (3分51，7分左右背景音嘈杂，有人说话)实战项目：侧边栏.mp4
| 8-7 实战项目：侧边栏列表交互.mp4
| 8-8 实战项目：侧边栏折叠交互.mp4
| 8-9 实战项目：主体头部尾部实现.mp4
|
+—第9章 课程福利加餐
| 9-1 横向瀑布流布局-1.mp4
| 9-2 竖向瀑布流布局-2.mp4
| 9-3 视觉差布局原理解析.mp4
| 9-4 视觉差布局案例实现-1.mp4
| 9-5 视觉差布局案例实现-2.mp4
| 9-6 文字环绕布局.pdf
|
\—资料
source_code-master.zip
下载地址：
感谢您的来访，获取更多精彩文章请收藏本站。
