登陆表单
效果图
html代码
<!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>后台管理</title> </head> <style> .top { background: #008ead; width: 100%; height: 400px; padding: 0px; margin: 0px; font-size: 20px; } .fra { width: 400px; height: 250px; margin: auto auto; background: #ffffff; text-align: center; border: 5px solid #e7e7e7; } .box { position: absolute; /* 1. 开启绝对定位 */ left: 50%; /* 3. 向右偏移父元素宽度的50% */ top: 50%; /* 4. 向下偏移父元素宽度的50% */ transform: translate(-50%, -50%); /* 5. 使用translate根据自身的宽度向左位移50%，向上位移50%*/ } </style> <body> <div class="top"> <div class="fra box"> <h2>登陆后台管理</h2> <form action="" method="post"> <div> <label for="username">用户名：</label> <input type="text" id="username" name="username" value="" placeholder="请输入用户名" autofocus required /> </div> <div> <label for="password">密码：</label> <input type="password" id="password" name="password" value="" placeholder="请输入密码" required /> </div> <div> <label for="email">邮箱：</label> <input type="email" id="email" name="email" value="" placeholder="请输入邮箱" required /> </div> <div> <button>登陆</button> </div> </form> </div> </div> </body></html>
