静态登录界面

quiqui1314

已于 2023-03-10 22:28:53 修改

阅读量233

点赞数

分类专栏：登陆界面初级网页文章标签： css html css3

于 2023-03-10 22:04:46 首次发布

本文链接：https://blog.csdn.net/quiqui1314/article/details/129454450

版权

初级网页同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

登陆界面

1 篇文章 0 订阅

订阅专栏

http:// http://mu-mu-qiu.gitee.io/login

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
<style>
*{
	margin: 0;
	padding: 0;
}
.context{
	width: 100vw;
	height: 100vh;
	position: relative;
	background: url("image3/32309694.jpg") no-repeat;
	align-items: center;
	justify-content: center;
	display: flex;
	background-size: cover;
}
.login-box{
	background:linear-gradient(to right,#fdc5a4,#fcad86,#fec8e4,#f4a1bb,#968fde) ;
	width:400px;
	height: 250px;
	border-radius:20px;
	padding: 20px;
	text-align: center;
	
}
.login-box h1{
	color: #968fde;
	margin: 20px auto;
}
.login-box input{
	width: 200px;
	height: 40px;
	border-radius: 15px;
	margin-bottom: 20px;
	font-size: 18px;
	color:#fff;
	border: none;
	outline: none;
	padding: 0 20px;
}
.login-context{
	font-size: 23px;
	font-weight: bold;
	color: #968fde;
}
button{
	 display: inline-block;
	margin-top: 10px;
	width: 100px;
	height: 40px;
	border: none;
	border-radius: 40px;
	background:linear-gradient(to right,#D77E0C,#ffcb98,#f6f781);
	color: #968fde;
	font-size: 18px;
	font-weight: 550;
}
</style>
</head>

<body>
<div class="context">
	<div class="login-box">
			<h1>欢迎登录</h1>
		 <div class="login-context">账号：<input type="text" placeholder="请输入账号"></div>
		<div class="login-context">密码：<input type="password" placeholder="请输入密码"></div>
		<button>登录</button>
	</div>
	
</div>
</body>
</html>