一个简单的登录页面，效果不错哦！
效果图：
jsp代码：
<%@ page contentType="text/html; charset=utf-8" language="java"%>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<title>荣辉科技员工登录系统</title>
<link href="${pageContext.request.contextPath}/static/css/login.css" rel="stylesheet">
<div class="circle">
</div>
<div class="title">RONG HUI</div>
<link href='https://fonts.googleapis.com/css?family=Vollkorn:400,700' rel='stylesheet' type='text/css'>
<div class="form-wrapper">
<form action="login">
<div class="form-item">
<label for="text">
<span class="fontawesome-user"></span></label>
<input type="text" name="name" required="required" placeholder="Username"></input>
<input type="password" name="pwd" required="required" placeholder="Password"></input>
</div>
<div class="button-panel">
<input type="submit" class="button" title="Sign In" value="Sign In"></input>
</div>
</form>
<!-- / end form -->
<!-- / end form-wrapper -->
</div>
<table width="100%" height="27" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" class="word_login">CopyRight © 2011 www.anhuironghui.com 安徽省荣徽科技有限公司<br>
本站请使用IE6.0或以上版本 1024*768为最佳显示效果</td>
</tr>
</table>
</body>
</html>
css代码：
@keyframes moon {
to {
box-shadow: inset 10rem 0 whitesmoke;
transform: rotate(10deg);
}
}
html {
background-color: black;
height: 100%;
}
.circle {
width: 10rem;
height: 10rem;
background: #000000;
margin: 3rem auto;
border-radius: 50%;
box-shadow: inset -2rem 0 white;
}
body {
background: black;
color: #fff;
font: 300 87.5%/1.5em 'Open Sans', sans-serif;
}
.title {
font-family: Vollkorn;
color: white;
font-size: 48px;
text-align: center;
margin: -0rem;
}
/* Fonts */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
/* Simple Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Form Layout */
.form-wrapper {
background: #000000;
border-radius: 2px;
margin: 50px auto;
position: relative;
width: 300px;
}
form {
padding: 30px 20px 0;
}
.form-item {
margin-bottom: 10px;
width: 100%;
}
.form-item input {
border: none;
background: #1F1F1F;
border-radius: 2px;
color: #fff;
font-family: 'Open Sans', sans-serif;
font-size: 1em;
height: 50px;
padding: 0 16px;
transition: background 0.3s ease-in-out;
width: 100%;
}
.form-item input:focus {
background: #4d545e;
outline: none;
}
.button-panel {
margin: 20px 0 0;
width: 100%;
}
.button-panel .button {
background: #8B0000;
border: none;
border-radius: 2px;
color: #fff;
cursor: pointer;
height: 50px;
font-family: 'Open Sans', sans-serif;
font-size: 1.2em;
letter-spacing: 0.05em;
text-align: center;
text-transform: uppercase;
transition: background 0.3s ease-in-out;
width: 100%;
}
.button:hover {
background: #660000;
}
.form-footer {
font-size: 0.9em;
padding: 20px 0;
text-align: center;
}
.form-footer a {
color: #e3e3e3;
text-decoration: none;
transition: color 0.3s;
}
.form-footer a:hover {
color: #c0c0c0;
}
