<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" /> <!-- <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/plugins.css" /> --> <!--<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/main.css"/>--> <!-- <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> --> <!-- <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> --> <style> html,body { height: 100%; } .box { background: -webkit-gradient(linear, 0 0, 0 100%, from(#6699FF), to(#66FFFF)); margin: 0 auto; position: relative; width: 100%; height: 100%; } .login-box { width: 100%; max-width:500px; height: 400px; position: absolute; top: 50%; margin-top: -200px; /*设置负值，为要定位子盒子的一半高度*/ } @media screen and (min-500px){ .login-box { left: 50%; /*设置负值，为要定位子盒子的一半宽度*/ margin-left: -250px; } } .form { width: 100%; max-width:500px; height: 275px; margin: 25px auto 0px auto; padding-top: 25px; } .login-content { height: 300px; width: 100%; max-width:500px; background-color: rgba(255, 250, 2550, .6); float: left; } .input-group { margin: 0px 0px 30px 0px !important; } .form-control, .input-group { height: 40px; } .form-group { margin-bottom: 0px !important; } .login-title { padding: 20px 10px; background-color: rgba(0, 0, 0, .6); } .login-title h1 { margin-top: 10px !important; } .login-title small { color: #fff; } .link p { line-height: 20px; margin-top: 30px; } .btn-sm { padding: 8px 24px !important; font-size: 16px !important; } </style> </head> <body> <div class="box"> <div class="login-box"> <div class="login-title text-center"> <h1><small>欢迎使用创E秀</small></h1> </div> <div class="login-content "> <div class="form"> <form action="#" method="post"> <div class="form-group"> <div class="col-xs-12 "> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span> <input type="text" id="username" name="username" class="form-control" placeholder="用户名"> </div> </div> </div> <div class="form-group"> <div class="col-xs-12 "> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span> <input type="text" id="password" name="password" class="form-control" placeholder="密码"> </div> </div> </div> <div class="form-group form-actions"> <div class="col-xs-4 col-xs-offset-4 "> <button type="submit" class="btn btn-sm btn-info"><span class="glyphicon glyphicon-off"></span> 登陆</button> </div> </div> <div class="form-group"> <div class="col-xs-6 link"> <p class="text-center remove-margin"><small>忘记密码？</small> <a href="javascript:void(0)" ><small>找回</small></a> </p> </div> <div class="col-xs-6 link"> <p class="text-center remove-margin"><small>还没注册?</small> <a href="javascript:void(0)" ><small>注册</small></a> </p> </div> </div> </form> </div> </div> </div> </div> </body> </html>