html+css漂亮登录页面

一、先上最终效果:

html+css漂亮登录页面_第1张图片

二、代码

总结构图:
html+css漂亮登录页面_第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;
	
}

3、背景图片自取

html+css漂亮登录页面_第3张图片
希望帮到更多的小伙伴们~~~~~~~~~

你可能感兴趣的:(Html,html,css,html5,css3)