今天学习使用html+css制作了登录页面,与之前用js制作的验证码生成可以结合起来成为一个具有验证登录功能的页面。
代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登录窗口</title>
<style>
#logindiv{
width: 300px;
height: 200px;
background: white;
border-radius: 10px;
margin: 100px auto;
display: flex;
flex-direction: column;
overflow: hidden;
}
body{
background: lightblue;
}
.flex1{
flex: 1;
text-align: center;
line-height: 50px;
}
.login1{
background: darkblue;
color: white;
}
.flex1 input{
font-size: 16px;
}
.flex1 button{
font-size: 16px;
}
</style>
</head>
<body>
<div id="logindiv">
<div class="flex1 login1">登录窗口</div>
<div class="flex1">用户名:<input type="text"></div>
<div class="flex1">密 码:<input type="password"></div>
<div class="flex1"><button>登录</button></div>
</div>
</body>
</html>
显示效果为: