html：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <link rel="stylesheet" href="css/login.css">
8 <title>树懒电影登录</title>
9 </head>
10 <body>
11 <div id="container">
12 <div id="container-child">
13 <div id="img-div"><img src="images/shulan.png"></div>
14 <div id="login-div">
15 <div>
16 <p class="p-title">登录您的树懒电影</p>
17 <form id="login-form">
18 <div class="input-d">
19 <input class="input-text" type="text" name="username" id="username" placeholder="请输入您的账号">
20 </div>
21 <div class="input-d">
22 <input class="input-text" type="password" name="password" id="password" placeholder="请输入您的密码">
23 </div>
24 <div class="div-input">
25 <div>
26 <input type="checkbox" name="remember" id="remember">
27 <label>记住密码</label>
28 <a href="#">忘记密码</a>
29 </div>
30 </div>
31 <button type="button" class="login-button">登 录</button>
32 <div class="footer"> <a href="regitser.html">注册</a> | <a href="#">切换账号</a></div>
33
34 </form>
35 </div>
36 </div>
37 </div>
38
39 </div>
40 </body>
41 </html>
CSS：
1 *{
2 padding: 0px;
3 margin: 0px;
4 }
5 body{
6 background-image: radial-gradient(circle at 10% 20%, rgb(0, 255, 176) 10%, rgb(66, 105, 242) 90%);
7 background-size: 125% 125%;
8 }
9 img{
10 width: 250px;
11 height: 330px;
12 margin-top: 25px;
13 }
14 a{
15 text-decoration: none;
16 font-size: 14px;
17 color: #186498;
18 }
19 #container{
20 /* position: absolute; */
21 height: 400px;
22 margin: auto;
23 margin-top: 12%;
24 margin-left: 27%;
25 }
26 #container-child>div{
27 float: left;
28 }
29 #container-child #login-div{
30 margin: 0,auto;
31 float: left;
32 width: 390px;
33 height: 380px;
34 background-color: rgba(166, 230, 235,0);
35 }
36 #login-div>div{
37 width: 80%;
38 margin: auto;
39 }
40 .p-title{
41 color: #186498;
42 font-size: 24px;
43 font-weight: bold;
44 margin-top: 30px;
45 margin-bottom: 30px;
46 }
47 .input-text{
48 display: inline-block;
49 width: 96.5%;
50 height: 40px;
51 padding-left: 10px;
52 /* margin-bottom: 24px; */
53 font-size: 16px;
54 border: 0;
55 }
56 .input-d{
57 padding: 0;
58 width: 100%;
59 border: 1px solid #666666;
60 margin-top: 30px;
61 }
62 .div-input{
63 padding: 0;
64 width: 100%;
65 font-size: 14px;
66 margin-top: 16px;
67 }
68 .div-input label{
69 color:#666666;
70 }
71 .div-input a{
72 /* float: right; */
73 margin-left: 168px;
74 }
75 .div-input input{
76 width: 20px;
77 height: 20px;
78 margin-left: 0px;
79 vertical-align: middle;
80 border: 0;
81 }
82 .login-button{
83 width: 100%;
84 height: 46px;
85 background-color: #186498;
86 text-align: center;
87 border: 0px;
88 margin-top: 26px;
89 color: white;
90 font-size: 16px;
91 cursor: pointer;
92 }
93 .footer{
94 float: right;
95 margin-top: 20px;
96 }
登录截图：
