登录页面

发表于 |

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>欢迎登录</title>
	<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
	<form>
		<div class="center">
			<input type="text" name="username" placeholder="用户名" id="user"><br>
			<input type="password" name="password" placeholder="密码" id="key"><br>
			<button id="sign_in" type="submit" >登录</button>	
		</div>
	</form>
</body>
</html>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
html,body{
			margin: 0;
    		padding: 0;
    		
}
body{
		background-image: url(http://www.10wallpaper.com/wallpaper/1920x1080/1302/black_hole-Fantasy_Artistic_design_Wallpaper_1920x1080.jpg);
		background-repeat: no-repeat;
		background-size:cover
		background-attachment: fixed; 
}
.center{
		text-align:center;
	}
#user{
		margin-top: 20%;
		font-size: 30px;
		border-radius:15px;
}
#key{
		font-size: 30px;
		border-radius:15px;
}
#sign_in{
      
  
    text-decoration:none;  
    background:#2f435e;  
    color:#f2f2f2;  
    padding: 10px 30px 10px 30px;  
    font-size:16px;  
    font-family: 微软雅黑,宋体,Arial,Helvetica,Verdana,sans-serif;  
    font-weight:bold;  
    border-radius:20px;  
    -webkit-transition:all linear 0.30s;  
    -moz-transition:all linear 0.30s;  
    transition:all linear 0.30s   /**-webkit-transition:运动的样式 持续时间 运动形式 延迟时间;**/
}