小程序内实现较精美的登录页面
先上效果图：
实现过程：
在html网页中先定义一个表单以后，再定义一个Login标题，两个输入框，最后一个登录按键，主要功夫为css配置。
- 先定义页面主体，标准的消内外边距
body {
margin:0;
padding:0;
font-family:sans-serif;
background-color: #ecf0f1;
}
- 定义表单整体样式
.box {
width:300px;
padding:40px;
top:50%;
left:50%;
transform: translate(-50%,-50%);
position:absolute;
background-color: #34495e;
text-align: center;
}
- 定义该表单中两个文本输入框的样式，可以根据喜好调整transition的动画时间
.box input[type="text"],.box input[type="password"] {
background: none;
display: block;
text-align: center;
border:0;
margin:20px auto;
border:2px solid #2980b9;
padding:14px 10px;
width:200px;
outline:none;
color:white;
border-radius: 24px;
transition: 0.5s;
}
- 定义当光标放在两个输入框时的样式，这里我只是简单的变宽和蓝色变亮
.box input[type="text"]:focus,.box input[type="password"]:focus {
width:280px;
border-color:#3498db;
}
- 定义提交按钮的样式
.box input[type="submit"] {
color:white;
background: none;
display: block;
text-align: center;
border:0;
margin:20px auto;
border:2px solid #2ecc71;
padding:14px 10px;
cursor:pointer;
width:180px;
outline:none;
border-radius: 24px;
transition: 0.25s;
}
- 定义提交按钮的选中样式，这里我简单把背景调成对应绿色，就已经很好看了
.box input[type="submit"]:hover{
background-color: #2ecc71;
}
7.大概完成后，发现页面标题默认黑色与表单背景颜色不太符合，因此调成白色即可
h1 {
color:#ecf0f1;
}
本页面全部代码如下：
html中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<form class="box" method="post">
<h1>Login</h1>
<input type="text" name="firstName" placeholder="账户名称">
<input type="password" name="firstPassword" placeholder="密码">
<input type="submit" name="firstSubmit" value="登录">
</form>
</body>
</html>
CSS中：
body {
margin:0;
padding:0;
font-family:sans-serif;
background-color: #ecf0f1;
}
.box {
width:300px;
padding:40px;
top:50%;
left:50%;
transform: translate(-50%,-50%);
position:absolute;
background-color: #34495e;
text-align: center;
}
.box input[type="text"],.box input[type="password"] {
background: none;
display: block;
text-align: center;
border:0;
margin:20px auto;
border:2px solid #2980b9;
padding:14px 10px;
width:200px;
outline:none;
color:white;
border-radius: 24px;
transition: 0.5s;
}
.box input[type="text"]:focus,.box input[type="password"]:focus {
width:280px;
border-color:#3498db;
}
.box input[type="submit"] {
color:white;
background: none;
display: block;
text-align: center;
border:0;
margin:20px auto;
border:2px solid #2ecc71;
padding:14px 10px;
cursor:pointer;
width:180px;
outline:none;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="submit"]:hover{
background-color: #2ecc71;
}
h1 {
color:#ecf0f1;
}
如果你喜欢该篇文章，请不要忘记点击右下角的大拇指进行点赞噢~
强力驱动