Shopify 登陆页面克隆 — 教程
Shopify 登陆页面克隆 — 教程
快速介绍
在我写其他东西之前，我需要提到几件事。 ** 首先** ，我是新来的，所以请耐心等待。 ** 第二** ，如果您发现视频更具教育意义，我有一个 YouTube 教程 对于这个项目，请点击这里 😃。
好的，那么今天我将教您如何构建 Shopify 登陆页面克隆。我建造这个的原因是为了展示 UI的第一条规则 . 简单且一致 .
想想所有的 应用程序/网站 你用过的东西给你留下了深刻的印象。他们都（有些不）遵循这个简单的规则。
一个 简单且一致 UI 很好，原因如下：
- 它不是压倒性的（这对新用户来说可能很可怕）
- 提供熟悉感（让用户回访）
- 更容易看到重要的部分
好的，现在您已经了解了为什么这对我来说是（或者更确切地说是一个）吸引人的网站的根本因素，让我们来看看代码。
文件夹结构
打开你的编辑器，创建你在图片上看到的文件夹和文件（shop-vector.png 可以从我的 GitHub 下载）：
创建文件夹后，创建一个基本框架 HTML 页面（不要忘记参考 CSS 文件和引导链接）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文档</title> <link
href="https://cdn.jsdelivr.net/npm/[[email protected]](/cdn-cgi/l/email-protection)/dist/css/bootstrap.min.css"
rel="样式表"
完整性="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
crossorigin="匿名"
/>
<link rel="stylesheet" href="./css/index.css" />
</head>
<body>
<h1>你好世界！</h1> <script
src="https://cdn.jsdelivr.net/npm/[[email protected]](/cdn-cgi/l/email-protection)/dist/js/bootstrap.bundle.min.js"
完整性="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="匿名"
></script>
</body>
</html>
在你的 CSS 文件中，设置基本规则：
身体 {
边距：0；
填充：0； 字体家族：“机器人”，无衬线； 颜色：#000000；
背景：#ffffff； 溢出-x：隐藏；
}
第一部分（标题）
就在您的下方 身体 标签和以下代码：
<section class="green">
<h1 class="title">使用 Shopify 在线销售</h1>
<p class="sub-title">受到全球超过 1,700,000 家企业的信赖！</p>
</section>
而在 索引.css 添加：
部分 {
显示：弯曲； 弹性方向：列；
对齐项目：居中； 最小高度：200px； 填充：70px 20vw；
} 。绿色 {
颜色：#ffffff；
背景：#08855e；
}
里面的（CSS）代码 部分 负责在需要的位置对齐所有内容。和 。绿色 照顾颜色。现在你有：
我们几乎完成了第一部分。要完成它，添加以下代码，在 p 标签（在 索引.html 文件）
<div class="container text-center">
<div class="row d-flex justify-content-center">
<div class="col col-lg-4">
<div class="input-group-lg">
<input
类型=“文本”
类=“表单控制”
placeholder="输入您的电子邮件地址"
只读
/>
</div>
</div>
<div class="col col-auto">
<button class="btn btn-dark btn-lg" type="button">
开始免费试用
</button>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col helper-text">
<p>
免费试用 Shopify 14 天，无需信用卡。经过
输入您的电子邮件，即表示您同意接收营销电子邮件
来自 Shopify。
</p>
</div>
</div>
</div>
速记 ：上面代码中使用的每个类，我们都是引导类，即我们不需要使用 CSS
现在我们只剩下这个了：
第二节（海浪）
对于你们中的很多人来说，这可能是你们最期待的部分（我知道你们中的一些人是来追波的）。
为了创建波浪，我们将使用一个名为 形状分隔符 .
您可以立即在其中看到一些可以更改的值（随意尝试，您不必使用与我相同的波形），但我将粘贴以下值：
安德之后，你对你的波浪感到满意，按下云按钮，你会看到这个屏幕：
点击 复制 HTML 按钮，然后粘贴您的 HTML 在你的代码 部分 .green .然后点击 复制 CSS 按钮，然后粘贴您的 CSS .不要忘记改变， 位置：绝对 至 位置：相对
现在，你有：
现在，我们需要添加图像（您可以从我的 GitHub 下载）。
在波浪的代码下添加以下代码:)
<div class="vector-img">
<img src="./img/shop-vector.png" />
</div>
并将其添加到您的 CSS 文件
.vector-img {
位置：绝对； 边距：-30vh 35vw； z-index：1；
}
这样可以确保图像位于网站的中心，并且 z-index：1； 确保它（图像）始终位于一切之上。
第三节（特点）
我们快完成了。为了完成这些功能，我们将使用 引导图标 .所以，在之前添加以下链接 </head>
<link
rel="样式表"
href="https://cdn.jsdelivr.net/npm/[[email protected]](/cdn-cgi/l/email-protection)/font/bootstrap-icons.css"
>
我们将使用这 3 个图标：
<i class="bi bi-window-sidebar"></i>
<i class="bi bi-cash"></i>
<i class="bi bi-people-fill"></i>
并在您的下方添加以下代码
<section>
<div class="container text-left">
<div class="row">
<div class="col-6 col-md-4 features">
<div class="d-flex justify-content-left align-items-left">
<i class="bi bi-window-sidebar"></i>
</div>
<h6 class="features-text">可定制的模板</h6>
<p>免费的网站设计可快速启动您的商店
容易地。
</p>
</div> <div class="col-6 col-md-4 features">
<div class="d-flex justify-content-left align-items-left">
<i class="bi bi-cash"></i>
</div>
<h6 class="features-text">一体</h6>
<p>
Shopify 负责从营销和支付到管理资金的所有事宜。
</p>
</div> <div class="col-6 col-md-4 features">
<div class="d-flex justify-content-left align-items-left">
<i class="bi bi-people-fill"></i>
</div>
<h6 class="features-text">安全高效的平台
</h6>
<p>
超过一百万的用户信任 Shopify 来管理他们的在线商店。
</p>
</div>
</div>
</div>
</section>
上面的代码确保所有特征都正确对齐并在正确的位置，现在我们只需要添加一些 CSS
我们完成了。
将以下代码粘贴到您的 索引.css 文件：
一世 {
字体大小：3rem；
颜色：#08855e；
} 。特征 {
边距顶部：12vh；
} .features-文本{
字体粗细：粗体；
}
我们终于完成了！结果如下：
希望你喜欢这个。如果你喜欢这个，别忘了关注我。
我的社交链接：
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
浙公网安备 33010602011771号