HTML .CSS实现登录页面（login）_html中的login-CSDN博客

本文链接：https://blog.csdn.net/qq_67519129/article/details/125363752

本文介绍了如何使用HTML和CSS创建一个简洁的用户登录表单，包括元素布局、样式设置和基本交互，适合初学者理解前端开发基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、实现过程

.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户登录</title>
		<link rel="stylesheet" href="css/login.css">
	</head>
	<body>
		<form action="#" id="form">
			<h1 style="text-align: center; color: aliceblue; font-weight: bold;">LOGIN   IN</h1>
			<p>用户名：<input id="userNname" type="text"/><label id="name_trip"></label></p>
			<p>密&nbsp;&nbsp;&nbsp;码：<input id="password" type="password"/><label id="password_trip"></label></p>
			<div style="text-align: center;margin-top: 30px;"></div>
			<input type="submit" class="button" value="登录"/>
			<input type="reset" class="button" value="重置"/>
		</form>
	</body>
</html>

.css

html{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: url(../img/bg.jpg) no-repeat 0px 0px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	-moz-background-size: 100% 100%;
}
body{
	display: flex;
	justify-content: center;
	align-items: center;
}
#login Div{
	width: 37%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 300px;
	background-color: rgba(75, 81, 95, 0.3);
	box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
	border-radius: 5px;
}
#name_trip{
	margin-left: 50px;
	color: red;
}
p{
	margin-top: 30px;
	margin-left: 20px;
	color: azure;
}
input{
	margin-left: 15px;
	border-radius: 5px;
	border-style: hidden;
	height: 30px;
	width: 140px;
	background-color: rgba(216, 191, 216, 0.5);
	 outline: none;
	 color: #f0edf3;
	 padding-left: 10px;
}

二、实现效果