登录样式

html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>登录</title>
 6 <link rel="stylesheet" href="denglu.css">
 7 </head>
 8 <body>
 9     <div class="container">
10 <div class="main">
11         <h1>Welcome</h1>
12         <form action="">
13         <input type="text" name="username" placeholder="请输入账号">
14         <input type="password" name="password" placeholder="请输入密码">
15         <button type="submit">登&nbsp&nbsp录</button>
16         </form>
17         
18     </div>
19     </div>
20     
21 </body>
22 </html>

css

 1 *{
 2     margin: 0;
 3     padding: 0;
 4 }
 5 body{
 6     color: white;
 7 }
 8 /*清除点击黑框框*/
 9 input,button{
10     outline:none;
11 }
12 .container{
13     background-color: pink;
14     top: 50%;
15      width:100%;
16      height:400px;
17      margin-top: 150px;
18      overflow: hidden;
19 }
20 .main{
21     text-align: center;
22     height: 400px;
23     margin: 0 auto;
24     padding:20px 0px;
25     max-width: 600px;
26 }
27 .main h1{
28     font-size: 70px;
29     font-family: "楷体";
30     color: white;
31     font-weight: bold;
32 }
33 form{
34     padding: 5px 0;
35 }
36 form input{
37     border-radius: 30px;
38     display: block;
39     border: 1px solid white;
40     width: 220px;
41     padding: 10px;
42     text-align: center;
43     margin: 0 auto 10px auto;
44     font-weight: 300;
45     font-size: 16px;
46 
47 
48 }
49 form input:hover{
50     background-color: pink;
51 }
52 form button {
53     border-radius: 30px;
54     background-color: yellow;
55     border: 0;
56     width: 50px;
57     height: 30px;
58     padding: 5px 10px;
59 }
60 form button:hover{
61     background-color: red;
62 }

显示效果

 

posted @ 2020-08-31 00:43  recommencer  阅读(233)  评论(0)    收藏  举报