用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_safeimg{
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下