实景图
代码
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
6 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"/>
7 <title>默一</title>
8 <link rel="icon" type="text/css" href="1.gif" />
9 <style>
10 * {
11 margin: 0;
12 padding: 0;
13 }
14 html {
15 height: 100%;
16 }
17 body {
18 height: 100%;
19 }
20 .overall {
21 height: 100%;
22 background-image: linear-gradient(to right, #CFF, #FCF);
23 overflow:auto;
24 }
25 .frame
26 {
27 background:#FFF;
28 width:500px;
29 height:800px;
30 border-radius:20px;
31 padding:0px 50px;
32 position:relative;
33 margin:80px auto;
34 }
35 .login
36 {
37 width: 460px;
38 height: 75px;
39 margin-left: 20px;
40 float: left;
41 margin-top: 50px;
42 text-align: center;
43 font-size: 54px;
44 color: #000;
45 font-family: Tahoma, Geneva, sans-serif;
46 }
47 .box
48 {
49 width:480px;
50 height:600px;
51 float:left;
52 margin-left:10px;
53 margin-top:20px;
54 overflow:hidden;
55 }
56 .id
57 {
58 width:400px;
59 height:50px;
60 margin-left:40px;
61 margin-top:40px;
62 border-bottom:1px solid #333;
63 font-size:18px;
64 border: 0;
65 border-bottom: 1px solid rgb(128, 125, 125);
66 outline:none;
67 display:block;
68 }
69 .password
70 {
71 width:400px;
72 height:50px;
73 margin-left:40px;
74 margin-top:40px;
75 margin-bottom:40px;
76 border-bottom:1px solid #333;
77 font-size:18px;
78 border: 0;
79 border-bottom: 1px solid rgb(128, 125, 125);
80 outline:none;
81 display:block;
82 }
83 .logon
84 {
85 width:420px;
86 height:50px;
87 border-radius:20px;
88 display:block;
89 background-image: linear-gradient(to right, #CFF, #FCF);
90 font-size:24px;
91 padding-top:13px;
92 text-align:center;
93 text-decoration:none;
94 margin-left:35px;
95 margin-top:40px;
96 margin-bottom:40px;
97 }
98 .a
99 {
100 width:420px;
101 height:50px;
102 border-radius:20px;
103 display:block;
104 background-image: linear-gradient(to right, #FCC, #9FC);
105 font-size:24px;
106 padding-top:13px;
107 text-align:center;
108 margin-left:35px;
109 }
110 </style>
111 </head>
112 <body>
113 <div class="overall">
114 <div class="frame">
115 <div class="login">Hello</div>
116 <div class="box">
117 <input name="Account number" type="text" class="id" placeholder="Account number" size="3" maxlength="8">
118 <input name="Password" type="text" class="password" placeholder="Password" size="3" maxlength="12">
119 <a class="logon" href="https://blog.csdn.net/weixin_59064057?spm=1000.2115.3001.5343">Logon</a>
120 <a class="a">Don' t worry,being loaded!</a>
121 </div>
122 </div>
123 </div>
124 </div>
125 </div>
126 </body>
127 </html>
标签：40px,网页,登录,border,top,height,left,margin,页面 From： https://www.cnblogs.com/ykj521/p/18127657