javascript 登录界面

1.登录界面

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>登陆界面</title>
 6     <meta keywords="" >
 7     <style type="text/css">
 8     *{
 9         margin: 0;padding: 0;
10     }
11     html{
12         height: 100%;
13 
14     }
15     body{
16          display: flex;
17          justify-content: space-around;
18          align-items: center;
19          height: 100%;
20          background-image:url(img/bg.jpg);
21 
22     }
23         .login-wrap{
24             width: 300px;
25             height: 300px;
26             background-color: #ccc;
27             border-radius: 10px;
28         }
29        .login-wrap:before{
30                 display: block;
31                 content: '';
32              width: 100%;
33              height: 16px;
34              background-color:#dbc458;
35              border-radius: 10px 10px 0px 0px;
36        }
37        .login-wrap h2{
38            font-size: 2em;
39            color: #368;
40            text-align: center;
41            line-height: 80px;
42        }
43       form.login-content{
44           display: flex;
45           flex-direction: column;
46           justify-content: space-around;
47           align-items: center;
48            width: 100%;
49            height: 200px;
50      
51        }
52        form.login-content input{
53              width: 80%;
54              height:40px;
55              border:1px solid #bbb;
56              outline: 0;
57              text-indent: 1em;
58              border-radius: 5px;
59        }
60        form.login-content input[type='submit']{
61            text-indent: 0; 
62            background-color:#e74c3c;
63            font-size: 1.3em;
64            color:#fff;
65            
66 
67        }
68     </style>
69 </head>
70 <body>
71     <div class="login-wrap">
72           <h2>LOGIN</h2>
73          <form action="https://passport.cnblogs.com/user/signin?ReturnUrl=https%3A%2F%2Fwww.cnblogs.com%2F" class="login-content">
74                 <input type='text' name='user' placeholder="请输入用户名">
75                   <input type='password' name="pwd" placeholder="请输入密码">
76                   <input type='submit' value="sign in">
77           </form>
78     </div>
79 </body>
80 </html>
View Code
posted @ 2018-01-20 11:53  Justice-V  阅读(644)  评论(0)    收藏  举报