这里使用的是使用比较流行的bootstrap完成的登陆界面：
运行主要截图以及代码如下：
主要CSS代码:
@charset "UTF-8";
.grad{
position: absolute;
width:100%;
height:100%;
background: -webkit-linear-gradient(90deg, #c0abde, #98e2bf);
background: linear-gradient(90deg, #c0abde, #98e2bf);
}
.logindiv{
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width:25%;
}
.hint{
width: 100%;
height: 50px;
font-size: 15px;
text-align: center;
font-family: 'Glyphicons Halflings';
}
.title{
font-size: 70px;
letter-spacing: 10px;
margin: 0 auto;
text-align: center;
position: relative;
bottom: 70px;
font-style:italic;
font-family:Georgia, serif;
text-shadow:2px 2px 0.1px #1d0000;
left: 50%;
top: 20%;
transform: translate(-50%, -50%);
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
主要页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="login.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="grad">
<div class="title">选课管理</div>
<div class="logindiv">
<form class="bs-example bs-example-form" role="form" action="login/check" method="post">
<div class="input-group input-group-lg">
<span class="input-group-addon"> <span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" name="username" placeholder="用户名">
</div>
<br>
<div class="input-group input-group-lg">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="password" class="form-control" name="password" placeholder="请输入密码">
</div>
<br>
<div class="hint" id="hint">
用户名或密码错误。
</div>
<div class="input-group input-group-lg" style="margin: 0 auto;width:100%;">
<button type="submit" class="buttonlarg btn btn-primary btn-lg" style="width:100%;">登陆</button>
</div>
</form>
</div>
</div>
<script>
$("[name='username'] ,[name='password']").focus(function() {
$("#hint").empty();
})
</script>
</body>
</html>
文件下载地址：http