前端主流布局系统进阶与实战
**** Hidden Message *****系统掌握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+移动端项目实战，综合提升布局技术能力
/static/module/class/content/img/527/section1-main3-left.png
[*]整体框架搭建及代码划分
[*]选择布局类型技巧
[*]侧边栏flex布局
[*]侧边栏交互行为
[*]主体区域flex布局
[*]设置区域布局
[*]设置区域交互行为
[*]信息展示grid布局
[*]完成整体响应式交互
课程大纲
第1章课程介绍(了解本课程必看)
了解本门课程，介绍课程大概内容：课程安排、目标、学习人群等。
第2章CSS还原UI设计
介绍CSS如何跟UI设计配合，并还原设计稿的，内容紧跟技术前沿，对工作流程有非常大的帮助，是公司中的实操内容
第3章布局中的尺寸与位置
布局核心概念学习，位置和尺寸重点讲解，并且讲解浮动和定位两个重要布局元素，配合案例讲解，对布局基础非常重要，是新手必会技能。
第4章flex弹性布局
目前最流行的布局方式，特别是移动端，小程序中，对弹性布局深入讲解，并配合大量案例巩固，公司必会技能。
第5章grid网格布局
目前网格布局趋势明显，能完成很多之前繁琐的布局形式，可以说是未来布局的重中之重，想进阶CSS布局，必须掌握网格布局，本章会配合大量案例进行消化。
查看完整目录
每个IT资源网课程，都是一个专业的技术社区
个性化增值服务，学习有保障更高效
实用图文资料
部分简单内容以图文形式呈现，与视频相配合，既保障学习效果，又提高了学习效率。
答疑专区+技术社区
连百度谷歌都搜不到的问题，在这里讲
师都将耐心详细解答，更有小伙伴一起
交流互动，共同进步。
课程全套代码下载
提供课程全套源代码下载，包含：
全套组件封装镜像、私有仓库、各个服
务的镜像、项目源代码。
独家“动态”教辅材料
丰富的教辅材料实时上传。
**** Hidden Message *****
页:
[1]