⽤HTML和CSS实现⼀个简单的登录界⾯
作为⼀个有审美的程序猿，我希望⾃⼰写的页⾯能够漂漂亮亮的。今天就分享⼀个简单⼜好看的登录界⾯，只需要⼀会会⼉啦！
先给⼤家看看成品的样⼦
简单介绍⼀下这个登录页⾯的效果。当我们把⿏标聚焦到两个输⼊框时，输⼊框的长度会变⼤，并且边框的颜⾊会改变。当⿏标移动到提交按钮的范围内，按钮会给内部填充颜⾊。
话不多说，我们现在就步⼊正题：
⾸先搭建好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; 就有⼀点点动画的效果了。
/* 设置提交按钮的样式 */
手机上可以打html与css的app.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;
}
最后，锵锵，我们的登录页⾯就新鲜出炉啦。（嗯，最好呢，下去回顾⼀下⾥⾯⽤到的知识点，我最近可能实验太多，脑⼦有点记不清东西了）
再附两张效果图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。