<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> *{ margin: 0; padding: 0; } .container{ margin: auto; margin-top: 50px; width: 320px; height: 420px; background-color: #FCE7EA; border-top: 3px solid #77C7EA; border-left: 1px solid #77C7EA; border-right: 1px solid #77C7EA; } .main{ width: 320px; height: 320px; border: 1px solid #DDDDDD; } .user .myuser{ margin-top: 30px; margin-left: 30px; position: relative; } .main img{ float: left; } .user input{ border: 1.8px solid #DDDDDD; background-color: #FCE7EA; height: 39px; width: 200px; } .choose{ margin-top: 30px; margin-left: 30px; } .choose span{ font-size: 12px; color: #DDDDDD; margin-left: 10px; } .choose span:hover{ color: gray; } .sub{ margin: 30px 30px; } .mycheckbox{ background-color: gray; } .buttom{ margin: 30px 35px; } .buttom span{ font-size: 14px; } .buttom img{ margin-left: 3px; } </style> <body> <div class="container"> <div class="main"> <div class="user"> <div class="myuser"> <div class="myImage"> <img src="./images/zhanghao.jpg" alt=""> </div> <div class="username"> <input type="text" placeholder="用戶名/郵箱/地址/手機號"> </div> </div> <div class="myuser"> <div class="myImage"> <img src="./images/mima.jpg" alt=""> </div> <div class="password"> <input type="text" placeholder="請輸入密碼"> </div> </div> </div> <div class="choose"> <input class="mycheckbox" type="checkbox" name="x1" value="remember">記住密碼 <span>歡迎註冊</span> <span>忘記密碼</span> </div> <div class="sub"> <img src="./images/but.jpg" alt=""> </div> </div> <div class="buttom"> <span>合作網站賬號登錄:</span> <img src="./images/weixin.png" alt=""> <img src="./images/qqlogin.png" alt=""> <img src="./images/taobao.png" alt=""> </div> </div> </body> </html>