其他分享
首页 > 其他分享> > 从设计到代码(第 3 天)

从设计到代码(第 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 版权协议,转载请附上原文出处链接和本声明

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

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