代码： <!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> <style> table{ width:1300px ; height: 100px; margin: 0 auto; } a{ color: aliceblue; } .box{ width: 400px; padding: 40px; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); background: rgba(235, 231, 231, 0.5); box-sizing: border-box; box-shadow: 0px 25px 25px rgb(0,0,0,.5); border-radius: 15px; } h2{ color: rgb(9, 48, 155); } </style> </head> <body background="imges\背景.jpg" > <nav> <table> <tr> <th><a href="#" >Welcome</a></th> <th><a href="#" >View</a></th> <th><a href="#" >About</a></th> <th><a href="#" >Join</a></th> </tr> </table> </nav> <div class="box"> <h2> 登录</h2> <form> <div class="inputbox"> <label>用户名：</label> <input type="text" name=" " required=""/> </div> <div class="inputbox"> <labe>密码： </labe> <input type="password"name=" "required=""/> </div> <div> <a href="#" style="color: black;position: relative;left: 10%;">忘记密码</a> <a href="#" style="color: black;position: relative;left: 30%;">新用户注册</a> </div> <input type="submit"name=" "value="登录" style="position: absolute;right: 50%;"> </form> </div> </body> </html>
