<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登陆页面</title> <link rel="stylesheet" href="../css/01.css"> </head> <body> <div class="box"> <h2>用户登录</h2> <hr> <form action=""> <div class="box1"> <label for="">用户名：</label> <input type="text" placeholder="邮箱、手机号、账号"> </div> <div class="box1"> <label for="">密码：</label> <input type="password" placeholder="请输入密码"> </div> <div class="box1 boxp"> <p>忘记密码？ <span>自助找回密码</span> 或者联系人工客服： <span> 400-630-1999</span> </p> </div> <input type="button" value="登录" class="dl"> <hr class="hs"> <div class="box1 boxp1"> <h4>合作网站账号登录</h4> </div> </form> </div> </body> </html>
css代码：
*{ padding: 0; margin: 0; } .box{ width:480px ; height: 460px; margin: 50px auto; padding: 20px; background-color:#F9F9F9 ; } h2{ padding-bottom: 10px; color: #666666; } label{ float: left; width: 90px; } hr{ height: 2px; background-color: #f69; } h2{ text-align: left; } .box1{ border: 1px solid #000; background-color: #fff; width: 400px; height: 50px; margin: 20px auto; padding: 13px 20px ; box-sizing: border-box; } input{ border: none; outline: none; } .boxp{ border:none; font-size: 12px; background-color:#F9F9F9 ; } .boxp1{ border:none; background-color:#F9F9F9 ; } span{ color: #f69; } .dl{ font-size: 20px; width: 400px; height: 50px; background-color: #f69; color: #fff; margin: auto; } form{ width: 400px; margin: auto; } h4{ color: #666679; } .hs{ margin-top: 30px; height: 1px; background-color: #CCCCCC; } 3. m
运行效果：
