2、django实现的登陆代码
HTML：
1. 2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title></title>
6. <link rel="stylesheet" type="text/css" href="css/tx1.css" />
7.
8. </head>
9. <body>
10.
11. <div class="login-box">
12. <h2>Login</h2>
13. <form>
14. <div class="login-field">
15. <input type="text" name="" required="" />
16. <label>Username</label>
17. </div>
18. <div class="login-field">
19. <input type="password" name="" required="" />
20. <label >Password</label>
21. </div>
22. <button type="submit">Submit</button>
23. </form>
24. </div>
25.
26.
27.
28. </body>
29. </html>css：
1. body{
2. margin: 0;
3. padding: 0;
4. font-family: sans-serif;
5. background: url(../img/bg.jpg) no-repeat center 0px;
6. background-size: cover;
7.
8.
9.
10. background-position: center 0;
11. background-repeat: no-repeat;
12. background-attachment: fixed;
13. -webkit-background-size: cover;
14. -o-background-size: cover;
15. -moz-background-size: cover;
16. -ms-background-size: cover;
17.
18. }
19. .login-box{
20. position: absolute;
21. top: 50%;
22. left: 50%;
23. transform: translate(-50%,-50%);
24. width: 400px;
25. padding:40px;
26. background: rgba(0,0,0,.8);
27. box-sizing: border-box;
28. box-shadow: 0 15px 25px rgba(0,0,0,.5);
29. border-radius: 10px;
30. }
31. .login-box h2{
32. margin: 0 0 30px;
33. padding: 0;
34. text-align: center;
35. color: #fff;
36. }
37. .login-box .login-field{
38. position: relative;
39. }
40. .login-box .login-field input{
41. width: 100%;
42. padding: 10px 0;
43. font-size: 16px;
44. color: #fff;
45. margin-bottom: 30px;
46. border: none;
47. border-bottom: 1px solid #fff;
48. outline: none;
49. background: transparent;
50. }
51. .login-box .login-field label{
52. position: absolute;
53. top: 0;
54. left: 0;
55. letter-spacing: 1px;
56. padding: 10px 0;
57. font-size: 16px;
58. color: #fff;
59. pointer-events: none;
60. transition: .5s;
61. }
62. .login-box .login-field input:focus ~ label,
63. .login-box .login-field input:valid ~ label{
64. top: -23px;
65. left: 0;
66. color: aqua;
67. font-size: 12px;
68. }
69. .login-box button{
70. background: transparent;
71. border: none;
72. outline: none;
73. color: #fff;
74. background: #03a9f4;
75. padding: 10px 20px;
76. cursor: pointer;
77. border-radius: 5px;
78. }
