团队项目---登录页面实现

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">登&emsp;录</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 }

登录截图：

 

 

 

 

posted @ 2021-05-10 22:30  靠谱杨  阅读(71)  评论(0)  编辑  收藏  举报