實景圖
程式碼
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>