使用少于 100 行代码（包括 CSS）创建落地页🎨🎉

HTML

CSS

最近我买了一个个人域名，决定创建一个快速登陆页面，这样在制作作品集的时候就不会空着了。我觉得有些人可能会觉得这个有用，所以决定做一个教程。

HTML

首先创建一个新index.html文件，然后输入“！”并按下“Tab”键启动样板文件。在标题标签中输入您的网站名称。它将显示在浏览器标签页中。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>My Awesome Landing Page</title>
</head>
<body>

</body>
</html>

然后创建 div 元素，用于包裹页面并使内容居中。添加一个标题，介绍你自己以及你的技能。我还在分隔符上使用了 span 元素，以便稍后设置样式。

<div class="page-wrapper">
      <div class="content-wrapper">
        <h1>Hi, I'm Jane</h1>
        <p>
          FrontEnd <span class="divider"> | </span> BackEnd
          <span class="divider"> | </span> DevOps
        </p>
      </div>
 </div>

接下来，创建一个新的 Icons 文件夹。你可以在Font Awesome上找到很棒的图标。访问他们的网站，输入邮箱地址接收图标包。解压后，将其添加到 Icons 文件夹中。最后，链接到all.css图标包中的文件。

<link rel="stylesheet" href="icons/font-awesome/css/all.css" />

在链接中添加您的图标，并对您要使用的特定图标使用适当的 Font Awesome 语法（请参阅其文档）。

<a href="https://twitter.com/jane">
  <i class="icon fab fa-twitter fa-2x"></i>
</a>
<a href="https://github.com/jane">
   <i class="icon fab fa-github fa-2x"></i>
</a>
<a href="https://www.linkedin.com/in/jane/">
   <i class="icon fab fa-linkedin-in fa-2x"></i>
</a>
<a href="https://blog.jane.dev">
   <i class="icon fas fa-book fa-2x"></i>
</a>
<a href="mailto:hi@jane.dev">
   <i class="icon fas fa-envelope fa-2x"></i>
</a>

标记就到这里。如果你照着做了，现在看起来应该是这样的。图标是蓝色的，因为“a”标签的默认颜色是蓝色。看起来很复古！

CSS

让我们让一切变得更美丽！

首先，为样式创建一个新文件夹，main.css在其中添加一个新文件，并在index.html标题部分链接到该文件夹。

<link rel="stylesheet" href="styles/main.css" />

然后导入要使用的字体。我决定使用Comfortaa和Source Sans Pro。访问Google Fonts，选择所需的字体，然后将其导入到文件顶部main.css。

@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&family=Source+Sans+Pro:wght@900&display=swap");

然后对默认样式进行简单重置，使用 CSS GRID 设置登录页面的背景颜色和中心元素。

* {
  margin: 0;
  text-decoration: none;
}

html,
body {
  height: 100%;
  display: grid;
  place-items: center;
  background-color: black;
}

.page-wrapper {
  display: grid;
  place-items: center;
  text-align: center;
}

现在设置文本样式。设置字体颜色、字体系列、调整字母间距，并在必要时添加边距，以达到美观的效果。

h1 {
  color: white;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 5em;
  letter-spacing: -0.04em;
}

p {
  color: rgb(98, 0, 255);
  font-family: "Comfortaa", cursive;
  font-size: 1.5em;
  margin: 15px 0;
}

.divider {
  color: white;
}

最后，你需要设置图标的样式。根据背景颜色，设置图标的颜色和大小。为了增加交互性，你可以添加光标和图标悬停时的背景颜色变化。

.icon {
  color: white;
  padding: 15px;
  border-radius: 50%;
}

.icon:hover {
  cursor: pointer;
  background-color: rgb(22, 22, 22);
}

另外，请务必为您的网站创建自己的图标。您会在浏览器标签页中，页面标题之前看到它。为此，我推荐使用favicon.io。将其添加到您的图标目录中，并在页眉中链接到它index.html。

<link rel="icon" href="icons/favicon.ico" />

做得好！最终结果应该如下所示：

部署之前，请务必在中尝试不同的设置main.css。设计总是主观的，但我建议使用一些对比度较高的设置：

或者这样：

恭喜！您已经创建了一个简单的登陆页面，无需复杂的 CSS 或 JavaScript 框架，代码量不到 100 行。

源代码可在GitHub上获取。
如果您喜欢，请点个⭐🎉🥳

写作一直是我的热情所在，能够帮助他人让我感到快乐。如有任何疑问，欢迎随时联系我们！

在Twitter、LinkedIn和DEV上联系我！