登录页面

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>