【#文档大全网# 导语】以下是®文档大全网的小编为您整理的《用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
2022-07-11
