掌握 Flexbox 和 CSS 网格 – 现代实用指南
使用 CSS Flexbox、CSS Grid 和 HTML、CSS 构建现代且响应式的前端 Web 布局。掌握 Flexbox 和网格
讲师:Pamch Tutor
口袋资源独家Udemy付费课程,独家中英文字幕,配套资料齐全!
用不到1/10的价格,即可享受同样的高品质课程,且可以完全拥有,随时随地都可以任意观看和分享。
你将学到什么
- 您将学习如何使用 CSS Grid 和 Flexbox 创建各种布局样式
- 您将能够使用 grid-template-areas 创建网格布局
- 您将学习如何使用 CSS Grid 和 Flexbox 创建相等和不相等的列/行
- 您将熟练掌握如何使用 Flex 和网格设计 MASONRY 布局
- 您将学习如何在 CSS Grid 中使用小数单位 (fr)
- 您将掌握如何使用 Flex-basis 创建 Flex 布局
- 您将熟练掌握如何使用隐式网格和显式网格
- 您将学习如何使用 CSS 媒体查询使您的网页设计适合移动设备且响应灵敏。
- 您将学习如何使用 CSS Grid 和 Flexbox 创建图片库和视频库
- 您将能够对齐和调整网格项目和弹性项目
- 您将了解网格中自动填充和自动调整之间的区别
- 您将掌握如何在网格中使用任意网格线名称
- 您将能够逐步使用所有 Flexbox 属性和所有网格属性
- 您将使用 Flexbox 和网格创造性地创建相同的网页布局
要求
- 您将需要一个免费的基本文本编辑器 – 例如 sublime text、Visual Studio Code、括号
- 您应该了解如何使用基本 CSS 和 HTML 进行编码
描述
本课程旨在让您成为世界一流的前端 网页设计师,并以CSS Grid 和 Flexbox作为工具。凭借您从本课程中学到的技能,您可以自豪地从头到尾创建任何网站布局设计。这是一个保证,因为这门Flexbox 和 CSS 网格 课程是现代的、优质的、解释充分且结构良好的。
你将学到什么。
您将能够逐步使用所有Flexbox 属性和所有网格属性
您将学习如何使用CSS Grid 和 Flexbox创建各种布局设计
您将学习如何在 CSS Grid 中使用小数单位 (fr)
您将能够使用grid-template-areas创建响应式 网格布局
您将熟练掌握如何使用Flex和网格设计砖石布局
您将熟练掌握如何使用隐式网格和显式网格
您将了解网格中自动填充和自动调整之间的区别
您将能够对齐和调整 网格项目和弹性项目
您将学习如何使用CSS Grid 和 Flexbox创建图片库和视频库
您将学习如何使用CSS Grid 和 Flexbox创建相等和不相等的列/行
您将掌握如何在网格中使用任意网格线名称
您将能够创建导航菜单和大型菜单。您将学习如何将图像和视频添加到大型菜单
您将创造性地了解如何使用 CSS 媒体查询使您的网页设计适合移动设备且响应灵敏。这意味着移动优先的方法。
您将学习如何导入很棒的字体,以便将其合并到您的设计中
您将彻底学习如何导入 Google 字体作为字体系列的一部分
您将能够将一些CSS 属性应用到您的布局设计中,例如边距、填充、位置、边框属性等。
本课程适合谁:
- 这个 Flexbox 和网格课程适合那些想要成为 Flexbox 和 CSS 网格布局技术专家的人,从绝对的初学者到绝对的专业人士
- 具有纯 CSS 基础知识的创意人士