©2020-2024 ioDraw All rights reserved
作为一个有审美的程序猿，我希望自己写的页面能够漂漂亮亮的。今天就分享一个简单又好看的登录界面，只需要一会会儿啦！
先给大家看看成品的样子
简单介绍一下这个登录页面的效果。当我们把鼠标聚焦到两个输入框时，输入框的长度会变大，并且边框的颜色会改变。当鼠标移动到提交按钮的范围内，按钮会给内部填充颜色。
话不多说，我们现在就步入正题：
* 首先搭建好HTML框架，在里面将自己要在页面上显示的模块都实现 <body> <form class="box" action="Login.html"
method="POST"> <h1>Login</h1> <input type="text" name="" placeholder="Username">
<input type="password" name="" placeholder="password"> <input type="submit" name
="" value="Login"> </form> </body>
从代码中可以看出来，整个页面就是body里面嵌套了一个表单，表单内部有表单的标题、用户名输入框、密码输入框和提交按钮。
只有HTML的页面是不是超级丑呢
* 然后就是用CSS让它变好看啦，当然想要有一点点动画效果的话，还是要用到我们大名鼎鼎的CSS3。（说实话有点体会到CSS3的魅力） /*
先给整个页面设置背景颜色还有字体 */ body { margin: 0; padding: 0; font-family: sana-fserif;
background: #34495e; } /* 给整个表单设置宽度高度是根据表单中的内容自行收缩的， 并设置定位让整个表单居于页面正中间 */ .box{
width: 300px; padding: 40px; position: absolute; /* 绝对定位，相对于父标签来进行定位 */ top: 50%
; left: 50%; transform: translate(-50%,-50%); background: #191919; text-align:
center; /*表单中内容居中*/ }
transform: translate(-50%,-50%); css3的新特性，在不知道自身宽高的情况下，可以利用它来进行水平垂直居中。当使用：top:
50%;left: 50%; 是以整个表单的左上角为原点，所以表单不处于中心位置，会偏右下一点。
translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，这样表单就刚好位于正中间。
/* 设置标题样式 */ .box h1{ color: white; /* 设置字体颜色 */ text-transform: uppercase; /*
将字体全部设置成大写字母 */ font-weight: 500; /* 设置字体粗细 */ } /* 设置用户名输入框和密码输入框样式 */ .box
input[type="text"],.box input[type="password"]{ border-radius: 24px; border:
2px solid #3498db; background: none; display: block; margin: 20px auto;
text-align: center; padding: 14px 10px; width: 200px; outline: none; color:
white; /* 设置输入框中竖线的颜色 */ transition: 0.25s; /* 设置元素过渡效果 */ } /* 设置文本框获得焦点时的样式 */
.box input[type="text"]:focus,.box input[type="password"]:focus{ width: 280px;
border-color: #2ecc71; }
配合上transition: 0.25s; 就有一点点动画的效果了。
/* 设置提交按钮的样式 */ .box input[type="submit"]{ border-radius: 24px; border: 2px
solid #2ecc71; background: none; display: block; margin: 20px auto; text-align:
center; padding: 14px 40px; outline: none; color: white; /* 设置输入框中竖线的颜色 */
transition: 0.25s; cursor: pointer; /* 设置光标的样式 */ } /* 设置鼠标移人到按钮上的样式 */ .box
input[type="submit"]:hover{ background: #2ecc71; }
* 最后，锵锵，我们的登录页面就新鲜出炉啦。（嗯，最好呢，下去回顾一下里面用到的知识点，我最近可能实验太多，脑子有点记不清东西了）
再附两张效果图