前端主流布局系统进阶与实战

系统掌握CSS布局进阶技术，轻松解决各种精美页面布局难题

学会4大主流布局技术

搞定flex弹性、grid网格、移动端、响应式布局进阶技术，玩转各种复杂布局。

提高前端开发竞争力

前端页面对精美度、实用性要求越来越高，深度掌握CSS布局，可更快提升竞争力。

轻松应对未来

单布局已不能满足需求，只有掌握主流布局技术，才能让你在各种场景下应对未来布局变化。

案例丰富，讲解细致，一网打尽CSS主流布局知识体系

flex弹性布局

主轴与交叉轴概念
主轴对齐详解
交叉轴对齐详
均分列布局
子项分组布局
flex-grow
flex-shrink收缩比例
flex-basis及flex缩写
等高布局
Sticky Footer布局
综合案例一：swiper轮播图
综合案例二：知乎导航

grid网格布局

定义网格及fr单位
合并网格及网格命名
网格间隙及简写
网格对齐方式及简写
显式网格与隐式网格
基于线的元素放置
minmax()与auto-fill
比定位更方便的叠加布局
栅格布局
综合案例一：百度热词风云榜
综合案例二：小米商品导航菜单

移动端适配布局

移动端概念及UI设计稿尺寸
移动端rem布局原理解析
动态计算fontSize
测量rem数值及插件使用
案例：网易移动端头部实现
案例：网易移动端导航实现
案例：网易移动端新闻列表实现
移动端vw布局及插件使用
案例：B站移动端头部实现
案例：B站移动端导航实现
案例：B站移动端视频列表实现

响应式布局

媒体查询语法详解
多媒体查询的编写位置及顺序
响应式断点（阈值）的设定
响应式栅格系统
响应式交互实现
响应式框架bootstrap
案例：Ghost博客头部和导航实现
案例：Ghost博客栅格新闻列表实现
案例：Ghost博客栅格侧边栏实现
案例：Ghost博客栅格页脚实现
案例：Ghost博客完成响应式交互实现

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

整体框架搭建及代码划分
选择布局类型技巧
侧边栏flex布局
侧边栏交互行为
主体区域flex布局
设置区域布局
设置区域交互行为
信息展示grid布局
完成整体响应式交互

课程大纲

第1章课程介绍(了解本课程必看)

了解本门课程，介绍课程大概内容：课程安排、目标、学习人群等。

第2章 CSS还原UI设计

介绍CSS如何跟UI设计配合，并还原设计稿的，内容紧跟技术前沿，对工作流程有非常大的帮助，是公司中的实操内容

第3章布局中的尺寸与位置

布局核心概念学习，位置和尺寸重点讲解，并且讲解浮动和定位两个重要布局元素，配合案例讲解，对布局基础非常重要，是新手必会技能。

第4章 flex弹性布局

目前最流行的布局方式，特别是移动端，小程序中，对弹性布局深入讲解，并配合大量案例巩固，公司必会技能。

第5章 grid网格布局

目前网格布局趋势明显，能完成很多之前繁琐的布局形式，可以说是未来布局的重中之重，想进阶CSS布局，必须掌握网格布局，本章会配合大量案例进行消化。

查看完整目录

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

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

实用图文资料

部分简单内容以图文形式呈现，与视频相配合，既保障学习效果，又提高了学习效率。

答疑专区+技术社区

连百度谷歌都搜不到的问题，在这里讲
师都将耐心详细解答，更有小伙伴一起
交流互动，共同进步。

课程全套代码下载

提供课程全套源代码下载，包含：
全套组件封装镜像、私有仓库、各个服
务的镜像、项目源代码。

独家“动态”教辅材料

丰富的教辅材料实时上传。

向您推荐

前端主流布局系统进阶与实战，轻松解决页面布局难题

￥299.00

初级难度 / 608 人在学

扫码学习

如无法下载使用图片另存为

下载海报

前端主流布局系统进阶与实战

一课搞定4大主流布局，轻松实现各种精美页面

前端主流布局系统进阶与实战，轻松解决页面布局难题