从设计到代码（第 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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。