首页 实战 前端内功修炼 5大主流布局系统进阶
收藏

前端内功修炼：5大主流布局系统进阶

高效实现商业级复杂页面，成为前端高手必不可少的一步

前端内功修炼 5大主流布局系统进阶

￥299.00
已完结 难度 初级 时长 21小时 学习人数 762 综合评分 9.98
立即购买 加购物车
立即购买 加购物车
前端必不可少的基础知识，深度掌握
套餐价格：¥539.00
2门课 总价：¥598.00
立即购买
课程介绍 
初级  · 762人报名 ¥299.00
课程介绍 
高级  · 668人报名 ¥299.00

选择合适的布局方式、高效实现易维护的复杂页面是迈向前端高手的必经之路。本课将针对前端5大主流布局，通过大量的实际案例，带你边学习，边实操，让你系统掌握布局高阶技术，具备高效实现商业级复杂页面的进阶能力，摆脱一直重复堆砌代码的低水平布局现状

西门老舅
讲师

前BAT高级前端研发

课程预览

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

系统进阶布局技术，挑战高难度布局，迈入前端高手行列

进阶5大主流布局技术
flex弹性、grid网格、移动端、响应式布
局、tailwindcss框架全面进阶，轻松应对
各种有挑战性的页面排布。
快速提升核心竞争力
商业级项目对精美度、复杂性、实用性要求
越来越高，必须深度掌握CSS布局，快速提
升布局高阶能力，才更有核心竞争力。
轻松应对职业发展
只会单布局远不能满足工作与晋升需求，只
有全面，深入掌握各大主流布局技术，才能
让你的职业发展之路走的更快，更稳。

理论+实战，路线完整，学习更顺畅

告别定位堆砌、浮动乱用，先人一步成为布局高手

技能一
flex弹性布局
目标：利用弹性布局实
现常见的一维布局方案
优势：大大提升布局效
率,让布局更简单，更灵活
特色：从语法到案例实操
快速掌握主轴、交叉轴等
重难点，轻松玩转弹性布局
技能二
grid网格布局
目标：利用网格布局实现
常见的二维布局方案
优势：代码更加易读和易
于维护，以简单的方式实
现更加精细的布局效果
特色：从语法到案例实操
快速掌握叠加布局、栅格
布局、自适应行列布局等
且巩固知识点
技能三
移动端适配布局
目标：利用rem或vw实现
移动端等比适配布局方案
优势：现实移动端各种设
备的等比适配，让移动适
配不再是问题
特色：动态计算font-size
测量rem数值、UI设计稿尺
寸等输出使其掌握其移动端
布局精髓
技能四
响应式布局
目标：利用媒体查询实现
不同终端的响应式布局方案
优势：自动识别屏幕宽度、
做出相应调整的网页设计
特色：通过掌握断点、栅格、
交互等响应式布局精髓，为
不同终端的用户提供更加舒
适的界面和更好的用户体验
技能五
Tailwind CSS布局
目标：定制化程度极高CSS
框架，框架中更好的选择
优势：以原子化的形式提
供了可复用 CSS 代码的能
力，让你与你的团队花更少
的时间，高效完成工作。
特色：从基础详解，到案例
实操，快速掌握，让CSS开
发更快一步

Web+移动端项目实战，综合提升布局技术能力

  • 整体框架搭建及代码划分
  • 选择布局类型技巧
  • 侧边栏flex布局
  • 侧边栏交互行为
  • 主体区域flex布局
  • 设置区域布局
  • 设置区域交互行为
  • 信息展示grid布局
  • 完成整体响应式交互
课程大纲
第1章 课程介绍(了解本课程必看)
了解本门课程，介绍课程大概内容：课程安排、目标、学习人群等。
第2章 CSS还原UI设计
介绍CSS如何跟UI设计配合，并还原设计稿的，内容紧跟技术前沿，对工作流程有非常大的帮助，是公司中的实操内容
第3章 布局中的尺寸与位置
布局核心概念学习，位置和尺寸重点讲解，并且讲解浮动和定位两个重要布局元素，配合案例讲解，对布局基础非常重要，是新手必会技能。
第4章 flex弹性布局
目前最流行的布局方式，特别是移动端，小程序中，对弹性布局深入讲解，并配合大量案例巩固，公司必会技能。
第5章 grid网格布局
目前网格布局趋势明显，能完成很多之前繁琐的布局形式，可以说是未来布局的重中之重，想进阶CSS布局，必须掌握网格布局，本章会配合大量案例进行消化。
查看完整目录

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

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

实用图文资料
部分简单内容以图文形式呈现，与视频相配合，既保障学习效果，又提高了学习效率。
答疑专区+技术社区
连百度谷歌都搜不到的问题，在这里讲
师都将耐心详细解答，更有小伙伴一起
交流互动，共同进步。
课程示例代码
课程将提供与教学配套的示例源码，
帮助您同步实践。
独家“动态”教辅材料
丰富的教辅材料实时上传。
适合人群
懂一些HTML、CSS基础的前端小白
刚毕业找工作的学生
需要大量布局工作的前端或后端开发
技术储备
HTML基础
CSS基础

相关推荐
提问
数据加载中...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

学习咨询

选课、学习遇到问题？

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

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