【#文档大全网# 导语】以下是®文档大全网的小编为您整理的《用HTML代码制作简单的登录界面》,欢迎阅读!

用HTML代码制作简单的登录界面 HTML部分
CSS部分 .input_text{ width: 150px; height: 24px; cursor: pointer; } .input_button{ width: 60px; height: 30px; color: #FFF; background: #3399ff; border: solid 1px #6699cc; margin: 3px 4px 5px 3px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; background-image: -moz-linear-gradient(0% 100% 90deg, #3399ff,#99ccff 100%); box-shadow:1px 2px 3px #999; -moz-box-shadow:1px 2px 3px #999; -webkit-box-shadow:1px 2px 3px #999; } /* Login */ .login{ padding: 10px; } .login .name{ width: 60px; color: #F60; font-weight: 700; } .login .data{ width: 180px; } .login label, .login input{ cursor: pointer; } .login label{ line-height: 28px; width: 50px; } .login .input_checkbox{ height: 32px; } .login .code img, .login .code a, #login_code{ float: left; } #login_code{ width: 50px; } #login_safe img{ float: left; } .login .save-login, .login .submit{ padding-left: 50px; } .login .submit a{ padding: 0 6px; } .login .change_code{ float: left; line-height: 14px; } JavaScript部分 $("#loginForm").ready(function(){ $("#loginForm").submit(function(){ var username = $("#login_username").val(); var password = $("#login_password").val(); var code = $("#login_code").val(); if(username==""){ $("#login_username").focus(); return false; } if(password==""){ $("#login_password").focus(); return false; } if(code==""){ $("#login_code").focus(); return false; } }; }; 最终效果: IE下 本文来源:https://www.wddqxz.cn/689ba094a800b52acfc789eb172ded630b1c98f6.html