作为一个有审美的程序猿，我希望自己写的页面能够漂漂亮亮的。今天就分享一个简单又好看的登录界面，只需要一会会儿啦！
先给大家看看成品的样子
简单介绍一下这个登录页面的效果。当我们把鼠标聚焦到两个输入框时，输入框的长度会变大，并且边框的颜色会改变。当鼠标移动到提交按钮的范围内，按钮会给内部填充颜色。
话不多说，我们现在就步入正题：
- 首先搭建好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;
}
- 最后，锵锵，我们的登录页面就新鲜出炉啦。（嗯，最好呢，下去回顾一下里面用到的知识点，我最近可能实验太多，脑子有点记不清东西了）
再附两张效果图
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
