从设计到代码（第 3 天）
从设计到代码（第 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 版权协议，转载请附上原文出处链接和本声明
浙公网安备 33010602011771号