今天下午打算把 webui 那节课老师给的登录界面给做出来，后续在 j2ee 期末项目时候就直接用这个作为登录和注册的界面。省的再去找登录和注册的素材。

提供的东西

最终实现的效果预览图如下

一个 html 文件，内容如下

<!DOCTYPE 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="css/style.css">
  <title>Login</title>
</head>
<body>
  <div class="login-container">
    <div class="left-container">
      <div class="title"><span>登录</span></div>
      <div class="input-container">
        <input type="text" name="username" placeholder="用户名">
        <input type="password" name="password" placeholder="密码">
      </div>
      <div class="message-container">
        <span>忘记密码</span>
      </div>
    </div>
    <div class="right-container">
      <div class="regist-container">
        <span class="regist">注册</span>
      </div>
      <div class="actoin-container">
        <span>提交</span>
      </div>
    </div>
  </div>
</body>
</html>

话不多说，中午不睡觉了，直接开干！

界面实现

看了一下视频效果和截图效果，界面的布局大致能够把握清楚了。

获取登录界面的宽高

利用 QQ 截图，得到了宽为 600px ，高为 375px。设置登录的宽和高。

.login-container {
  width: 600px;
  height: 375px;
}

渐变背景

由于这是渐变背景，左上角浅，右下角深。通过 QQ 截图获取到左上角和右下角的 rgb 的三种值即可。这两种颜色的代码分别为 218,148,255 和 133,99,191，然后清空默认 body 自带的外边距。如果给背景设置渐变样式，使用 linear-gradient 即可。

body {
  background: linear-gradient(rgb(218,148,255), rgb(133,99,191));
  margin: 0;
}

不过保存之后，效果感觉怪怪的。

因为背景有重复，在 backgroud 属性中设置一个 no-repeat 即可

background: linear-gradient(rgb(218,148,255), rgb(133,99,191)) no-repeat;

不过问题又来了，发现下面的背景都是白的。而且 body 的高度都是由前面对类选择器 login-container 设置的高度所撑起的。即使给 body 设置样式为 height: 100% 也是不行。后面发现，整个页面的宽和高是受到 html 标签对的控制，而不是 body 标签对，所以我们只要通过设置以下样式即可宽高自适应。

并且，对于 html 标签对来说，设置百分比就是给给整个网页“确定的”宽和高。

/* 给 html 设置一个 100% 的高度，设置成了 100% 整个页面的高度就是浏览器的高度
这样，html 中的 body 标签也就可以使用百分比来控制宽高
*/
html {
  height: 100%;
}

body {
  height: 100%;
}

效果：

发现背景的渐变方向还是要修改修改，查阅使用方法之后设置渐变方向，只要在第一个参数添加倾斜角即可，目测应该是 160° 左右吧

background: linear-gradient(160deg, rgb(218,148,255), rgb(133,99,191));

设置完成之后，效果如下

这样一来，背景就设置完成了。

登录界面整体

通过效果图发现，登录界面是由左边的填写登录部分和右边的注册部分。先设置整体，再设置左边部分和右边部分。

整体居中

将登录框设置为绝对定位，尽力设置为水平居中和垂直居中。内部的布局设置成弹性布局，里面的 div 就是水平方向的。

calc 函数通过计算的方式算出属性值，在某些情况下你需要用到它，比如下面的居中方式。支持“+”、“-”、“*”、“/”，运算方式和小学里的四则运算方式一模一样。

运算的单位可以不统一。比如 calc(10em - 100px) 这没有问题。

还有一个圆角半径

.login-container {
  width: 600px;
  height: 375px;
  position: absolute;
  left: calc(50% - 300px);
  top: calc(50% - 100px);
  box-shadow: 10px 10px 62px rgb(98,79,182), -10px 0 62px rgb(98,79,182);
  display: flex;
}

然后左边部分和右边部分先设置一下它的宽度

.left-container {
  width: 450px;
}

.right-container {
  width: 150px;
}

得到的效果

左边部分

感觉左边部分有一个 52px 的 padding ，设置看看。

.left-container {
  padding: 52px;
}

登录文字样式

先弄登录文字的样式吧，登录下面有一个蓝色的下划线。字体颜色是白的 

.title {
  width: 40px;
  font-size: 20px;
  color: white;
  border-bottom: 3px solid rgb(33,158,208);
}

然后设置输入框的样式，给这个 .input-container 选择器直接上一个顶部外边距为 40px。

.input-container {
  margin-top: 40px;
}

输入框样式

然后给每一个输入框设置一个宽度为 100%，为什么可以设置百分比，因为 input 的父元素的宽的值是确定的，所以可以用百分比。这和前面提到的 body 不能直接设置百分比是一样的。

.input-container input {
  width: 100%;
}

然后这两个输入框之间有一个底部外边距，给它设置为 20px，这样看起来他们有一个距离。

.input-container input {
  margin-bottom: 20px;
}

由于这两个输入框都有一个默认的样式，背景是白色的，每一条边都有边框，默认是灰色的，还有提示文字的颜色，默认也是深灰色的。这些样式都是需要进行更改的。

我直接给它修改边框样式，背景颜色为透明，去掉左、上、右的边框样式，设置底部边框。

.input-container input {
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid rgb(88,142,214);
}

设置完之后，看到大体上的效果已经出来了。

然后就是设置提示性文本的样式，直接在 Input 标签对中进行设置肯定是无效的。所以，通过伪类来设置，input 输入框有一个提示性的伪类，叫做 placeholder ，通过这个来设置，提示性字体的样式就可以设置了。

看效果的提示性字体并不是特别的白，目测一下应该还要灰一点点。

.input-container input::placeholder {
  color: #eee;
}

感觉提示性输入框和底部边距，有一定的距离，设置一下内边距就 OK 了。

.input-container input {
  padding: 6px 0;
}

忘记密码样式

忘记密码样式也不难

.message-container {
  color: #eee;
  font-size: 14px;
  margin-top: 90px;
}

左边部分的收工之作

缺了一个背景颜色，左侧的背景颜色是渐进的，所以还是要用到 linear-gradient ，设置好渐进的角度。左上角部分的颜色是 119,83,171，右下角部分的颜色是 89,109,213 。设置完背景颜色还不行，还要再设置左上角和左下角的为圆角，且圆角半径为 20px ，和父元素的圆角一样。

.left-container {
  background: linear-gradient(160deg, rgb(119,83,171), rgb(89,109,213));
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

左边部分的效果如下

右边部分

右边部分有一个注册，提交的按钮。通过测量，应该有一个内边距，上下内边距均为 47px，左右边距均为 50px。

.right-container {
  padding: 47px 50px;
}

注册文字样式

设置注册文字的样式，白色文字，黄色下划线，字体大小和登录一样。然后尽量将其居中，目测设置外边距为 30px。

.regist-container {
  margin-left: 30px;
}

.regist {
  color: white;
  font-size: 20px;
  border-bottom: 3px solid rgb(224,207,117);
}

提交按钮样式

提交按钮样式，有一个黄色边框，提交的文字是白色的，按钮的宽高和圆角半径均为 48px 。提交按钮应该尽量和注册文字拉开距离，以及尽量将注册按钮将其居中。设置文字大小为 14px

.actoin-container {
  width: 48px;
  height: 48px;
  border-radius: 48px;
  border: 1px solid yellow;
  font-size: 14px;
  color: white;
  margin-left: 25px;
  margin-top: 135px;
}

为了让文字彻底的水平和垂直居中，设置水平居中，行高和高度一样高即可。

.actoin-container { 
  text-align: center;
  line-height: 48px;
}

我现在才发现，整个登录框的高度不对劲，好像并没有那么高，重新调整过来。😂😂😂

.login-container {
  height: 315px;
}

.message-container {
  margin-top: 30px;
}

调整好之后，右边还缺一个背景颜色，再加一个上去。这个背景并没有渐变效果，是单色的，我给它直接取过来设置颜色就行了。背景颜色代码是 95,85,198 ，再加一个右上和右下的圆角，半径为 20px。

.right-container {
  background: rgb(95,85,198);
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

最终效果如下

其它动画效果

通过观察提供的效果视频，发现有一些特效。鼠标悬停在输入框上，输入框的下划线变白。忘记密码那部分，字体也会变白。还有点击提交按钮的时候，按钮的背景颜色会变成紫色，而且还有一点渐变的效果。

先设置鼠标悬停时 cursor 的样式，以及过渡属性 transition。

.message-container, .regist, .actoin-container {
  transition: all 200ms;
  cursor: pointer;
}

设置输入框鼠标悬停的在这些组件上的样式

.input-container input:hover {
  border-bottom: 1px solid white;
}

输入框被点击时，会有一个边框的效果，而视频中并没有边框。所以使用 focus 伪类，将边框给去除掉，去除边框使用 outline（轮廓）属性。将宽度置为 0 即可

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。它的用法和 border 属性的使用一样。不过区别就在于，这种轮廓并不会占用页面的空间。

.input-container input:focus {
  outline: 0px;
}

设置忘记密码悬停

.message-container:hover {
  color: white;
}

设置注册悬停，悬停部分是下划线

.regist:hover{
  border-bottom: 3px solid white;
}

设置按钮悬停

.actoin-container:hover {
  background-color: rgb(255,125,255);
}

最终的动图效果如下

后记

终于完成了，边写代码边记录的过程真的是又开心又累。好困，先躺一会儿。