【html+css】炫酷登录页面

最新推荐文章于 2024-09-14 12:37:34 发布

「已注销」

最新推荐文章于 2024-09-14 12:37:34 发布

阅读量633

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/ZHAOYANGLloveyou/article/details/125303596

版权

这个博客展示了如何使用HTML和CSS创建一个具有背景图片、响应式布局和动画效果的图书管理系统登录页面。代码中详细定义了样式，包括盒子模型、边框阴影、圆角、输入框和按钮的设计。此外，还设置了页面元素的位置，确保在不同设备上保持视觉一致性。

摘要由CSDN通过智能技术生成

页面效果

html+css代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/login.css" />
		<style>
			body {
				background: url("img/登录背景.jpg") no-repeat center center fixed;
				/*兼容浏览器版本*/
				-webkit-background-size: cover;
				-o-background-size: cover;
				background-size: cover;
			}
			
			* {
				padding: 0;
				margin: 0;
			}
			
			.active {
				height: 300px;
				width: 350px;
				border-radius: 10px;
				box-shadow: 0 0 15px #B0E0E inset;
				position: absolute;
				top: 20%;
				left: 40%;
			}
			
			h1 {
				font-family: "华文行楷";
				position: absolute;
				top: 16.9%;
				left: 44%;
			}
			
			.center {
				position: absolute;
				top: 25%;
				left: 5%;
			}
			
			label {
				font-family: "华文行楷";
				font-size: 25px;
			}
			
			.user {
				height: 25px;
				width: 200px;
				border-radius: 5px;
			}
			
			.btn {
				position: absolute;
				left: 35%;
			}
			
			#dl {
				width: 70px;
				height: 30px;
				border-radius: 5px;
				cursor: pointer;
				background: red;
			}
			
			#dl:hover {
				background: darkred;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<h1>图书管理系统</h1>
			<div class="active">
				<div class="center">
					<form action="##" method="get">
						<label>账号：</label>
						<input type="text" id="username" class="user" placeholder="请输入账号...." /></br>
						</br>
						<label>密码：</label>
						<input type="password" id="pwd" class="user" placeholder="请输入密码....." /></br>
						</br>
						</br>
						<div class="btn">
							<input type="submit" id="dl" value="登录" />
							<input type="submit" id="dl" value="取消" />
						</div>
					</form>
				</div>
			</div>
		</div>
	</body>
	<script>	
	</script>
</html>