登录页面

1 year ago · 4acea3939a
parent bfcfdde7be
commit 4acea3939a
1 changed files with 126 additions and 0 deletions
--- a/Login.html
+++ b/Login.html
@ -0,0 +1,126 @@
 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8">
 		<title>登录页面</title>
 		<style>
 			body{
 				background: url("img/bg.png");
 				/* background-image: url("img/bg.png"); */
 				background-size: cover;
 				background-position: center;
 				background-repeat: no-repeat;
 				background-attachment: fixed;
 			}
 			.top{
 				border-style: solid;
 				border-width: 1px;
 				border-color: #555;
 				height: 80px;
 				width: 100%;
 				position: absolute;
 				top: 0;
 				left: 0;
 				background-color: #1AA093;
 				text-align: center;
 			}
 			.top p{
 				color: #eeeeee;
 			}
 		    p{
 				font-size: 25px;
 				color: #444;
 			}
 			.loginForm{
 				border-style: solid;
 				border-width: 1px;
 				border-color: #555;
 				//padding: 50px;
 				border-radius: 5px;
 				position: fixed;
 				left: 30%;
 				top: 25%;
 				width: 40%;
 				height: 500px;
 				background-color: #3bb2a6;
 			}
 			.my-input{
 				//position: absolute;
 				//top: 200px;
 				//left: 45%;
 				//display: inline-block;
 				height: 30px;
 			    width: 180px;
 			}
 			.my-input:focus{
 			    border-color: #189f92!important;
 			}
 			.in{
 				position: absolute;
 				top: 38%;
 				left: 25%;
 				width: 500px;
 				height: 300px;
 				display: inline-block;
 				clear: both;
 			}
 			.in p{
 				display: inline-block;
 				width: 150px;
 			}
 			.go{
 				border-style: solid;
 				border-width: 1px;
 				border-color: #555;
 				display: block;
 				position: absolute;
 				bottom: 5%;
 				left: 40%;
 				width: 20%;
 				height: 15%;
 				background-color: #e5e5e5;
 				z-index: 1;
 				border-radius: 5px;
 				text-align: center;
 				//padding: 5px;
 			}
 			.go p{
 				color: #555;
 			}
 			a{
 				text-decoration: none;
 			}
 			.x{
 				border-style: solid;
 				border-width: 1px;
 				border-color: #555;
 				display: block;
 				position: absolute;
 				top: 0;
 				border-radius: 5px 5px 0px 0px;
 				height: 20%;
 				width: 100%;
 				background-color: #e5e5e5;
 				text-align: center;
 			}
 			.x p{
 				color: #555555;
 				font-size: 25px;
 			}
 		</style>
 	</head>
 	<body>
 		<div class="top"><p>欢迎来到Arknights书城!</p></div>
 		<div class="loginForm">
 			<div class="x"><p>请输入用户信息</p></div>
 			<form action="#" class="in">
 					<p>请输入账户</p><input type="text" name="账户" class="my-input"><br>
 					<p>请输入密码</p><input type="password" name="账户" class="my-input">
 			</form>
 			<div class="go">
 				<a href="index.html"><p>进入书城</p></a>
 			</div>
 		</div>
 		<footer><p>版权所有，侵权必究</p></footer>
 	</body>
 </html>