html部分:<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>登录界面</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="mystyle.css"></head> <body> <div class="bg bg-blur"> </div> <div class="content"> <div class="mycenter"> <div class="mysign"> <div class="col-lg-11 text-center text-info"> <h2>登录</h2> </div> <div class="col-lg-10"> <input type="text" class="form-control" name="usename" placeholder="请输入用户名" required autofocus> </div> <div class="col-lg-10"> <input type="password" class="form-control" name="password" placeholder="请输入密码" required autofocus> </div> <div class="col-lg-10 mycheckbox text-info"> <input type="checkbox" >记住密码 </div> <div class="col-lg-10"> <input type="button" class="btn btn-success col-lg-12" value="登录"> </div> </div> </div> </div> </body> </html>CSS部分:.bg{ background-image: url(bg1.jpg); text-align: center; width: 1350px; height: 700px;}.bg-blur{ float: left; width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; -webkit-filter: blur(5px); filter: blur(5px);}.content{ position: absolute; left: 10px; right: 10px; height: 700px; line-height: 600px; text-align: center;}.mycenter{ margin-top: 100px; margin-left: auto; margin-right: auto; height: 350px; width:500px; padding: 5%; padding-left: 5%; padding-right: 5%;}.mycenter mysign{ width: 440px;}.mycenter input,button{ margin-top:2%; margin-left: 10%; margin-right: 10%;}.mycheckbox{ margin-top: 0px; margin-left: 10px; margin-bottom: 10px; height: 10px;}
用div做一个登录界面 但复选框那部分一直在界面下端。初学者多多指教。
温馨提示:答案为网友推荐,仅供参考
第1个回答 2017-04-05
这是你的位置的问题,审查元素调整一下元素的位置