简单登录界面_html-js-css

概述简单登录界面

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。

内存溢出小编现在分享给大家，也给大家做个参考。

<!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.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>	<div >		<div >			<div >				<form name="loginform" ID="loginform" action="post">					<div >用户名：</div>					<div ><input type="text"></div>					<div >密码：</div>					<div ><input type="password"></div>					<div >						<div ><input ID="rem" type="checkBox"><span><label for="rem">记住登录状态</label></span></div>						<div ID="submit" >登入</div>					</div>				</form>			</div>		</div>	</div><!-- 			<div>		<iframe src="http://www.qiyeyouju.com/index.PHP?m=content&a=index&ID=20" frameborder="0"></iframe>	</div> --></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>

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的简单登录界面全部内容，希望文章能够帮你解决简单登录界面所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1097577.html