利用基础知识做个登陆框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background: linear-gradient(to right,red,blue);
			}
			div{
				width: 400px;
			    height: 350px;
			    margin: 200px auto;
				background:rgba(102,174,255,0.5);
				border-radius: 20px;
				text-align: center;
			}
			img{
				width: 80px;
				height: 80px;
				border-radius: 50%;
				margin: 30px auto;
			}
			input{
				width:300px;
				height: 35px;
				padding-left: 10px;
				border-radius: 5px;
				border: none;
				margin-bottom: 20px;
			}
			button{
				width:200px;
				height: 35px;
				border: none;
				background: #7F007F;
				color: white;
				border-radius: 5px;
			}
		</style>
	</head>
	<body>
		<div>
			<form action="">
				<img src="static/images/3.jpeg"><br/>
				<input type="text" placeholder="请输入用户名"/><br/>
				<input type="password" placeholder="请输入密码"/><br/>
				<button>登陆</button>
			</form>
		</div>
	</body>
</html>
相关文章
