从设计到代码（第 3 天）

我最近正在开发一门课程，名为 三周内完成三个网页设计 .最初它是一个为期 3 周的研讨会材料，旨在成为一个包含许多实践的动手密集型研讨会。主要目标是教没有太多开发经验的人使用 HTML 和 CSS 来重现专业的设计模型——这就是为什么它被称为从设计到代码。

而且我发现即使是工作室中最简单的项目也太长了，所以我决定将它分成三个并形成一个系列。如果您想从一开始就学习该主题，请跟随。

这是 4 部分教程中的第 3 部分，如果您错过了，请查看 第 1 天 和 第 2 天 .

实施英雄横幅

接下来，我们可以看看英雄横幅部分。几乎每个网站都有这么宽敞的版块，通常有大字体、醒目的图片和一个按钮（Call To Action）来引导用户采取行动（比如，点击它）。

根据模型，我们可以将整个区域分为左右两部分。标题和描述性文字在左侧，后面是号召性用语按钮。右侧稍微复杂一些，包含一张图片和一些位于图片顶部的描述和评级。

如上所述，让我们先编写 HTML 内容。值得注意的是，在编写 HTML 时，我们必须假设页面无需任何 CSS 即可使用。标题应该是可读的，超链接应该是可点击的，并且可以将用户导航到他们需要的新地址等。

Hero Section

在这里，您可以使用 div 或者 部分 作为该部分的容器标签。我通常更喜欢 部分 作为内容的容器，以及 div 作为辅助标签。

另外，不要使用 div 除非必要。但是，通常，两者在许多情况下可以互换使用。

在任何样式之前，这部分看起来像这样：

Hero Section without CSS

使两者 块级 元素 简短的 和 媒体 横向排列，我们应该使用什么方法？没错，像导航栏一样，我们可以设置容器 英雄节 成为一个 柔性 容器：

 .英雄节{  
 宽度：80%；  
 保证金：2rem auto；  
 显示：弯曲；  
 对齐项目：居中；  
 }

横向排列很好，但两部分的宽度似乎不均匀。图片部分占用较多空间，文字向左推。我们需要它们是半分布的：

这时，我们需要使用 弹性：1 容器中两个元素的规则并设置宽度 100% 为图像而不是默认宽度，以便图像将填充其容器的可用宽度（ .game-cover ):

 .hero-section>section {  
 弹性：1；  
 } .game-cover img {  
 宽度：100%；  
 }

注意这里有一个新的 CSS 语法： > .此符号表示所选的直接子节点 .hero-section .如果没有这个直接操作符， .hero-section 部分 会选择所有 部分 里面 .hero-section ，不管它有多深。

Evenly distributed

这 弹性：1 这里也需要一些额外的解释。这是一个典型的 CSS 缩写，它的完整形式是：

 弹性增长：1；  
 弹性收缩：1；  
 弹性基础：0%；

弹性成长 是增长因子，即如何将剩余空间分配给弹性容器中的元素。仅当所有元素本身都小于容器大小时才有效。 弹性收缩 指收缩系数，即当所有flex元素的宽度超过容器的宽度时，每个元素应该按什么比例收缩。 弹性基础 指弹性元素的默认大小。

弹性布局

我们可以通过一个具体的例子来说明这些属性之间的关系。

Flex demo HTML

一开始，我们设置 容器 作为一个弹性容器，以及它们的子节点 盒子 是自动的 柔性 元素。但是由于每个单词的长度不一样，所以四个框的排列是这样的：

Flex with default settings

 。容器 {  
 显示：弯曲；  
 对齐项目：居中；  
 间隙：1rem；  
 } 。盒子 {}

这是因为，默认情况下，flex 元素的 CSS 设置为 弹性：0 ， IE：

 弹性增长：0；  
 弹性收缩：1；  
 弹性基础：0%；

我们设置 弹性成长 在所有 div 中 盒子 class 为 1，这意味着如果容器有足够的空间，它们具有相同的增长因子：

 。盒子 {  
 弹性增长：1；  
 弹性收缩：1；  
 弹性基础：0%；  
 }

此时，它们将填满整个容器并平均分配空间：

Flex:1 for items — distributed evenly

如果我们为某些元素设置不同的增长因子：

 .box:nth-child(1) {  
 背景颜色：浅绿色；  
 弹性增长：2；  
 } .box:nth-child(4) {  
 弹性增长：2；  
 背景颜色：浅绿色；  
 }

那么当容器空间足够的时候，第一个和第四个元素会比其他元素增长得更快（因为它们有很大的 弹性成长 部分）。

flex-grow

弹性收缩 与 弹性成长 .当 flex 容器的宽度小于所有 flex 项的宽度之和时， 弹性收缩 定义每个元素收缩的比率。

 。盒子 {  
 弹性增长：1；  
 弹性收缩：1；  
 弹性基础：50%；  
 } .box:nth-child(2) {  
 背景颜色：浅绿色；  
 弹性收缩：2；  
 } .box:nth-child(3) {  
 背景颜色：浅绿色；  
 弹性收缩：2；  
 }

例如，在本例中，我们设置 弹性基础 到 50%，每个 flex 元素从父元素的 50% 收缩或拉伸。因为容器中有四个元素，总长度超过了容器，所以 弹性收缩 生效，结果是第二个和第三个元素比其他两个收缩得更快，因此更小：

flex-shrink

打磨主页横幅

好吧，我们的横幅现在有一半的布局，然后我们需要做一些排版。一般来说，我们可以通过不同的字体、颜色等视觉元素来强调一些元素，使主题更加醒目，页面更加平衡。

 h1 {  
 字体大小：48px；  
 字体粗细：粗体；  
 } . 简介 p {  
 字体粗细：较轻；  
 边距：16px 0；  
 }

为了自定义按钮和导航栏，我们使用颜色选择器从模型中获取紫色值： #4A43EB .

 .button-secondary {  
 外观：无；  
 填充：8px 16px；  
 边框半径：16px；  
 边框：无；  
 背景颜色：#4A43EB；  
 白颜色;  
 }

我们用 外观：无 在这里，重置浏览器的默认样式并为其添加圆角、背景颜色和字体颜色。

The left side of Hero Section

对于横幅的右侧，我们注意到评级内容覆盖在模型中的图像上。这种效果 级联 内容需要一点解释。

浏览器在渲染HTML的时候，是按顺序排列元素的，并没有叠加（毕竟叠加就是遮挡，也就是有些内容是看不到的）。如果我们需要一些元素 跳出来 的排列过程，并释放原来属于它的位置，然后我们需要设置元素的 位置 至 绝对 .

这样，元素就会跳出正常的文档流，并将定位留给开发人员。这时候，我们可以使用 最佳 , 剩下 , 底部 和 正确的 控制元素的绝对定位，默认坐标原点为屏幕左上角。

但大多数时候，我们并不想把屏幕的左上角作为原点，而是作为某个元素。在 CSS 中，我们可以设置 位置 一个元素的 相对的 以便其子节点的原点位于左上角（而不是屏幕的左上角）。

在这个例子中，我们想使用 。游戏结束 作为基线，然后将描述文本放在其顶部：

 .game-cover {  
 位置：相对；  
 } .media .title {  
 位置：绝对；  
 底部：16px；  
 左：16px； 白颜色;  
 字体大小：14px；  
 字体粗细：较轻；  
 } .media span.rating {  
 左边距：8px；  
 }

最后，我们对图像的边角进行了一点调整，使实现更接近模型：

 .game-cover img {  
 边框半径：32px；  
 }

这会产生一个带有圆角的图像和一个半径为 32 像素的圆：

Final Result of Hero Section

恭喜，我们已经完成了页面的第二部分。在这里我们了解到了一些细节 柔性 布局来实现元素在 flex 容器中的均匀分布，我们还学会了使用绝对定位（ 位置：绝对 ) 和相对定位 ( 位置：相对 ) 使元素分层，使其在视觉上更令人愉悦。

这就是我们第 3 天的全部内容。接下来，我们将完成整个设计，看看我们如何发布该网站，以便您可以与您的朋友分享结果。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/1540/21342917

标签：容器,flex,收缩,代码,元素,弹性,设计,我们
来源： https://www.cnblogs.com/amboke/p/16636660.html