暑期学习日记33：登录页面

最新推荐文章于 2024-05-19 21:11:24 发布

土肥圆波太郎

最新推荐文章于 2024-05-19 21:11:24 发布

阅读量104

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/weixin_48485475/article/details/126632764

版权

今天学习使用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">密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password"></div>
		<div class="flex1"><button>登录</button></div>
	</div>
</body>
</html>

显示效果为：