最終效果如下圖
實現的代碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--頭部圖片--> 9 <div style="width: 800px;height: 50px;margin-left: 20%"> 10 <img src="oldboy.png"> 11 </div> 12 <!--主界面--> 13 <div> 14 <!--居中大框--> 15 <div style="width: 600px;height: 300px;margin: 0 auto;border: 1px solid silver;margin-top: 3%;position:relative"> 16 17 <!--左側發財圖片--> 18 <div style="width: 300px;height: 250px;text-align:center;position: absolute;top:25px;float: left"> 19 <img src="show.png"> 20 </div> 21 <!--右側登錄界面--> 22 <div style="width: 300px;height: 250px;position: absolute;right:0;top:25px;float: right;"> 23 <!--用戶名--> 24 <div style="width:200px"> 25 <div style="width:80px;text-align: right;float: left"> 26 <img src="spot.png" style="display: inline-block"> 27 <div style="display: inline-block">用戶名:</div> 28 </div> 29 <div style="width:100px;float: right"> 30 <input type="text " style="position: absolute;display: inline-block"> 31 </div> 32 </div> 33 <!--密碼--> 34 <div style="width:200px;margin-top: 30px"> 35 <div style="width:80px;text-align: right;float: left"> 36 <img src="spot.png" style="display: inline-block"> 37 <div style="display: inline-block">密碼:</div> 38 </div> 39 <div style="width:100px;float: right"> 40 <input type="text " style="position: absolute;display: inline-block"> 41 </div> 42 </div> 43 <!--驗證碼--> 44 <div style="width:200px;margin-top: 60px"> 45 <div style="width:80px;text-align: right;float: left"> 46 <img src="spot.png" style="display: inline-block"> 47 <div style="display: inline-block">驗證碼:</div> 48 </div> 49 <div style="width:100px;float: right"> 50 <input type="text " style="position: absolute;display: inline-block"> 51 </div> 52 </div> 53 <!--自動登錄--> 54 <div style="margin-top: 90px;text-align: center"> 55 <input type="checkbox" style="display: inline-block"> 56 <div style="display: inline-block"> 自動登陸</div> 57 </div> 58 <!--登陸--> 59 <div style="width:150px; 60 height:30px; 61 background-color: red; 62 color: white; 63 text-align: center; 64 line-height: 30px; 65 margin: 0 auto; 66 margin-top:10px; 67 ">登錄 68 </div> 69 70 </div> 71 <!--右下角免費注冊--> 72 <div style="background-color: darkgreen; 73 color:white; 74 width: 100px; 75 height:30px; 76 position: absolute; 77 right: 0; 78 bottom: 5px; 79 text-align: center; 80 line-height: 30px"> 免費注冊>></div> 81 <div style="clear: both"></div> 82 </div> 83 </div> 84 </body> 85 </html>