css盒子3
<head> <meta charset="UTF-8"> <title>练习三</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } html,body{ width: 100%; height: 100%; } body{ background: url(img/sss-bg.jpg); background-size: 100% 100%; padding-top: 150px; } .box-p1{ width: 200px; height: 260px; border: 1px solid red; border-radius: 20px; margin-left: 300px; padding-top: 20px; padding-left: 30px; padding-right: 30px; } .box1{ color: blue; margin-top: 20px; } .box2{ width: 200px; height: 25px; background: antiquewhite; border:1px antiquewhite solid; border-radius: 25px; margin: 10px 0px; } input{ background: antiquewhite; border: none; outline: none; } .box3{ width: 200px; height: 25px; background: lightcoral; border:1px lightcoral solid; border-radius: 10px; } .btn{ width: 200px; background: lightcoral; color: lightcyan; border: none; outline: none; } .box6{ color: dodgerblue; margin-top: 10px; margin-bottom: 20px; } .box7{ color: dodgerblue; text-align: right; } </style> </head> <body> <div class="box"> <div class="box-p1"> <h2 class="box1">Login</h2> <div class="box2"> <input type="text" placeholder="Email" name="" id="" value="" /> </div> <div class="box2"> <input type="text" placeholder="password" name="" id="" value="" /> </div> <div class="box3"> <button class="btn">FOJIN</button> </div> <div class="box6">Forgot Password?</div> <div class="box7">Create Your Account→</div> </div> </div> </body> </html>