效果如下：
背景圖片、用戶名及密碼的圖片如下：（背景圖片來源於百度百科，用戶名及密碼的圖片來源於阿里巴巴矢量圖標庫，若有侵權，請聯系刪除）
background.jpg
Username.png
Password.png
工程目錄如下：
代碼如下：
Login.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>鮮花禮品登錄界面</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 html { 12 height: 100%; 13 width: 100%; 14 overflow: hidden; 15 margin: 0; 16 padding: 0; 17 background: url(image/background.jpg) no-repeat 0px 0px; 18 background-repeat: no-repeat; 19 background-size: 100% 100%; 20 -moz-background-size: 100% 100%; 21 } 22 23 body { 24 display: flex; 25 align-items: center; 26 justify-content: center; 27 height: 100%; 28 } 29 30 #Login { 31 width: 37%; 32 display: flex; 33 justify-content: center; 34 align-items: center; 35 height: 300px; 36 background-color: #FFEFDB; 37 box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5); 38 border-radius: 5px; 39 } 40 41 input { 42 margin-left: 15px; 43 border-radius: 5px; 44 border-style: hidden; 45 height: 30px; 46 width: 140px; 47 background-color: rgba(216, 191, 216, 0.5); 48 outline: none; 49 color: #f0edf3; 50 padding-left: 10px; 51 } 52 53 .button { 54 border-color: cornsilk; 55 background-color: rgba(100, 149, 237, .7); 56 color: aliceblue; 57 border-style: hidden; 58 border-radius: 5px; 59 width: 100px; 60 height: 31px; 61 font-size: 16px; 62 } 63 </style> 64 </head> 65 66 <body background="background.jpg" style="background-repeat:no-repeat;background-size:100% 100%;background-attachment:fixed;"> 67 <div id="Login"> 68 <form action="" id="form"> 69 70 <h1 style="text-align: center;color: #F08080;font-family: 華文楷體">登錄</h1> 71 <p> 72 <img src="image/Username.png" style="height: 30px"> 73 <input id="ussernam" type="text"> 74 </p> 75 76 <p> 77 <img src="image/Password.png" style="height: 30px"> 78 <input id="password" type="password"> 79 </p> 80 81 <div style="text-align: center;margin-top: 30px;"> 82 <input type="submit" class="button" value="進入"> 83 <a href="Register.html"><input type="button" class="button" value="注冊"></a> 84 </div> 85 86 </form> 87 </div> 88 </body> 89 </html>
Register.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>鮮花禮品注冊界面</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 html { 13 height: 100%; 14 width: 100%; 15 overflow: hidden; 16 margin: 0; 17 padding: 0; 18 background: url(image/background.jpg) no-repeat 0px 0px; 19 background-repeat: no-repeat; 20 background-size: 100% 100%; 21 -moz-background-size: 100% 100%; 22 } 23 24 body { 25 display: flex; 26 align-items: center; 27 justify-content: center; 28 height: 100%; 29 } 30 31 #contain { 32 width: 37%; 33 display: flex; 34 justify-content: center; 35 align-items: center; 36 height: 300px; 37 background-color: #FFEFDB; 38 box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5); 39 border-radius: 5px; 40 } 41 42 p, 43 .sexDiv { 44 margin-top: 10px; 45 margin-left: 20px; 46 color: #F08080; 47 } 48 49 .sexDiv>input, 50 .hobby>input { 51 width: 30px; 52 height: 17px; 53 } 54 55 input, 56 select { 57 margin-left: 15px; 58 border-radius: 5px; 59 border-style: hidden; 60 height: 30px; 61 width: 140px; 62 background-color: rgba(216, 191, 216, 0.5); 63 outline: none; 64 color: #F08080; 65 padding-left: 10px; 66 } 67 68 .button { 69 border-color: cornsilk; 70 background-color: rgba(100, 149, 237, .7); 71 color: aliceblue; 72 border-style: hidden; 73 border-radius: 5px; 74 width: 100px; 75 height: 31px; 76 font-size: 16px; 77 } 78 79 .introduce>textarea { 80 background-color: rgba(216, 191, 216, 0.5); 81 border-style: hidden; 82 outline: none; 83 border-radius: 5px; 84 } 85 86 b { 87 margin-left: 50px; 88 color: #FFEB3B; 89 font-size: 10px; 90 font-weight: initial; 91 } 92 </style> 93 </head> 94 95 <body> 96 <div id="contain"> 97 <form action=""> 98 <h1 style="text-align: center;color: #F08080;font-family: 華文楷體">注冊</h1> 99 <p>用戶名:<input id="username" type="text" autofocus required></p> 100 101 <p>密碼:<input id="password" type="password" required></p> 102 103 <p>確認密碼:<input id="surePassword" type="password" required></p> 104 105 <p> 106 用戶類型: 107 <select name="type" id="userType"> 108 <option value="0">請選擇</option> 109 <option value="1">游客</option> 110 <option value="2">普通用戶</option> 111 <option value="3">管理員</option> 112 </select> 113 </p> 114 <p style="text-align: center;"> 115 <input type="submit" class="button" value="提交"> 116 <input type="reset" class="button" value="重置"> 117 </p> 118 </form> 119 </div> 120 </body> 121 </html>
參考博客：https://blog.csdn.net/qq_44204058/article/details/108678174