登录界面Demo
今天记载一个Demo,这个是我练习项目中用到，供新手看看，界面图：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head lang="en">
<title>系统登录 -xxx管理系统</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body class="login_bg">
<section class="loginBox">
<header class="loginHeader">
<h1>xxx管理系统</h1>
</header>
<section class="loginCont">
<form class="loginForm" action="LoginServlet" method="post">
<div class="inputbox">
<label for="user">用户名：</label>
<input id="user" type="text" name="userName" placeholder="请输入用户名" required/>
</div>
<div class="inputbox">
<label for="mima">密码：</label>
<input id="mima" type="password" name="userPassword" placeholder="请输入密码" required/>
</div>
<div class="subBtn">
<input type="submit" value="登录" />
<input type="reset" value="重置"/>
</div>
<div class="mess" style="text-align: center;">
<span style="color: red">${empty message?"":message}</span>
</div>
</form>
</section>
</section>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
}
/*登录页面*/
.login_bg {
background: url("../img/loginBg.jpg") 0 0 repeat-x;
}
.loginBox {
width: 1000px;
margin: 0 auto;
background: url("../img/login_bg.jpg") 0 0 no-repeat;
}
.loginHeader {
padding-top: 102px;
text-align: center;
padding-bottom: 30px;
}
.loginHeader h1 {
color: #fff;
text-shadow: 2px 2px #000;
}
.loginCont {
width: 388px;
height: 284px;
/*border: 1px solid red ;*/
margin: 0 auto;
}
.formBox {
position: relative;
}
/*输入框里默认输入字体*/
::-webkit-input-placeholder {
color: rgb(190, 188, 188);
/*font-style: italic;*/
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color: rgb(190, 188, 188);
font-style: italic;
}
input {
outline: none;
}
.loginForm {
background: url("../img/formBg.png") 0 0 no-repeat;
width: 320px;
height: 140px;
border-radius: 8px;
padding: 90px 38px 48px 30px;
/*border: 1px solid green;*/
}
.loginForm label {
width: 20%;
display: inline-block;
}
.inputbox {
height: 60px;
}
.inputbox input {
width: 66%;
padding: 10px 5px 10px 20px;
border: 1px solid rgb(178, 178, 178);
border-radius: 3px;
-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
-moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
}
/*输入框得到焦点的效果*/
.inputbox input:active, .providerAdd input:focus,
.inputbox input:focus {
border: 1px solid rgba(91, 90, 90, 0.7);
background: rgba(238, 236, 240, 0.2);
-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
-moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
}
.subBtn {
margin-left: 70px;
}
/*/!*登录页登录和重置按钮*!/.providerView a是供应商管理页面下信息查看也得返回按钮的样式*/
input[type='submit'], input[type='reset'], .providerView a {
width: 30%;
cursor: pointer;
background: #54a4d7;
padding: 6px 18px;
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
color: #fff;
font-size: 18px;
border: 1px solid #4682be;
margin-bottom: 10px;
margin-right: 22px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 4px 4px rgba(0, 0, 0, 0.07) inset,
0px 0px 0px 3px rgb(254, 254, 254),
0px 5px 3px 3px rgb(210, 210, 210);
-moz-box-shadow: 0px 1px 4px 4px rgba(0, 0, 0, 0.07) inset,
0px 0px 0px 3px rgb(254, 254, 254),
0px 5px 3px 3px rgb(210, 210, 210);
box-shadow: 0px 1px 4px 4px rgba(0, 0, 0, 0.07) inset,
0px 0px 0px 3px rgb(254, 254, 254),
0px 5px 3px 3px rgb(210, 210, 210);
}
input[type='submit']:hover, input[type='reset']:hover {
background: rgb(74, 179, 198);
}
input[type='submit']:active, input[type='submit']:focus,
input[type='reset']:active, input[type='reset']:focus, .providerView a:hover, .providerView a:active {
background: #2a5989;
border: 1px solid rgb(12, 76, 87);
-webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}
