内容
- 01.进行设置
- 02.完成HTML
- 03.探索Sass变量
- 04.调整身体样式
- 05.设置节标题的样式
- 06.使CTA脱颖而出
- 07.设置容器背景和屏幕
- 08.添加背景图片
- 09.添加过渡和悬停效果
- 10.移入JavaScript
- 11.添加和删除一个类
- 12.使其响应
您的目标网页是网站布局中的关键要素。这是介绍您的业务或所销售产品的第一个真正的机会，因此其设计至关重要。着陆页的设计目标是一个单一的目标，即号召性用语（CTA）。必须使用颜色和图像来补充号召性用语和用户体验。
- 请参阅适用于本教程的CodePen
在本教程中，我们将逐步介绍如何为虚构的时尚品牌构建引人入胜的目标网页。它将以分屏设计为中心，该设计具有悬停时发生的大图像和动画过渡。此页面上将有两个清晰的号召性用语按钮，我们将使用HTML，Sass进行样式设置以及使用ES6语法的淡淡JavaScript（请记住以确保您的网站托管适合您的网站需求）。太复杂了？创建不需要代码的网站，请尝试使用简单的网站构建器。
01.进行设置
如果您使用的是CodePen，请确保在“笔”设置中将CSS设置为“ SCSS”。您可以通过以下方法进行更改：点击设置标签，选择“ CSS”，然后在下拉选项中将CSS预处理器更改为SCSS。
然后，我们可以开始添加HTML。我们将在容器类中包装一个名为“ left”的部分和一个名为“ right”的部分，两个部分都指定为“ screen”类。
div>部分> / section>部分> / section> / div>
02.完成HTML
要最终确定我们的HTML，我们将使用 11 标签。在此之下，我们需要添加一个按钮，如果这是一个真实的项目，则该按钮将链接到另一个页面。我们将给这门课 按钮 保持事物的美观和简单。
div>部分> h1>男士时装/ h1>按钮> a href =“＃”>了解更多/ a> / button> / section>部分> h1>女士时装/ h1>按钮> a href =“＃”>了解更多/一个> /按钮> /部分>
03.探索Sass变量
我们所有人都喜欢Sass的一件事是使用变量。即使原生CSS变量获得了更多支持，我们也将通过使用Sass来确保一切安全。我们将这些放在我们的顶部 .scss，您可以选择所需的任何颜色，但是使用 ba 价值观将给我们带来更大的灵活性。
/ * *变量 * * / $ container-BgColor：＃444; $ left-bgColor：rgba（136，226，247，0.7）; $ left-button-hover：rgba（94，226，247，0.7）; $ right-bgColor：rgba（227，140，219，0.8）; $ right-button-hover：rgba（255，140，219，0.7）; $ hover-width：75％; $ small-width：25％; $ animateSpeed：1000ms;
04.调整身体样式
首先，我们将清除正文的所有默认填充和边距，然后将字体系列设置为Open Sans。这只会影响按钮，因此我们使用哪种字体都没关系。然后我们将宽度和高度设置为 100% 并确保X轴上溢出的所有内容都被隐藏。
html，正文{padding：0;保证金：0;字体系列：“ Open Sans”，sans-serif；宽度：100％;高度：100％;溢出-x：隐藏; }
05.设置节标题的样式
现在该为部分标题选择Google字体了-我们选择了Playfair Display。然后使用 翻译X 我们可以确保章节标题始终位于X轴的中心。
h1 {font-size：5rem;颜色：#fff;位置：绝对；左：50％；最高：20％；转换：translateX（-50％）;空白：nowrap;字体系列：“ Playfair Display”（衬线）； }
06.使CTA脱颖而出
我们的按钮将充当我们的号召性用语，因此这些按钮必须大而醒目，并且位置必须易于点击。两个按钮都将具有白色边框和有趣的过渡效果。两个按钮的默认样式将相同，但是我们将在悬停时更改其颜色。
.button {display：block;位置：绝对；左：50％；最高：50％；高度：2.6rem; padding-top：1.2rem;宽度：15雷姆;文本对齐：居中；白颜色;边框：3px实线#fff; border-radius：4px;字体粗细：600；文本转换：大写；文字修饰：无；转换：translateX（-50％）;过渡：所有0.2秒；
主按钮将具有很好的简单悬停效果，并且我们将使用为颜色指定的Sass变量，该变量将与页面背景颜色相似。
.screen.left .button：hover {背景颜色：$ left-button-hover;边框颜色：$ left-button-hover; } .screen.right .button：hover {背景颜色：$ right-button-hover;边框颜色：$ right-button-hover;
07.设置容器背景和屏幕
容器类将充当我们的页面包装器，我们将其位置设置为相对，仅是因为我们想将屏幕定位为绝对定位。我们将为容器提供默认的背景颜色，但是当然不会出现，因为我们将为两种屏幕背景设置不同的颜色。
.container {位置：相对；宽度：100％;高度：100％;背景：$ container-BgColor; .screen {位置：绝对；宽度：50％;高度：100％;溢出：隐藏； }}
08.添加背景图片
左右两部分都会显示一张图片，您可以从Unsplash，Pixel或Pexels（我在本教程中使用过）等网站上找到免版税的库存图片。为了简化操作，我使用了免费的图片托管和共享服务imgbb，可以将其链接到CSS中。
.screen.left {left：0;背景：url（’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’）中心不重复；背景尺寸：封面； ＆：在{position：absolute;之前；内容： ””;宽度：100％;高度：100％;背景：$ left-bgColor; }}
页面的右侧还将使用imgbb显示背景图像，我们将背景色设置为粉红色。同样，我们将背景尺寸设置为 覆盖。这将使我们能够覆盖整个包含元素，在我们的案例中是 。屏幕 班级。
.screen.right {right：0;背景：url（’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’）中心不重复；背景尺寸：封面； ＆：在{position：absolute;之前；内容： ””;宽度：100％;高度：100％;背景：$ right-bgColor; }}
09.添加过渡和悬停效果
我们在两个屏幕上的悬停效果的动画速度将由一个过渡来控制，该过渡将保留我们变量的值 $ animateSpeed，即1000毫秒（一秒）。然后，我们通过给动画一些缓和来完成操作，这是一种轻松的进出过程，这将有助于使我们更流畅地播放动画。
.screen.left，.screen.right，.screen.right：之前，.screen.left：之前{过渡：$ animateSpeed全部缓入缓出； }
现在我们要发生的是，当您将鼠标悬停在左侧屏幕上时，将使用JavaScript将一个类添加到该部分中（我们将在以后的步骤中进行编写）。当添加此类时，该屏幕将拉伸到我们指定的变量宽度的任意值（即75％），然后将右侧设置为较小的宽度变量（25％）。
.hover-left .left {width：$ hover-width; } .hover-left .right {width：$ small-width; } .hover-left .right：before {z-index：2; }
这与左侧完全相同，左侧将使用JavaScript在鼠标悬停时添加一个新类，右侧屏幕将相应地伸展。我们还需要确保 索引 设定为 2 因此CTA按钮变得更加突出。
.hover-right .right {width：$ hover-width; } .hover-right .left {width：$ small-width; } .hover-right .left：before {z-index：2; }
10.移入JavaScript
我们将使用一些普通的JavaScript来帮助我们添加和删除CSS类，并且还将使用ES6的一些新功能。我们需要做的第一件事是声明一些常量。
因为我们将使用 文档 不止一次，我们将设置一个常量变量 doc 并将文档存储在其中，这样我们就可以使“ document”一词简洁明了。
const doc = document;
现在，我们需要再设置三个常量，以存储 。正确的, 。剩下 和 。容器 选择器。我们使用常量的原因是因为我们知道我们不想更改其值，因此使用常量很有意义。现在设置了这些，我们可以继续向它们添加一些鼠标事件。
const right = doc.querySelector（“。right”）; const left = doc.querySelector（“。left”）; const container = doc.querySelector（“。container”）;
使用 剩下 我们在上一步中声明的常量变量，现在可以向其添加事件侦听器。此事件将是 鼠标输入 事件，而不是使用回调函数，我们将使用另一个称为ES6的功能 箭头功能”（（）=>）.
//将一个类添加到鼠标悬停时的容器元素上。addEventListener（“ mouseenter”，（）=> {container.classList.add（“ hover-left”）;}）;
11.添加和删除一个类
在最后一步，我们的事件监听器添加了一个 鼠标输入 以主容器类为目标并添加一个新类的事件 悬停向左 到左侧的section元素。添加此调用后，我们现在需要将其悬停时将其删除。我们将使用 鼠标离开 事件与 。去掉（） 方法。
//删除在鼠标悬停时添加的类。addEventListener（“ mouseleave”，（）=> {container.classList.remove（“ hover-left”）;}）;
到目前为止，我们已经在左侧屏幕上完成了所有操作。现在，我们将结束JavaScript并在右侧的section元素上添加和删除类。再次，我们在这里使用了箭头函数语法，以使所有内容看起来都很整洁。
right.addEventListener（“ mouseenter”，（）=> {container.classList.add（“ hover-right”）;}）; right.addEventListener（“ mouseleave”，（）=> {container.classList.remove（“ hover-right”）;}）;
12.使其响应
任何项目（无论大小）均应避免做出响应。因此，在这一步中，我们将向CSS添加一些媒体查询，并使这个小项目尽可能地适应移动设备。值得检查一下原始CodePen，看看它是如何工作的。
@media（max-width：800px）{h1 {font-size：2rem; } .button {width：12rem; }
我们确保当页面的宽度减小到800px时，字体和按钮的尺寸将减小。因此，要完成任务，我们也要以高度为目标，并确保在页面高度低于700像素时，按钮在页面上向下移动。
@media（max-height：700px）{.button {顶部：70％; }}
要保存您的页面吗？将它们导出为PDF并将其保存在安全的云存储中。
网页设计活动 产生伦敦 将于2018年9月19日至21日回归，为您提供了一系列行业领先的演讲者日程表，一整天的研讨会和宝贵的交流机会–请不要错过。 立即获取生成票证.
本文最初发表在网络杂志上 第305期. 现在订阅.
