核心提示：简单的HTML登录页面，html代码：!DOCTYPE htmlhtml lang=zh-CNheadmeta charset=utf-8title登入/titlestyle.fll{float: l...
简单的HTML登录页面，html代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>登入</title>
<style>
.fll{float: left;}
.flr{float: right;}
body{
background: #fffffc;
}
.login{
/*position: absolute;*/
/*top: 40%;*/
/*left: 50%;*/
/*margin-top: -150px;*/
/*margin-left: -140px;*/
margin: 150px auto;
width: 280px;
height: 300px;
overflow: hidden;
/*background: #333;*/
}
.loginbox{
font-family: 'Segoe UI', 'Microsoft Yahei', Arial, Simsun, sans-serif, "宋体";
font-size: 14px;
padding:20px 25px 0 25px;
}
.loginboxtag{
height: 30px;
line-height: 30px;
padding-left: 2px;
color: #555;
cursor: default;
user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
}
.loginboxinput{
height: 50px;
}
input[type="text"], input[type="password"], textarea{
padding-left: 27px;
color: #0e8c3c;
outline: 0px;
height: 30px;
width: 200px;
border: 1px solid #ccc;
/*border-radius: 3px;*/
transition: all .2s;-webkit-transition: all .2s;-moz-transition: all .2s;
}
input[type="text"] {
background: url(img/iconman.png) no-repeat #f8faf8;
}
input[type="password"] {
background: url(img/iconlock.png) no-repeat #f8faf8;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
border: 1px solid #c8c8c8;
background-color: #f3f7f3;
/*box-shadow:inset 0 0 3px rgba(40,140,210,1);*/
/*background-color: #444;*/
}
.loginboxbtn{
overflow: auto;zoom: 1;
height: 40px;
padding-top: 10px;
}
input[type="checkbox"]{
margin: 0;
margin-right: 10px;
}
.loginboxbtn .rem{
font-size: 12px;
padding-top: 15px;
user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
}
.loginboxbtn .rem span label{
/*display: inline-block;
margin-top: -5px;*/
color: #555;
position: relative;
top: -2px;
cursor: default;
}
.btn{
display: inline-block;
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
/*background: #0e9c4c;*/
background: #46Ae00;
color: #fff;
/*border-radius: 5px;*/
box-shadow: 0 0 1px rgba(0,0,0,0.3);
cursor: pointer;
transition: all .1s;-webkit-transition: all .1s;-moz-transition: all .1s;
user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
}
.btn:hover{
/*background: #0e8c3c;*/
background: #339b00;
}
.btn:active{
/*background: #0e7c2c;*/
background: #288f00;
}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<p class="login">
<p class="angel">
<p class="loginbox">
<form name="loginform" id="loginform" action="post">
<p class="loginboxtag">用户名：</p>
<p class="loginboxinput"><input type="text"></p>
<p class="loginboxtag">密码：</p>
<p class="loginboxinput"><input type="password"></p>
<p class="loginboxbtn">
<p class="fll rem"><input id="rem" type="checkbox"><span><label for="rem">记住登录状态</label></span></p>
<p id="submit" class="flr btn">登入</p>
</p>
</form>
</p>
</p>
</p>
<!-- <p>
<iframe src="https://www.qiyeyouju.com/index.php?m=content&a=index&id=20" frameborder="0"></iframe>
</p> -->
</body>
</html>
<script type="text/javascript">
$(".login").fadeIn(700);
//改善表单输入用户体验
$(function () {
$('input:text:first').focus();
//回车聚焦下个输入框
var $inp = $('input:text');
$inp.bind('keydown', function (e) {
var key = e.which;
if (key == 13) {
e.preventDefault();
$("input:password:first").focus();
}
});
//回车触发按钮点击
var $pwd = $('input:password:first');
$pwd.bind('keydown', function (e) {
var key = e.which;
if (key == 13) {
e.preventDefault();
$("#submit").trigger("click");
}
});
//
$("#login").click(function() {
$("#loginform").submit();
});
});
</script>
