没有那么好看的登录页面

最新推荐文章于 2024-09-13 23:32:49 发布

雷霆半月斩掉你的板砖

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量117

点赞数 3

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Mxy18851251178/article/details/133197505

版权

hello，大家好我是你们的半月斩今天给大家分享一下我做的登录页面不喜勿喷

首先是html格式：

<!-- 背景图片 -->
		<div class="biggest_backgound">
			<!-- 登录窗口 -->
			<div class="log_on_box">
				<h1>登 录</h1>
				<input type="number" placeholder="请输入账号">
				<br>
				<input type="password" placeholder="请输入密码">
				<div class="Enter_but" onclick="Enter_but()">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</div>
				<div class="smaller_box">
					<span>还没有账号？</span>
					<span class="smaller_box_two">注册</span>
				</div>
			</div>
		</div>

接下来是css样式：

*{
	margin: 0;
	padding: 0;
}

/* 背景图片 */

.biggest_backgound{
	height: 100vh;
	background-image: url(../img/QQ20230922163710.png);
	background-size:100% 100%;
	opacity: 90%;
	background-repeat: no-repeat;
	position: relative;
}


/* 登录窗口 */
.log_on_box{
	width: 80%;
	background-color: rgba(255, 255, 255, 0.5);
	margin: 45% 10% 45% 10%;
	border-radius: 5px;
	position: absolute;
}

h1{
	width: 100%;
	text-align: center;
	margin: 1vh 0;
}

input{
	margin: 2vh 10% 1vh 10%;
	width: 78%;
	height: 3vh;
	border: none;
	border-radius: 2px;
	padding: 1vh 0% 1vh 2%;
}

.Enter_but{
	width: 80%;
	height: 5vh;
	border-radius: 50px;
	background-color: #3388FF;
	color: aliceblue;
	font-size: 20px;
	font-weight: 700;
	margin: 3vh 10% 0 10%;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.smaller_box{
	margin: 2vh 10% 1vh 10%;
	width: 78%;
	font-size: 14px;
}

.smaller_box_two{
	color: #3388FF;
	font-weight: 900;
	
}

这样就可以很轻松的实现登录页面啦背景颜色可以自行调节的哦