响应式 Windows 登录页面 UI 教程 - 第 1 部分

2025-06-07

响应式 Windows 登录页面 UI 教程 - 第 1 部分


*最初发布于 Medium。

在本教程的第一部分中，我们将使用 HTML 和 SCSS 构建一个 Windows 登录页面的克隆版本。完成本教程后，您将能够了解如何使用 mixin 编写可复用代码，以及如何将多个动画应用于项目中的某些组件。与往常一样，本教程适合初学者。尽情享受吧！:)

草图

首先，我们需要了解登录页面的布局。我们已经知道 Windows 登录页面是什么样子的。但是，通过勾勒出登录页面主要组件的基本轮廓，将有助于我们确定 HTML 代码的结构。Windows 登录页面的草图将作为我们的蓝图，就像一张地图。

Windows 登录页面的主要组成部分包括：

  • 用户个人资料（显示）图像
  • 帐户用户名
  • 密码输入框
  • 提交按钮

HTML

了解了构成 Windows 登录页面的组件后，我们现在可以开始编写 HTML 代码。

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Windows Login Page UI </title>
</head>
<body>

   <!--Login Page  -->
    <div id="login-page" class="login-page">
      <div id="login-page-inner">
        <!-- User Icon -->
        <div id="user-icon-container">
          <i class="fa fa-user-o fa-5x"></i>
        </div>    
        <!-- Username -->
        <div id="username-container">
          <h2>Muna</h2>
        </div>      
        <!-- Password box -->
        <div id="input-container">
          <input type="password" id="password" placeholder="Enter password">
          <button id="submit"><i class="fa fa-arrow-right"></i></button>
        </div>

      </div>
    </div>

</body>
</html>

我们将从一个简单的 HTML 框架开始。这里我使用了 Codepen 提供的标准 HTML 框架。你可以在 Codepen 的编程练习区中的 HTML 部分输入 doc 一词，然后点击键盘上的 Tab 键来访问这个基本的 HTML 框架。

我们将使用 FontAwesome 图标库中的几个图标。为了使用这个库，我们需要 FontAwesome 的 CDN（内容分发网络）链接。获取 FontAwesome 的 CDN 链接后，我们将使用 link 标签将其放置在 HTML 的 head 标签之间，如上所示。为了方便以后使用，您可以在 Google 或您选择的任何搜索引擎中输入“Fontawesome CDN 链接”或点击此处，轻松找到 FontAwesome 的 CDN 链接。

在 body 部分，我们将输入构成 Windows 登录页面的主要代码。我们将从保存登录页面内容的主容器开始。我们将为主容器指定一个 id，即login-page-container。接下来，我们将添加另一个 div，以便我们能够在 login-page div 容器周围移动登录页面的组件。这将有助于我们更好地定位组件。我们将为这个容器指定一个 id，即login-page-inner。

接下来，我们将添加构成登录页面的主要组件：用户显示图像、帐户用户名、密码输入框和提交按钮。

让我们从第一个组件开始。用户显示图像。我们将使用 FontAwesome 图标库中的图标来表示用户。为了保存此图标，我们将添加一个 id 为user-image-container的 div 容器。在 user-image-container div 内部将是表示用户个人资料图像的用户图标。使用 i 标签，我们将添加类fa，fa-user-o和fa-5x。第一个类代表 FontAwesome 图标的前缀，没有它，您将无法使用图标库，所以不要忘记包含它。i 标签的第二个类名fa-user-o代表我们从 FontAwesome 库中使用的图标的名称。i 标签的最后一个类名fa-5x代表图标的大小，用于增加图标大小。

在 user-icon-container 之后的下一个组件是帐户用户名。我们将使用一个 id 为username-container的 div作为用户名的容器。在 username-container div 内部，我们将使用一个标题标签（在本例中为 h2 标签）来表示用户名。

最后两个组件是密码输入框和提交按钮。我们将使用一个 div 容器来保存这两个组件。我们将为这个 div 容器指定一个 id 名称为input-container。在 input-container div 内部，我们将有一个 input 标签来代表密码输入框。我们将 input 标签的 type 属性更改为 password，因为这是 input 标签所代表的内容。我们还将为 input 标签指定一个 id 为password和一个占位符“输入密码”。此占位符属性用于简要描述此输入字段的预期值，在本例中为密码。在 input-container div 中添加的最后一个组件是提交按钮。我们将添加一个 button 标签并为其指定一个 id 为submit。在 button 标签之间，我们将插入另一个图标，这次是一个向右的箭头图标，使用 i 标签并为其指定类名fa和fa-arrow-right。

SCSS

开始造型！

有用的提示警报！

在开始样式设置之前，我想先告诉大家一个非常有用的技巧，是我从 Twitter 上的一位开发者那里学到的（可惜我记不住他的 Twitter 账号）。为了方便布局调试，并能以可视化的方式呈现布局以简化编辑，请在样式表顶部使用以下内容：

* { 
   outline: 1px solid red;
}

这样做的目的是在我们的 HTML 代码中的每个元素周围添加一个红色轮廓。这样做的好处是，与通过使用 border 属性进行调试不同，使用 outline 不会添加任何额外的像素，因此不会影响我们的布局。随着您继续学习本教程，您将看到此调试解决方案的工作原理。

现在让我们开始进行一些实际的造型！

登录页面容器

body {
  margin: 0;
  padding: 0;
}
#login-page-container {
  width: 100%;
  height: 600px;
  background-image: url("http://res.cloudinary.com/mmdirir94/image/upload/v1519167949/architecture-3121009_960_720_lix21u.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 16px;
  color: white;
}

我们首先将边距和填充都设置为 0，以消除 body 标签的默认边距和填充。

继续设计主容器的样式；登录页面容器。

我们将 login-page-container 的宽度设为 100%，这样它就能覆盖内容区域的整个宽度，并具有响应式布局，以便 background-size 能够根据浏览器大小进行变化。我们还将 login-page-container div 的高度设为 600 像素。

然后，我们将使用 background-image-url 属性将背景插入到 login-page-container div 中。我们将使用 background-position 属性并将其值设置为 center，使背景图像居中。我们将设置其值为 no-repeat，以确保背景图像不会在 login-page-container 中重复出现。接下来，我们将使用 background-size 属性指定背景图像的大小。通过将 background-size 属性的值设置为 cover，它将调整背景图像的大小，使其填满整个 login-page-container，即使这会导致图像被拉伸或部分内容被截断，它也会保持填充状态。

最后，我们将 color 属性设置为 white。这将使 login-page-container 及其所有子元素中所有文本的默认颜色都变为白色。我选择白色作为默认文本颜色，是因为白色与我使用的背景图像最相配，并且能让文本在背景图像中清晰易读。

登录页面内部

#login-page-container {
  width: 100%;
  height: 600px;
  background-image: url("http://res.cloudinary.com/mmdirir94/image/upload/v1519167949/architecture-3121009_960_720_lix21u.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 16px;
  color: white;
  #login-page-inner {
    width: 400px;
    margin: 0 auto;
    @include vertical-centering;
  }
}

接下来讨论 login-page-inner div 容器，我们首先将其嵌套在 login-page-container div 中。如果您不熟悉嵌套，它是 SCSS 的众多功能之一。它允许我们创建与 HTML 代码类似的视觉层次结构。它不仅使我们的 SCSS 代码更具条理和可读性，而且一旦 SCSS 代码编译为 CSS（这在 Codepen 中自动完成），它也会使我们的 CSS 更具条理和可读性。

我们将为 login-page-inner div 指定 400 像素的宽度，并使用 margin 属性将其值设置为 margin: 0 auto 使其水平居中。

要使 login-page-inner div 在 login-page-container div 中垂直居中，有几种方法。在本例中，我们不使用弹性框，而是使用position属性、top属性和transform属性使login-page-inner div垂直居中。这三个属性结合起来，可以让login-page-inner div在其父容器login-page-container中垂直居中。如果我们稍后需要在代码中垂直居中，我们将使用一个混合宏，并将其命名为vertical-centering。

@mixin vertical-centering {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

我已将垂直居中混合宏放置在我们的 SCSS 样式表的顶部，并且为了应用它，我使用了@include后跟混合宏的名称。

下面我们可以看到到目前为止我们的登录页面是什么样的。

登录页面内部→动画

我们将应用一个简单的动画，其中 login-page-inner div（包括嵌套在其中的所有元素）将从上方下降并从 0 淡入到完全不透明。

//Animations
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

让我们从淡入动画开始。要创建动画，我们使用 @keyframes 后跟动画名称 fadeIn。接下来很简单——我们希望 login-page-inner div 及其所有内容的不透明度从 0 变为 1（即完全不透明）。

@keyframes descend {
  from {
    top: 45%;
  }
  to {
    top: 50%;
  }
}

接下来是动画，它将使 login-page-inner div 及其内部元素下降。我们希望 login-page-inner div 向下移动到 login-page-container 垂直居中的位置。我们将使用 @keyframes 后跟动画名称，在本例中为 descend。接下来，我们将使 login-inner-container div 的起点位于父容器 (#login-page-container) 中心上方 5% 处，终点位于父容器 (#login-page-container) 的中心。

剩下的就是使用动画属性将两个动画应用于登录页面内部 div。

...
#login-page-inner {
   ...
   ... 
  animation: fadeIn 1s ease-in-out, descend 0.5s ease-in-out;
}

第一个动画是fadeIn  —— 它将持续 1 秒，并且具有 ease-in-out 的过渡时间函数，这意味着动画的开始和结束速度一样慢。下一个动画是descend ，以逗号分隔。descend动画将持续 0.5 秒，与fadeIn动画类似，也具有 ease-in-out 的过渡时间函数。

最终结果将如下所示：

用户镜像容器

#login-page-container {
  width: 100%;
  height: 600px;
  background-image: url("http://res.cloudinary.com/mmdirir94/image/upload/v1519167949/architecture-3121009_960_720_lix21u.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 16px;
  color: white;
  #login-page-inner {
    width: 400px;
    position: relative;
    @include vertical-centering;
    margin: 0 auto;
    animation: fadeIn 1s ease-in-out, descend 0.5s ease-in-out;
    #user-icon-container,
    #username-container,
    #input-container {
      text-align: center;
    }
    #user-image-container {
      margin: 0 auto;
      width: 140px;
      height: 140px;
      font-size: 110%;
      border-radius: 100%;
      background-color: rgba(255, 255, 255, 0.5);
      .fa-user-o {
        line-height: 140px;
      }
    } 
  }
}

从目前所做的工作来看，我们可以看到 login-page-inner div 中的内容是左对齐的。为了解决这个问题，我们将组成登录页面的三个主要组件的 text-align 值都改为居中。

接下来，我们将设计登录页面的第一个主要组件：用户个人资料图片。首先，我们来设计 user-image-container div 的样式——它将作为嵌套在 user-image-container div 中的用户图标的背景。

为了使用户图像容器在其父容器 #login-page-inner 内水平居中，我们将为用户图像容器 div 设置边距“0 auto”。我们将为用户图像容器设置等宽和等高，均为 140 像素。

我们将应用 110% 的字体大小，这意味着用户图像容器 div 内的任何文本（或图标）的字体大小将是我们之前在主父容器 #login-page-container 中设置的默认字体大小（16px）的 110%。

作为我们背景的 user-image-container div 将是圆形的，因此我们将 border-radius 值设为 100%。

最后，user-image-container div 的背景颜色将为白色且略微透明。为了实现这一点，我们使用 RGBA 颜色，因为它不仅允许我们定义由 RGB 颜色定义的颜色值，还允许我们定义颜色的不透明度。

用户图像容器 → 用户图标

继续讨论嵌套在 user-image-container div 中的 user-icon，我们将设置 140 像素的行高。这将使 user-icon 在 user-image-container div 中垂直居中。

用户名容器

#login-page-container {
  width: 100%;
  height: 600px;
  background-image: url("http://res.cloudinary.com/mmdirir94/image/upload/v1519167949/architecture-3121009_960_720_lix21u.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 16px;
  color: white;
  #login-page-inner {
    width: 400px;
    position: relative;
    @include vertical-centering;
    margin: 0 auto;
    #user-image-container,
    #username-container,
    #input-container {
      text-align: center;
    }
    #user-image-container {
      margin: 0 auto;
      width: 140px;
      height: 140px;
      font-size: 110%;
      border-radius: 100%;
      background-color: rgba(255, 255, 255, 0.5);
      .fa-user-o {
        line-height: 140px;
      }
    } 
    #username-container {
      margin-bottom: 40px;
      margin-top: 20px;
      font-family: "Roboto";
      font-size: 105%;
    }
  }
}

登录页面的下一个主要组件是帐户用户名。我们将从 username-container div 开始。

我们将应用 40 像素的 margin bottom，以便在 username-container div 和 input-container div（包含密码输入框和提交按钮）之间留出一些空间。我们还将应用 20 像素的 margin top，以便在 username-container 和 user-image-container div（位于 username-container 上方）之间留出一些空间。

然后，我们将字体系列的值设为 Roboto。为了使用 Roboto 作为字体系列，我们需要使用 @import 添加此字体，或者通过将字体嵌入到

标签。在这里，我选择使用 @import 方法——幸运的是，我们可以使用 Codepen 上现有的 Assets 库轻松实现这一点。查看下面的 GIF 了解如何操作。

登录页面的下一个主要组件是帐户用户名。我们将从 username-container div 开始。

我们将应用 40 像素的 margin bottom，以便在 username-container div 和 input-container div（包含密码输入框和提交按钮）之间留出一些空间。我们还将应用 20 像素的 margin top，以便在 username-container 和 user-image-container div（位于 username-container 上方）之间留出一些空间。

然后，我们将字体系列的值设为 Roboto。为了使用 Roboto 作为字体系列，我们要么使用 @import 添加此字体，要么通过将字体嵌入到 HTML 的 head 标签中来添加。在这里，我选择使用 @import 方法——幸运的是，我们可以使用 Codepen 上现有的 Assets 库轻松完成此操作。查看下面的 GIF 了解如何操作。

我们将字体大小设置为 105%，这意味着字体大小将是我们之前在主父容器 #login-page-container 中设置的默认字体大小（即 16px）的 105%。

以下是我们目前所掌握的信息：

输入容器

#login-page-container {
  width: 100%;
  height: 600px;
  background-image: url("http://res.cloudinary.com/mmdirir94/image/upload/v1519167949/architecture-3121009_960_720_lix21u.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 16px;
  color: white;
  #login-page-inner {
    width: 400px;
    position: relative;
    @include vertical-centering;
    margin: 0 auto;
    animation: fadeIn 1s ease-in-out, descend 0.5s ease-in-out;
    #user-image-container,
    #username-container,
    #input-container {
      text-align: center;
    }
    #user-image-container {
      margin: 0 auto;
      width: 140px;
      height: 140px;
      font-size: 110%;
      border-radius: 100%;
      background-color: rgba(255, 255, 255, 0.5);
      .fa-user-o {
        line-height: 140px;
      }
    }
    #username-container {
      margin-bottom: 40px;
      margin-top: 20px;
      font-family: "Roboto";
      font-size: 105%;
    } 
    #input-container {
      height: 50px;
      #password {
        margin: 0 auto;
        height: 25px;
        width: 300px;
        padding-left: 5px;
      }
      #submit {
        height: 31px;
        padding: 0 10px;
        position: relative;
        right: 5px;
        background-color: #bdbdbd;
        border: none;
        border-top-right-radius: 2px; 
        border-bottom-right-radius: 2px;
        cursor: pointer;
        .fa-arrow-right {
          line-height: 28px;
          color: white;
        }
        &:hover {
          background-color: #9e9e9e;
        }
      } 
    }
  }
}

最后，我们剩下要设计的是包含密码输入框和提交按钮的输入容器。

首先让我们将输入容器 div 的高度设为 50 像素。

输入容器→密码输入框

继续讨论密码输入框 (#password)，我们首先将其水平居中放置在输入容器内，边距设置为 0 auto。高度设置为 25 像素，宽度设置为 300 像素。#password 中的占位符值距离其左边框太远，因此我们将应用 5 像素的 padding-left 值。

输入容器→提交按钮

最后，但并非最不重要的是我们的提交按钮。

从 HTML 代码中，我们可以看到按钮标签内嵌套了一个 i 标签，其类名为“fa fa-arrow-right”，代表箭头图标。按钮元素将充当箭头图标的容器。我们将提交按钮的高度设置为 31 像素，左侧填充和右侧填充均为 10 像素。这将在箭头图标的两侧添加相等的填充，箭头图标在 ID 为 #submit 的按钮标签中水平居中。

提交按钮离密码输入框太近了，所以我们首先使用位置属性应用相对定位，然后使用右侧属性将提交按钮（即#submit）定位到密码输入框（即#password）右侧 5 像素处。

接下来，我们将提交按钮的背景色设为 #bdbdbd，并将 border 属性设为 none，以移除其边框。为了使提交按钮的右上角和右下角略微弯曲，我们将 border-top-right-radius 和 border-bottom-right-radius 设置为 2 像素。

为了表明提交按钮确实是一个按钮，我们将 cursor 属性的值设置为 pointer。此外，我们将鼠标悬停在按钮上时的颜色从 #bdbdbd 更改为 #9e9e9e。

确保删除我们在样式表开头应用的红色轮廓，我们的 Windows 登录页面就快完成了。

本教程的第一部分已经结束。在第二部分中，我们将介绍如何使用媒体查询和混合宏 (mixin) 实现 Windows 登录页面的响应式设计。

为了方便使用，我把本教程中使用的画笔收集起来，放在了 Codepen 的合集里。你可以在这里查看。

大家好！好久没在这里发帖了，所以想着赶紧回来发个教程😄。

希望你喜欢本教程的第一部分！本教程的第二部分将于下周发布！期待！ ✌️

附言：感谢这几天一直关注我的各位，我看到你们了！如果没有 dev.to 团队和我们所在的这个美好社区，这一切都不可能实现，希望你们在这个平台上玩得开心！ ❤️

文章来源：https://dev.to/munamohamed94/responsive-windows-login-page-ui-tutorial---part-1-----26k1
Devto 翻译
PREV
您最喜欢的 Git 命令是什么？
NEXT
React 18：初学者必知的功能和升级