html+css漂亮登录页面

最新推荐文章于 2024-10-11 10:05:29 发布

weixin_74

最新推荐文章于 2024-10-11 10:05:29 发布

阅读量4.8k

点赞数 6

分类专栏： Html 文章标签： html css html5 css3

本文链接：https://blog.csdn.net/weixin_44727274/article/details/110573057

版权

Html 专栏收录该内容

2 篇文章 2 订阅

订阅专栏

一、先上最终效果：

在这里插入图片描述

二、代码

总结构图：
在这里插入图片描述

1、index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Login</title>
		<link rel="stylesheet"href="./css/style.css" />
	</head>
	<body>
		<form class="box" action="index.html"method="post">
			<h1>Login</h1>
			<input type="text"name=""placeholder="UserName" />
			<input type="password"name=""placeholder="UserPassword" />
			<input type="submit" name="" value="Login" />
			
		</form>
	</body>
</html>

2、style.css

body{
	margin: 0;
	padding: 0;
	background-image: url(../img/桥.jpg);
	background-repeat: no-repeat;
	background-size:100%;
	background-position: 0px -50px;
}
.box{
	width: 300px;
	padding: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background-color: #00000068;
	text-align: center;
}

.box input[type = "text"],.box input[type = "password"]{
	border: 0;
	background: none;
	display: block;
	margin: 20px auto;
	text-align: center;
	border: 2px solid #c8d6e5;
	padding: 14px 10px;
	outline: none;
	color: #ffffff;
	border-radius: 24px;
	transition: 0.25s;
}
h1{
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: 500;
}

.box input[type = "text"]:focus, .box input[type = "password"]:focus{
	width: 280px;
	border-color: #FFFFFF;
}
.box input[type = "submit"]{
	border: 0;
	font-size: 17px;
	background: none;
	display: block;
	margin: 20px auto;
	text-align: center;
	border: 2px solid #FFFFFF;
	padding: 14px 40px;
	outline: none;
	color: #ffffff;
	border-radius: 24px;
	transition: 0.25s;
	cursor: pointer;
}
.box input[type = "submit"]:hover{
	background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
	font-size: x-large;
	
}