一个简单的登录页面，效果不错哦！
效果圖：
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;
}
?
轉載于:https://www.cnblogs.com/yishang/p/5108830.html
總結
以上是生活随笔為你收集整理的一个简单的登录页面，效果不错哦！的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： apache开源项目--ZooKeepe
- 下一篇： Atitit. . 软件命名空间与类名命