响应式Web设计：CSS实践（四）1.模块介绍与网站布局最受欢迎的网站布局，永远不会过时| Adobe XD创意 2.

模块8：响应式CSS布局

1.模块介绍与网站布局

网站布局是一种定义网站结构的模式（或框架）。它的作用是为网站的所有者和用户构建网站上的信息。它为网页内的导航提供了清晰的路径，并将网站中最重要的元素放在前面和中心。

现在在GOOGLE上搜索 "网站布局"，看看不同的网站布局，如单栏、分屏、不对称、卡片网格、杂志、方框、固定侧边栏、特色图片、F型布局、Z型布局、策划视觉等。你只需从这里获得一些想法。你不需要深入了解它，因为有网页设计师/UI-UX设计师 可以做到这一点。

最受欢迎的网站布局，永远不会过时| Adobe XD创意

2.Flexbox, Flex Direction Justify Content Align Items

在Flexbox 布局模块之前，有四种布局模式：1.Block，用于网页中的章节；2.Inline，用于文本；3.Table，用于二维表格数据；4.Positioned，用于元素的明确位置

灵活盒布局 模块使设计一个灵活的响应式布局结构变得更加容易，无需使用浮动或定位。

要开始使用Flexbox模型，你需要首先定义一个柔性容器。通过将显示属性设置为flex，Flex容器就变得灵活了。Flex容器的属性有：flex-direction, flex-wrap , flex-flow, justify-content, align-items, align-content。

当项目没有使用主轴（**水平方向）**上的所有可用空间时，justify-cont ent属性会对齐柔性容器的项目。

justify-content：flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit。

正当化内容的不同值

align-items 属性指定了柔性容器内项目的默认对齐方式。(垂直的)

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit。

所以，想一想你有一个用例，菜单将被固定在一边，另一边包含一个将是灵活的盒子（可根据窗口调整大小）。

该用例的解决方案

在这方面，容器应该设置**{display: flex;}，之后，第二个盒子应该有{flex-grow:1}.你可以用{order:1或顺序。2}**，如果你喜欢的话。

3.使用Flexbox创建登录表格和灵活的 "导航"。

在一个表单中创建两个输入字段和一个按钮，并将它们包围在一个部分中。将栏目和表单的显示方式都设置为Flex，并为输入和按钮赋予一些样式。同时，通过将表单的flex-direction设置为column，将section containers的justify-content设置为center，将它们推到屏幕的中心。现在，在body的
里面添加一个**部分。现在添加创建两个，并** 在第一个中添加一些导航链接 ，在第二个中添加两个图标（form font-awesome）。

登录表格的HTML和CSS

输出

将
的显示方式改为flex ，因为现在你要将这两部分分开，并将它们推向屏幕的一侧。所以，为此要设置**{justify-content: spaced-between}**。

BOOM!你就完成了。

4.CSS Grid Layout模板的栏目网格间隙

CSS网格布局模块提供了一个基于网格的布局系统，有行有列，使得设计网页时不必使用浮动和定位。一个 网格布局由一个父元素，和一个或多个子元素组成。当一个HTML元素的 显示属性被设置为grid或inline-grid时，它就成为一个网格容器 。

FlexBox Vs Grid

grid-template-columns属性定义了你的网格布局中的列数，它可以定义每列的宽度。它也可以用来指定列的大小（宽度）。

现在，搜索**"CSS网格入门 "**并掌握一些知识。

5.使用CSS网格和FlexBox创建日历

创建一个包含有序列表的日历容器，命名为calender ，其中的日名和日期都在**
标签中。之后，将日历容器的样式** 定为**{max-width: 200px; font:100% system-ui;}，然后将日历显示改为网格**，{grid-template-columns: repeat(7, 1fr);}。使用**{grid-column-start.}从第三列** 开始一天的工作**。3;}**

这里有一个Codepen，你可以随意玩玩。

medium.com/media/659e1…

再进一步，对标题和有序列表进行设计。在垂直和水平方向上对准它们。给**
添加一些填充物** ，使它们彼此分开。

6.使用媒体查询和FlexBox探索响应性

通过使用这个Emet快捷键**".menu-container>.food*8>img[src="images/healthy.jpg"]+h2{Price: $@100}+p>lorem50+br+button{Order Now}"**创建一个框架。

现在，弯曲 菜单容器，并在食品 div 上创建一个 3px 的实体边框。同时，将图像宽度改为75%。

现在，如果你改变边框的大小，你会注意到，这些div是有反应的，但在突然之间，如果窗口太小，那么一些div就不适合在窗口中，而被忽略了。所以，为了解决这个问题，你必须知道你设计网站的设备的断点（在GOOGLE上搜索**"CSS断点"），并使用Media Query**。你可以使用**@media (screen**)来编写特定的规则 ，其中可以设置屏幕尺寸（min-width: 700px; | max-width: 900px;）。现在，如果你调整你的窗口大小，你会注意到变化，根据窗口的大小，规则被应用。

使用Media Query和Flex-Wrap

但你只需使用**{flex-wrap: wrap;}** 这一灵活的功能，就可以非常容易地使同样的事情得到响应。现在，你的内容将根据窗口的大小被自动包起来。

7.使用相对位置和FlexBox创建一个相册

使用这个emmet快捷键**"section>h3{老虎相册}+.photo-album>.photo-frame*15>(.photo>img[src="Tiger.jpg"])+(.photo-detail>h3{老虎妈妈}+p>lorem30)创建一个框架"**

带输出的CSS代码

现在，开始对它们进行样式设计。目标是当鼠标悬停在照片上时，显示照片的细节，而且相册中的所有照片都应该是灵活的，并在窗口中。要做到这一点，需要对照片框架进行样式设计，并将其位置改为相对，同时将照片位置改为绝对，因为它应该在照片上方，将顶部改为0，最后将照片显示改为无。现在，为照片框创建一个伪 悬停类 ，并为照片细节编写规则，如 {display: block}并添加任何你想要的样式。现在，使照片集成为柔性，并设置 柔性包装：包装。

你现在都准备好了！！ 😀😀😀

8.在你的相册中应用过渡转换

为了在你的照片中应用一个很好的效果，当悬停时，你可以在图像- 细节出现时添加一个转换-过渡对，使其更有利可图。

只要在你的照片框架上添加一个悬停类，并为照片编写规则，如**{transform: scale(1.4); transition: transform 2s ease-in-out;}同时你要将.photo-frame类的溢出设置为隐藏** 。还有一些更多的变换效果，如旋转、倾斜等。