教程演示🔗
你将会学到的
-
了解有关 flexbox 的一切及其实际工作原理
-
使用 flexbox 使用最少的代码快速轻松地构建高级响应式布局
-
使用 flexbox 构建菜单
-
使用先进的响应式布局构建一个完整的网站,例如(圣杯布局 – 等列布局 – 水平砌体布局)等等!
-
作为 Web 开发人员,提高您的工作效率并节省更多时间
-
使用 flexbox 构建照片库
要求
-
互联网连接
-
对 HTML 和 CSS 的基本理解
-
您选择的任何代码编辑器
说明
您厌倦了使用浮动然后清除这些浮动吗?
您是否厌倦了使用定位来实现您想要的布局,然后发现当您在不同的屏幕尺寸上查看时一切都崩溃了?
您想要一种轻松快速地创建复杂布局的有效方法吗?
您想仅使用简单的代码行使用 CSS 创建高级响应式布局吗?
如果是这样,那么本课程适合您!
在本课程中,您将学习在未来的项目中开始使用 flexbox 所需的一切知识
我们将从学习和理解 flexbox 的工作原理开始,因为我认为如果你在使用 flexbox 之前可能会被新属性的数量淹没,我们有大约 11 或 12 个新属性,平均有 4 个潜在值,所以它可以是有点难以抗拒一切,
但在本课程中,您将清楚地了解每个属性的工作原理以及如何使用特定属性以不同方式控制布局
我相信在理解和学习 flexbox 的所有属性之后通过这样做来学习,我们将亲自动手,我们将从构建两个菜单开始,一个简单的单级菜单和一个高级菜单,在本课程的这一部分你将看到你一步一步在行动中学到的每一件事
在构建这门课程时,我想到的一件事是我希望这门课程从其他课程中脱颖而出,所以我注意到在所有其他 flexbox 课程中,你只会一直在屏幕上看到一些框,而讲师是只是使用 flexbox 移动它们,最后,课程将结束,你会变得像“好的,这很好,我学习了 flexbox 的基础知识,但现在呢?我如何在现实世界的例子中使用这些知识”
因为毕竟网页不是一些四处移动的盒子,对吧?这正是我创建课程最后一部分的原因。
因此,在最后一节中,我们将从头开始构建一个我为您构建的完整项目,在构建该项目时,我的主要关注点是如何实现我们将在该项目中学习的有关 flexbox 的每个属性,以便您对我们可以在现实生活中使用这些属性做什么!
所以在这个项目中,您将学习如何创建许多高级不同的布局,例如
1 – 圣杯布局
2 – 您将学习如何轻松地使元素垂直居中
3 – 如何使用 flexbox 轻松构建具有相同高度的帖子文章
4 – 非常高级的卡片布局,如果没有 flexbox 几乎不可能实现
5 – 非常有趣的水平砌体布局
此课程面向哪些人:
- 想要提高技能的网页设计师和开发人员
- 希望能够轻松快速地构建高级布局的前端 Web 开发人员
- 想要构建响应式布局而不必使用 bootstrap 等框架的 Web 开发人员
- 希望以更简单的方式创建网站布局的经验丰富的 Web 开发人员
- 任何想要提高生产力并节省时间的网络开发人员