大佬教程收集整理的这篇文章主要介绍了简单登录界面，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<!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 class="login"> <div class="angel"> <div class="loginbox"> <form name="loginform" id="loginform" action="post"> <div class="loginboxtag">用户名：</div> <div class="loginboxinput"><input type="text"></div> <div class="loginboxtag">密码：</div> <div class="loginboxinput"><input type="password"></div> <div class="loginboxbtn"> <div class="fll rem"><input id="rem" type="checkbox"><span><label for="rem">记住登录状态</label></span></div> <div id="submit" class="flr btn">登入</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>
以上是大佬教程为你收集整理的简单登录界面全部内容，希望文章能够帮你解决简单登录界面所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。