Shopify 登陆页面克隆 — 教程

Shopify 登陆页面克隆 — 教程

快速介绍

在我写其他东西之前，我需要提到几件事。 ** 首先** ，我是新来的，所以请耐心等待。 ** 第二** ，如果您发现视频更具教育意义，我有一个 YouTube 教程 对于这个项目，请点击这里 😃。

好的，那么今天我将教您如何构建 Shopify 登陆页面克隆。我建造这个的原因是为了展示 UI的第一条规则 . 简单且一致 .
想想所有的 应用程序/网站 你用过的东西给你留下了深刻的印象。他们都（有些不）遵循这个简单的规则。

一个 简单且一致 UI 很好，原因如下：

1. 它不是压倒性的（这对新用户来说可能很可怕）
2. 提供熟悉感（让用户回访）
3. 更容易看到重要的部分

好的，现在您已经了解了为什么这对我来说是（或者更确切地说是一个）吸引人的网站的根本因素，让我们来看看代码。

文件夹结构

打开你的编辑器，创建你在图片上看到的文件夹和文件（shop-vector.png 可以从我的 GitHub 下载）：

创建文件夹后，创建一个基本框架 HTML 页面（不要忘记参考 CSS 文件和引导链接）：

<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="样式表"
完整性="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
crossorigin="匿名"
/>

你好世界！

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
完整性="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="匿名"
>

在你的 CSS 文件中，设置基本规则：

身体 {
边距：0；
填充：0； 字体家族：“机器人”，无衬线； 颜色：#000000；
背景：#ffffff； 溢出-x：隐藏；
}

第一部分（标题）

就在您的下方 身体 标签和以下代码：

使用 Shopify 在线销售

受到全球超过 1,700,000 家企业的信赖！

而在 索引.css 添加：

部分 {
显示：弯曲； 弹性方向：列；
对齐项目：居中； 最小高度：200px； 填充：70px 20vw；
} 。绿色 {
颜色：#ffffff；
背景：#08855e；
}

里面的（CSS）代码 部分 负责在需要的位置对齐所有内容。和 。绿色 照顾颜色。现在你有：

我们几乎完成了第一部分。要完成它，添加以下代码，在 p 标签（在 索引.html 文件）

<input
类型=“文本”
类=“表单控制”
placeholder="输入您的电子邮件地址"
只读
/>

开始免费试用

免费试用 Shopify 14 天，无需信用卡。经过
输入您的电子邮件，即表示您同意接收营销电子邮件
来自 Shopify。

速记 ：上面代码中使用的每个类，我们都是引导类，即我们不需要使用 CSS

现在我们只剩下这个了：

第二节（海浪）

对于你们中的很多人来说，这可能是你们最期待的部分（我知道你们中的一些人是来追波的）。
为了创建波浪，我们将使用一个名为 形状分隔符 .

您可以立即在其中看到一些可以更改的值（随意尝试，您不必使用与我相同的波形），但我将粘贴以下值：

安德之后，你对你的波浪感到满意，按下云按钮，你会看到这个屏幕：

点击 复制 HTML 按钮，然后粘贴您的 HTML 在你的代码 部分 .green .然后点击 复制 CSS 按钮，然后粘贴您的 CSS .不要忘记改变， 位置：绝对 至 位置：相对

现在，你有：

现在，我们需要添加图像（您可以从我的 GitHub 下载）。
在波浪的代码下添加以下代码:)

并将其添加到您的 CSS 文件

.vector-img {
位置：绝对； 边距：-30vh 35vw； z-index：1；
}

这样可以确保图像位于网站的中心，并且 z-index：1； 确保它（图像）始终位于一切之上。

第三节（特点）

我们快完成了。为了完成这些功能，我们将使用 引导图标 .所以，在之前添加以下链接 </head>

我们将使用这 3 个图标：

并在您的下方添加以下代码

可定制的模板

免费的网站设计可快速启动您的商店
容易地。

一体

Shopify 负责从营销和支付到管理资金的所有事宜。

安全高效的平台

超过一百万的用户信任 Shopify 来管理他们的在线商店。

上面的代码确保所有特征都正确对齐并在正确的位置，现在我们只需要添加一些 CSS
我们完成了。

将以下代码粘贴到您的 索引.css 文件：

一世 {
字体大小：3rem；
颜色：#08855e；
} 。特征 {
边距顶部：12vh；
} .features-文本{
字体粗细：粗体；
}

我们终于完成了！结果如下：

希望你喜欢这个。如果你喜欢这个，别忘了关注我。
我的社交链接：

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

本文链接：https://www.qanswer.top/29378/14301200