getfromcode

慕课实战 - 前端内功修炼 ：5大主流布局系统进阶

前端开发
课程简介

慕课实战 - 前端内功修炼 ：5大主流布局系统进阶 深入掌握5大布局系统，提升UI设计还原能力 编辑点评 系统讲解CSS布局，涵盖Flex、Grid、响应式等核心知识，实战项目丰富，适合前端开发者进阶。 ⭐ 编辑推荐 本课程深入浅出地讲解了前端布局的五大主流系统：Flex、Grid、响应式布局等，通过实战项目提升UI设计还原能力。 ✨ 课程亮点 ✦ 系统讲…

已有 8 人浏览 发布 2026-04-25 更新 2026-10-13

慕课实战 - 前端内功修炼 ：5大主流布局系统进阶

深入掌握5大布局系统，提升UI设计还原能力

编辑点评

系统讲解CSS布局，涵盖Flex、Grid、响应式等核心知识，实战项目丰富，适合前端开发者进阶。

⭐ 编辑推荐

本课程深入浅出地讲解了前端布局的五大主流系统：Flex、Grid、响应式布局等，通过实战项目提升UI设计还原能力。

✨ 课程亮点

✦系统讲解CSS布局
✦实战项目丰富
✦提升UI设计还原能力

课程目录

第2章CSS还原UI设计9 集
  • 第2章CSS还原UI设计说明.png [493.5 KB]
  • 2-8绔犺妭鎬荤粨_[3].mp4 [11.2 MB]
  • 2-5蓝湖App快速标注信息_[3].mp4 [28.3 MB]
  • 2-7imgcook设计稿智能平台_[3].mp4 [27.6 MB]
  • (2.2)--2-3UI设计图的源文件种类_.pdf [309.4 KB]
  • (2.1)--2-2长度单位与颜色分类_.pdf [230.0 KB]
  • 2-4Photoshop杩樺師UI璁捐_[3].mp4 [25.2 MB]
  • 2-6PxCook自动标注工具_[3].mp4 [40.1 MB]
  • 2-1绔犺妭绠€浠媉[3].mp4 [4.4 MB]
第4章flex弹性布局18 集
  • 第4章flex弹性布局资料.zip [1.8 MB]
  • 4-5交叉轴对齐详解_[3].mp4 [44.2 MB]
  • 4-4主轴对齐详解_[3].mp4 [26.3 MB]
  • 4-17综合案例一(Swiper轮播图)_[3].mp4 [115.1 MB]
  • 4-13绛夐珮甯冨眬_[3].mp4 [28.9 MB]
  • 4-6内联与块的上下左右居中布局_[3].mp4 [52.5 MB]
  • 4-11flex-shrink鏀剁缉姣斾緥_[3].mp4 [45.9 MB]
  • 4-9子项分组布局_[3].mp4 [33.5 MB]
  • 4-3鎹㈣涓庣缉鍐檁[3].mp4 [32.3 MB]
  • 4-16婧㈠嚭椤瑰竷灞€_[3].mp4 [27.4 MB]
  • 4-14两列与三列布局_[3].mp4 [37.4 MB]
  • 4-18综合案例二(知乎导航)_[3].mp4 [119.7 MB]
  • 4-8鍧囧垎鍒楀竷灞€_[3].mp4 [36.8 MB]
  • 4-10flex-grow鎵╁睍姣斾緥_[3].mp4 [43.6 MB]
  • 4-1绔犺妭浠嬬粛_[3].mp4 [7.1 MB]
  • 4-2主轴与交叉轴_[3].mp4 [22.2 MB]
  • 4-19绔犺妭鎬荤粨_[3].mp4 [8.7 MB]
  • 4-7不定项居中布局_[3].mp4 [35.9 MB]
第7章响应式布局13 集
  • 7-9响应式案例：博客导航实现_[3].mp4 [84.4 MB]
  • 7-12响应式案例：博客尾部实现_[3].mp4 [81.7 MB]
  • 7-2媒体查询语法详解_[3].mp4 [48.2 MB]
  • 7-7响应式框架bootstrap_.pdf [128.8 KB]
  • 7-1绔犺妭浠嬬粛_[3].mp4 [9.2 MB]
  • 7-13绔犺妭鎬荤粨_[3].mp4 [6.0 MB]
  • 7-11响应式案例：博客辅助列表实现_[3].mp4 [89.7 MB]
  • 7-6响应式交互实现_[3].mp4 [26.8 MB]
  • 7-10响应式案例：博客文章列表实现_[3].mp4 [117.7 MB]
  • 7-3媒体查询的编写位置及顺序_[3].mp4 [37.0 MB]
  • 7-4响应断点(阈值)的设定_[3].mp4 [29.6 MB]
  • 7-5响应式栅格系统_[3].mp4 [54.1 MB]
  • 7-8响应式案例：博客头部实现_[3].mp4 [36.5 MB]
第8章综合实战AntDesignPro管理系统16 集
  • 第8章综合实战AntDesignPro管理系统文档.png [493.5 KB]
  • 8-7实战项目：侧边栏列表交互_[3].mp4 [36.5 MB]
  • 8-6(3分51，7分左右背景音嘈杂，有人说话)实战项目：侧边栏_[3].mp4 [70.3 MB]
  • 8-1绔犺妭浠嬬粛_[3].mp4 [6.4 MB]
  • 8-3CSS方法论及样式规范_.pdf [113.4 KB]
  • 8-2CSS文件划分及功能分类_.pdf [119.2 KB]
  • 8-12实战项目：设置模块切换按钮实现_[3].mp4 [45.1 MB]
  • 8-9实战项目：主体头部尾部实现_[3].mp4 [63.6 MB]
  • 8-11实战项目：设置模块主题色实现_[3].mp4 [114.8 MB]
  • 8-15实战项目：响应式内容及菜单实现_[3].mp4 [127.9 MB]
  • 8-4实战项目：框架搭建_[3].mp4 [54.2 MB]
  • 8-14实战项目：设置模块切换按钮交互_[3].mp4 [117.3 MB]
  • 8-5实战项目：侧边栏结构编写_[3].mp4 [47.0 MB]
  • 8-8实战项目：侧边栏折叠交互_[3].mp4 [43.5 MB]
  • 8-10实战项目：主体网格布局实现_[3].mp4 [86.0 MB]
  • 8-13实战项目：设置模块主题色交互_[3].mp4 [64.1 MB]
第5章grid网格布局17 集
  • 第5章grid网格布局必看.png [493.5 KB]
  • 5-13综合案例一(百度热词风云榜)_[3].mp4 [121.3 MB]
  • 5-16 练习题_.html [9.4 KB]
  • 5-11鏍呮牸甯冨眬_[3].mp4 [38.8 MB]
  • 5-10多种组合排列布局_[3].mp4 [17.5 MB]
  • 5-3合并网格及网格命名_[3].mp4 [40.4 MB]
  • 5-14综合案例二(小米商品导航菜单)_[3].mp4 [121.7 MB]
  • 5-9比定位更方便的叠加布局_[3].mp4 [34.4 MB]
  • 5-12容器自适应行列布局_[3].mp4 [32.0 MB]
  • 5-2定义网格及fr单位_[3].mp4 [35.0 MB]
  • 5-7基于线的元素放置_[3].mp4 [63.3 MB]
  • 5-15绔犺妭鎬荤粨_[3].mp4 [11.6 MB]
  • 5-4网格间隙及简写_[3].mp4 [30.5 MB]
  • 5-5网格对齐方式及简写_[3].mp4 [39.6 MB]
  • 5-17_.html [2.0 KB]
  • 5-6 显式网格与隐式网格_[3].mp4 [65.0 MB]
  • 5-1绔犺妭浠嬬粛_[3].mp4 [8.8 MB]
第10章 tailwindcss进行网页布局2 集
  • [10.26]--10-26 tailwindcss绔犺妭鎬荤粨.mp4 [41.6 MB]
  • [10.25]--10-25 tailwindcss案例之博客尾部实现.mp4 [64.0 MB]
第9章 课程福利加餐7 集
  • 第9章 课程福利加餐说明.png [493.5 KB]
  • 9-5 视觉差布局案例实现-2.mp4 [77.9 MB]
  • 9-4 视觉差布局案例实现-1.mp4 [97.3 MB]
  • 9-2 竖向瀑布流布局-2.mp4 [154.1 MB]
  • 9-6 文字环绕布局.pdf [209.8 KB]
  • 9-3 视觉差布局原理解析.mp4 [87.6 MB]
  • 9-1 横向瀑布流布局-1.mp4 [81.4 MB]
第6章移动端适配布局15 集
  • 6-11vw案例：B站移动端头部实现_[3].mp4 [76.3 MB]
  • (6.1)--6-2移动端概念及UI设计稿尺寸_.pdf [195.1 KB]
  • 6-7rem案例：网易移动端导航实现_[3].mp4 [91.4 MB]
  • 6-15 【练习题】测量个人中心页的css数值_.html [2.2 KB]
  • 6-12vw案例：B站移动端导航实现_[3].mp4 [89.9 MB]
  • 6-14绔犺妭鎬荤粨_[3].mp4 [11.0 MB]
  • 6-6rem案例：网易移动端头部实现_[3].mp4 [62.4 MB]
  • 6-8rem案例：网易移动端新闻列表实现(1)_[3].mp4 [66.6 MB]
  • 6-9rem案例：网易移动端新闻列表实现(2)_[3].mp4 [112.0 MB]
  • 6-3移动端rem布局原理解析_[3].mp4 [26.4 MB]
  • 6-13vw案例：B站移动端视频列表实现_[3].mp4 [109.0 MB]
  • 6-1绔犺妭浠嬬粛_[3].mp4 [10.9 MB]
  • 6-5测量rem数值及插件使用_[3].mp4 [48.3 MB]
  • 6-10移动端vw布局及插件使用_[3].mp4 [23.8 MB]
  • 6-16 测试题_.html [1.9 KB]
第3章布局中的尺寸与位置14 集
  • (3.4)--3-13标签默认样式及清除_.pdf [92.6 KB]
  • 3-7浮动特性注意点_[3].mp4 [28.8 MB]
  • 3-5标准盒模型与怪异盒模_[3].mp4 [40.0 MB]
  • 3-2CSS盒模型的组成_[3].mp4 [55.7 MB]
  • (3.1)--3-10详解display属性_.pdf [295.1 KB]
  • (3.3)--3-12BFC块级格式化上下文_.pdf [156.5 KB]
  • 3-9定位特性注意点_[3].mp4 [38.8 MB]
  • 3-14绔犺妭鎬荤粨_[3].mp4 [10.6 MB]
  • 3-4自适应盒模型的特性_[3].mp4 [20.3 MB]
  • 3-3块级盒子与内联盒子_[3].mp4 [36.7 MB]
  • 3-6浮动样式详解_[3].mp4 [59.3 MB]
  • 3-1绔犺妭浠嬬粛_[3].mp4 [6.8 MB]
  • (3.2)--3-11书写模式与逻辑属性_.pdf [482.7 KB]
  • 3-8定位样式详解_[3].mp4 [46.0 MB]
资料3 条
  • 资料说明.zip [1.8 MB]
  • source_code-master.zip [40.4 MB]
  • source_code.rar [23.6 MB]
第1章课程介绍(了解本课程必看)4 集
  • (1.2)--1-4CSS发展史与CSS模块划分_.pdf [529.6 KB]
  • (1.1)--1-3软件安装与课件获取方式_.pdf [50.7 KB]
  • 1-1课程导学_[3].mp4 [36.3 MB]
  • 1-2常见布局展示及技术分析_[3].mp4 [53.8 MB]

适合人群

  • 前端开发者
  • UI设计师
  • 前端进阶者

🎯 学习收获

  • 掌握Flex、Grid布局
  • 学会响应式布局设计
  • 提升实战项目能力

🎉 祝您学习愉快！

相关推荐
熠辉ai编程课
熠辉ai编程课
¥29.9 · 56 浏览
产品老曾课程4套合集
产品老曾课程4套合集
¥29.9 · 37 浏览
蔡老板-AST入门实战与JavaScript补环境课程
蔡老板-AST入门实战与JavaScript补环境课程
¥29.9 · 27 浏览
乐魔leo游戏UI动效0基础系统课
乐魔leo游戏UI动效0基础系统课
¥29.9 · 21 浏览
测试
测试
¥29 · 14 浏览
【起点课堂】90天产品经理实战24期 - 带源码课件
【起点课堂】90天产品经理实战24期 - 带源码课件
¥29.9 · 13 浏览
慕课网-全栈开发高可扩展，高可维护性“当当书城WebApp”
慕课网-全栈开发高可扩展，高可维护性“当当书城WebApp”
¥29.9 · 13 浏览
李大熊-PPT新手到大神
李大熊-PPT新手到大神
¥29.9 · 6 浏览
精通CSS：高级Web标准解决方案(第2版).pdf
精通CSS：高级Web标准解决方案(第2版).pdf
¥29 · 270 浏览
2026 Flutter移动应用开发实战课程
2026 Flutter移动应用开发实战课程
¥50 · 207 浏览
前端跳槽突围课：React18底层源码深入剖析(完结)
前端跳槽突围课：React18底层源码深入剖析(完结)
¥29 · 194 浏览
Angular 打造企业级协作平台
Angular 打造企业级协作平台
¥29 · 169 浏览
课程购买
课程价格
金币29.9
299金币限时优惠会员免费
销量：0
💎 开通会员每日免费下载，比单买更划算 →
支付成功后会自动显示下载资源云盘的链接！点击链接即可下载到本地。
[衡天云]爆款云服务器 低至12元/月
[衡天云]爆款云服务器 低至12元/月