某课网-前端主流布局系统进阶与实战（9章完结）

2021年8月23日 241条评论 13,173次阅读

资源简介

文章目录

实现精美页面是前端工程师的核心能力之一，CSS布局技术是实现精美页面的核心技术，但CSS布局好入门，难精通。本课将围绕前端4大主流布局，通过大量的实际案例，带你边学习，边实操，让你系统掌握CSS布局进阶技术，轻松解决各种精美页面布局难题。

资源目录

\068-527-前端主流布局系统进阶与实战
├第1章课程介绍(了解本课程必看)
│  ├1-1课程导学.mp4
│  ├1-2常见布局展示及技术分析.mp4
├第2章CSS还原UI设计
│  ├2-1章节简介.mp4
│  ├2-4Photoshop还原UI设计.mp4
│  ├2-5蓝湖App快速标注信息.mp4
│  ├2-6PxCook自动标注工具.mp4
│  ├2-7imgcook设计稿智能平台.mp4
│  ├2-8章节总结.mp4
├第3章布局中的尺寸与位置
│  ├3-14章节总结.mp4
│  ├3-1章节介绍.mp4
│  ├3-2CSS盒模型的组成.mp4
│  ├3-3块级盒子与内联盒子.mp4
│  ├3-4自适应盒模型的特性.mp4
│  ├3-5标准盒模型与怪异盒模.mp4
│  ├3-6浮动样式详解.mp4
│  ├3-7浮动特性注意点.mp4
│  ├3-8定位样式详解.mp4
│  ├3-9定位特性注意点.mp4
├第4章flex弹性布局
│  ├4-10flex-grow扩展比例.mp4
│  ├4-11flex-shrink收缩比例.mp4
│  ├4-12flex-basis及flex缩写.mp4
│  ├4-13等高布局.mp4
│  ├4-14两列与三列布局.mp4
│  ├4-15StickyFooter布局.mp4
│  ├4-16溢出项布局.mp4
│  ├4-17综合案例一(Swiper轮播图).mp4
│  ├4-18综合案例二(知乎导航).mp4
│  ├4-19章节总结.mp4
│  ├4-1章节介绍.mp4
│  ├4-2主轴与交叉轴.mp4
│  ├4-3换行与缩写.mp4
│  ├4-4主轴对齐详解.mp4
│  ├4-5交叉轴对齐详解.mp4
│  ├4-6内联与块的上下左右居中布局.mp4
│  ├4-7不定项居中布局.mp4
│  ├4-8均分列布局.mp4
│  ├4-9子项分组布局.mp4
├第5章grid网格布局
│  ├5-10多种组合排列布局.mp4
│  ├5-11栅格布局.mp4
│  ├5-12容器自适应行列布局.mp4
│  ├5-13综合案例一(百度热词风云榜).mp4
│  ├5-14综合案例二(小米商品导航菜单).mp4
│  ├5-15章节总结.mp4
│  ├5-1章节介绍.mp4
│  ├5-2定义网格及fr单位.mp4
│  ├5-3合并网格及网格命名.mp4
│  ├5-4网格间隙及简写.mp4
│  ├5-5网格对齐方式及简写.mp4
│  ├5-7基于线的元素放置.mp4
│  ├5-8repeat()与minmax().mp4
│  ├5-9比定位更方便的叠加布局.mp4
├第6章移动端适配布局
│  ├6-10移动端vw布局及插件使用.mp4
│  ├6-11vw案例：B站移动端头部实现.mp4
│  ├6-12vw案例：B站移动端导航实现.mp4
│  ├6-13vw案例：B站移动端视频列表实现.mp4
│  ├6-14章节总结.mp4
│  ├6-1章节介绍.mp4
│  ├6-3移动端rem布局原理解析.mp4
│  ├6-5测量rem数值及插件使用.mp4
│  ├6-6rem案例：网易移动端头部实现.mp4
│  ├6-7rem案例：网易移动端导航实现.mp4
│  ├6-8rem案例：网易移动端新闻列表实现(1).mp4
│  ├6-9rem案例：网易移动端新闻列表实现(2).mp4
├资料代码
│  ├(1.1)--1-3软件安装与课件获取方式.pdf
│  ├(1.2)--1-4CSS发展史与CSS模块划分.pdf
│  ├(2.1)--2-2长度单位与颜色分类.pdf
│  ├(2.2)--2-3UI设计图的源文件种类.pdf
│  ├(3.1)--3-10详解display属性.pdf
│  ├(3.2)--3-11书写模式与逻辑属性.pdf
│  ├(3.3)--3-12BFC块级格式化上下文.pdf
│  ├(3.4)--3-13标签默认样式及清除.pdf
│  ├(6.1)--6-2移动端概念及UI设计稿尺寸.pdf
│  ├5-16 练习题.html
│  ├5-17.html
│  ├6-15 【练习题】测量个人中心页的css数值.html
│  ├6-16 测试题.html
│  ├source_code-master.zip

——/计算机教程/01MOOC/068-527前端主流布局系统进阶与实战（完结）/
├──第1章 课程介绍(了解本课程必看)  
|   ├──1-1 课程导学.mp4  53.17M
|   ├──1-2 常见布局展示及技术分析.mp4  44.83M
|   ├──1-3 软件安装与课件获取方式.pdf  126.53kb
|   └──1-4 CSS发展史与CSS模块划分.pdf  296.11kb
├──第2章 CSS还原UI设计  
|   ├──2-1 章节简介.mp4  5.15M
|   ├──2-2 长度单位与颜色分类.pdf  148.58kb
|   ├──2-3 UI设计图的源文件种类.pdf  438.80kb
|   ├──2-4 Photoshop还原UI设计.mp4  50.59M
|   ├──2-5 蓝湖App快速标注信息.mp4  52.34M
|   ├──2-6 PxCook自动标注工具.mp4  49.55M
|   ├──2-7 imgcook设计稿智能平台.mp4  40.83M
|   └──2-8 章节总结.mp4  6.60M
├──第3章 布局中的尺寸与位置  
|   ├──3-1 章节介绍.mp4  6.64M
|   ├──3-10 详解display属性.pdf  231.67kb
|   ├──3-11 书写模式与逻辑属性.pdf  285.55kb
|   ├──3-12 BFC块级格式化上下文.pdf  164.29kb
|   ├──3-13 标签默认样式及清除.pdf  152.60kb
|   ├──3-14 章节总结.mp4  4.76M
|   ├──3-2 CSS盒模型的组成.mp4  98.00M
|   ├──3-3 块级盒子与内联盒子.mp4  72.32M
|   ├──3-4 自适应盒模型的特性.mp4  32.73M
|   ├──3-5 标准盒模型与怪异盒模.mp4  70.77M
|   ├──3-6 浮动样式详解.mp4  128.47M
|   ├──3-7 浮动特性注意点.mp4  44.18M
|   ├──3-8 定位样式详解.mp4  81.34M
|   └──3-9 定位特性注意点.mp4  51.45M
├──第4章 flex弹性布局  
|   ├──4-1 章节介绍.mp4  6.99M
|   ├──4-10 flex-grow扩展比例.mp4  65.46M
|   ├──4-11 flex-shrink收缩比例.mp4  72.90M
|   ├──4-12 flex-basis及flex缩写.mp4  81.32M
|   ├──4-13 等高布局.mp4  52.19M
|   ├──4-14 两列与三列布局.mp4  60.51M
|   ├──4-15 Sticky Footer布局.mp4  38.26M
|   ├──4-16 溢出项布局.mp4  65.73M
|   ├──4-17 综合案例一(Swiper轮播图).mp4  109.90M
|   ├──4-18 综合案例二(知乎导航).mp4  144.47M
|   ├──4-19 章节总结.mp4  4.27M
|   ├──4-2 主轴与交叉轴.mp4  46.82M
|   ├──4-3 换行与缩写.mp4  67.43M
|   ├──4-4 主轴对齐详解.mp4  47.70M
|   ├──4-5 交叉轴对齐详解.mp4  75.16M
|   ├──4-6 内联与块的上下左右居中布局.mp4  78.95M
|   ├──4-7 不定项居中布局.mp4  52.21M
|   ├──4-8 均分列布局.mp4  57.75M
|   └──4-9 子项分组布局.mp4  54.94M
├──第5章 grid网格布局  
|   ├──5-1 章节介绍.mp4  10.06M
|   ├──5-10 多种组合排列布局.mp4  36.98M
|   ├──5-11 栅格布局.mp4  71.75M
|   ├──5-12 容器自适应行列布局.mp4  48.82M
|   ├──5-13 综合案例一(百度热词风云榜).mp4  127.26M
|   ├──5-14 综合案例二(小米商品导航菜单).mp4  130.44M
|   ├──5-15 章节总结.mp4  5.10M
|   ├──5-2 定义网格及fr单位.mp4  71.39M
|   ├──5-3 合并网格及网格命名.mp4  52.68M
|   ├──5-4 网格间隙及简写.mp4  37.49M
|   ├──5-5 网格对齐方式及简写.mp4  50.43M
|   ├──5-6 显式网格与隐式网格.mp4  78.01M
|   ├──5-7 基于线的元素放置.mp4  94.84M
|   ├──5-8 repeat()与minmax().mp4  76.91M
|   └──5-9 比定位更方便的叠加布局.mp4  63.82M
├──第6章 移动端适配布局  
|   ├──6-1 章节介绍.mp4  11.31M
|   ├──6-10 移动端vw布局及插件使用.mp4  56.48M
|   ├──6-11 vw案例：B站移动端头部实现.mp4  83.90M
|   ├──6-12 vw案例：B站移动端导航实现.mp4  98.90M
|   ├──6-13 vw案例：B站移动端视频列表实现.mp4  90.77M
|   ├──6-14 章节总结.mp4  7.28M
|   ├──6-2 移动端概念及UI设计稿尺寸.pdf  236.94kb
|   ├──6-3 移动端rem布局原理解析.mp4  65.05M
|   ├──6-4 动态计算font-size.mp4  69.03M
|   ├──6-5 测量rem数值及插件使用.mp4  68.48M
|   ├──6-6 rem案例：网易移动端头部实现.mp4  81.24M
|   ├──6-7 rem案例：网易移动端导航实现.mp4  103.06M
|   ├──6-8 rem案例：网易移动端新闻列表实现(1).mp4  60.27M
|   └──6-9 rem案例：网易移动端新闻列表实现(2).mp4  88.20M
├──第7章 响应式布局  
|   ├──7-1 章节介绍.mp4  15.67M
|   ├──7-10 响应式案例：博客文章列表实现.mp4  88.00M
|   ├──7-11 响应式案例：博客辅助列表实现.mp4  73.13M
|   ├──7-12 响应式案例：博客尾部实现.mp4  70.37M
|   ├──7-13 章节总结.mp4  5.79M
|   ├──7-2 媒体查询语法详解.mp4  79.23M
|   ├──7-3 媒体查询的编写位置及顺序.mp4  53.08M
|   ├──7-4 响应断点(阈值)的设定.mp4  63.48M
|   ├──7-5 响应式栅格系统.mp4  69.47M
|   ├──7-6 响应式交互实现.mp4  63.17M
|   ├──7-7 响应式框架bootstrap.pdf  168.12kb
|   ├──7-8 响应式案例：博客头部实现.mp4  34.33M
|   └──7-9 响应式案例：博客导航实现.mp4  85.82M
├──第8章 综合实战 Ant Design Pro 管理系统  
|   ├──8-1 章节介绍.mp4  8.92M
|   ├──8-10 实战项目：主体网格布局实现.mp4  103.80M
|   ├──8-11 实战项目：设置模块主题色实现.mp4  118.56M
|   ├──8-12 实战项目：设置模块切换按钮实现.mp4  45.24M
|   ├──8-13 实战项目：设置模块主题色交互.mp4  59.98M
|   ├──8-14 实战项目：设置模块切换按钮交互.mp4  109.15M
|   ├──8-15 实战项目：响应式内容及菜单实现.mp4  108.98M
|   ├──8-16 章节总结.mp4  5.19M
|   ├──8-2 8-2 CSS文件划分及功能分类.pdf  180.64kb
|   ├──8-3 8-3 CSS方法论及样式规范.pdf  214.40kb
|   ├──8-4 实战项目：框架搭建.mp4  72.15M
|   ├──8-5 实战项目：侧边栏结构编写.mp4  47.50M
|   ├──8-6 实战项目：侧边栏样式编写.mp4  78.34M
|   ├──8-7 实战项目：侧边栏列表交互.mp4  48.59M
|   ├──8-8 实战项目：侧边栏折叠交互.mp4  48.42M
|   └──8-9 实战项目：主体头部尾部实现.mp4  66.49M
├──第9章 课程福利加餐  
|   ├──9-1 横向瀑布流布局-1.mp4  81.38M
|   ├──9-2 竖向瀑布流布局-2.mp4  154.11M
|   ├──9-3 视觉差布局原理解析.mp4  87.57M
|   ├──9-4 视觉差布局案例实现-1.mp4  97.34M
|   ├──9-5 视觉差布局案例实现-2.mp4  77.92M
|   └──9-6 文字环绕布局.pdf  209.77kb
└──资料  
|   └──source_code-master.zip  40.41M