123好课网提供前端主流布局系统进阶与实战视频课程,西门老舅讲师:前端主流布局系统进阶与实战,原价299,实现精美页面是前端工程师的核心能力之一,CSS布局技术是实现精美页面的核心技术,但CSS布局好入门,难精通。本课将围绕前端4大主流布局,通过大量的实际案例,带你边学习,边实操,让你系统掌握CSS布局进阶技术,轻松解决各种精美页面布局难题。
前端主流布局系统进阶与实战
慕课网实战前端主流布局系统进阶与实战

西门老舅讲师简介

慕课网官方认证、精英讲师,13年前端开发及前端培训相关经验,曾在多家IT上市公司担任高级研发,阿里、人人、电信等。主要负责复杂web应用前端搭建,对前端CSS、JS、TS、Vue、React、小程序、工程化都有深入研究,并乐于技术分享。

适合人群

懂一些HTML、CSS基础的前端小白
刚毕业找工作的学生
需要大量布局工作的前端或后端开发

技术储备

HTML基础
CSS基础

章节目录

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

视频:1-1 课程导学(09:16)
视频:1-2 常见布局展示及技术分析(08:02)
图文:1-3 软件安装与课件获取方式
图文:1-4 CSS发展史与CSS模块划分

第2章 CSS还原UI设计

视频:2-1 章节简介(02:09)
图文:2-2 长度单位与颜色分类
图文:2-3 UI设计图的源文件种类
视频:2-4 Photoshop还原UI设计(06:59)
视频:2-5 蓝湖App快速标注信息(07:51)
视频:2-6 PxCook自动标注工具(08:59)
视频:2-7 imgcook设计稿智能平台(06:41)
视频:2-8 章节总结(03:51)

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

视频:3-1 章节介绍(03:43)
视频:3-2 CSS盒模型的组成(17:32)
视频:3-3 块级盒子与内联盒子(11:11)
视频:3-4 自适应盒模型的特性(05:43)
视频:3-5 标准盒模型与怪异盒模(11:26)
视频:3-6 浮动样式详解(18:52)
视频:3-7 浮动特性注意点(07:58)
视频:3-8 定位样式详解(12:44)
视频:3-9 定位特性注意点(08:48)
图文:3-10 详解display属性
图文:3-11 书写模式与逻辑属性
图文:3-12 BFC块级格式化上下文
图文:3-13 标签默认样式及清除
视频:3-14 章节总结(03:04)

第4章 flex弹性布局

视频:4-1 章节介绍(04:45)
视频:4-2 主轴与交叉轴(07:47)
视频:4-3 换行与缩写(11:18)
视频:4-4 主轴对齐详解(08:26)
视频:4-5 交叉轴对齐详解(12:28)
视频:4-6 内联与块的上下左右居中布局(12:10)
视频:4-7 不定项居中布局(08:20)
视频:4-8 均分列布局(09:00)
视频:4-9 子项分组布局(07:43)
视频:4-10 flex-grow扩展比例(11:13)
视频:4-11 flex-shrink收缩比例(12:34)
视频:4-12 flex-basis及flex缩写(14:17)
视频:4-13 等高布局(07:00)
视频:4-14 两列与三列布局(08:29)
视频:4-15 Sticky Footer布局(04:30)
视频:4-16 溢出项布局(06:19)
视频:4-17 综合案例一(Swiper轮播图)(19:23)
视频:4-18 综合案例二(知乎导航)(24:59)
视频:4-19 章节总结(02:47)

第5章 grid网格布局

视频:5-1 章节介绍(04:36)
视频:5-2 定义网格及fr单位(08:48)
视频:5-3 合并网格及网格命名(08:57)
视频:5-4 网格间隙及简写(06:13)
视频:5-5 网格对齐方式及简写(08:35)
视频:5-6 显式网格与隐式网格(13:31)
视频:5-7 基于线的元素放置(16:28)
视频:5-8 repeat()与minmax()(12:59)
视频:5-9 比定位更方便的叠加布局(08:08)
视频:5-10 多种组合排列布局(05:02)
视频:5-11 栅格布局(08:35)
视频:5-12 容器自适应行列布局(07:11)
视频:5-13 综合案例一(百度热词风云榜)(22:46)
视频:5-14 综合案例二(小米商品导航菜单)(22:30)
视频:5-15 章节总结(03:16)

第6章 移动端适配布局

视频:6-1 章节介绍(04:00)
图文:6-2 移动端概念及UI设计稿尺寸
视频:6-3 移动端rem布局原理解析(08:00)
视频:6-4 动态计算font-size(10:16)
视频:6-5 测量rem数值及插件使用(12:39)
视频:6-6 rem案例:网易移动端头部实现(13:56)
视频:6-7 rem案例:网易移动端导航实现(17:45)
视频:6-8 rem案例:网易移动端新闻列表实现(1)(10:35)
视频:6-9 rem案例:网易移动端新闻列表实现(2)(15:31)
视频:6-10 移动端vw布局及插件使用(06:40)
视频:6-11 vw案例:B站移动端头部实现(14:49)
视频:6-12 vw案例:B站移动端导航实现(17:43)
视频:6-13 vw案例:B站移动端视频列表实现(15:35)
视频:6-14 章节总结(03:26)

第7章 响应式布局

视频:7-1 章节介绍(04:56)
视频:7-2 媒体查询语法详解(12:18)
视频:7-3 媒体查询的编写位置及顺序(08:52)
视频:7-4 响应断点(阈值)的设定(07:19)
视频:7-5 响应式栅格系统(11:19)
视频:7-6 响应式交互实现(08:25)
图文:7-7 响应式框架bootstrap
视频:7-8 响应式案例:博客头部实现(06:21)
视频:7-9 响应式案例:博客导航实现(15:00)
视频:7-10 响应式案例:博客文章列表实现(15:09)
视频:7-11 响应式案例:博客辅助列表实现(11:50)
视频:7-12 响应式案例:博客尾部实现(11:33)
视频:7-13 章节总结(03:10)

第8章 综合实战 Ant Design Pro 管理系统

视频:8-1 章节介绍(02:51)
图文:8-2 8-2 CSS文件划分及功能分类
图文:8-3 8-3 CSS方法论及样式规范
视频:8-4 实战项目:框架搭建(11:53)
视频:8-5 实战项目:侧边栏结构编写(08:32)
视频:8-6 实战项目:侧边栏样式编写(13:48)
视频:8-7 实战项目:侧边栏列表交互(08:48)
视频:8-8 实战项目:侧边栏折叠交互(09:18)
视频:8-9 实战项目:主体头部尾部实现(11:47)
视频:8-10 实战项目:主体网格布局实现(17:40)
视频:8-11 实战项目:设置模块主题色实现(20:57)
视频:8-12 实战项目:设置模块切换按钮实现(07:53)
视频:8-13 实战项目:设置模块主题色交互(10:57)
视频:8-14 实战项目:设置模块切换按钮交互(18:53)
视频:8-15 实战项目:响应式内容及菜单实现(18:28)
视频:8-16 章节总结(03:07)

第9章 课程福利加餐

视频:9-1 横向瀑布流布局-1(13:34)
视频:9-2 竖向瀑布流布局-2(19:11)
视频:9-3 视觉差布局原理解析(13:25)
视频:9-4 视觉差布局案例实现-1(16:13)
视频:9-5 视觉差布局案例实现-2(13:27)
图文:9-6 文字环绕布局
前端主流布局系统进阶与实战章节目录

慕课网实战 – 前端主流布局系统进阶与实战视频教程课程百度云网盘分享下载

隐藏内容

此处内容需要权限查看

  • 普通用户特权:12积分
  • 会员用户特权:免费
  • 永久会员用户特权:免费推荐

试看部分

***此处内容评论后可见***

温馨提示:此处为隐藏内容,需要评论或回复留言后可见

评论查看

发表评论

后才能评论

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。

最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或联络我们。

对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。

如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理

源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源