CSS(四)_注册页面样式设计

效果图：

外部CSS文件：

.cont{
    margin: 50px auto;
}

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    background: url("../img1/register_bg.png") no-repeat center;
    padding-top: 25px;
}

.rg_layout {
    width: 900px;
    height: 500px;
    border-radius:4px;
    background:url("../img1/bg.jpg");
    /*让div水平居中*/
    margin: auto;
}

.rg_left {
    /*border: 1px solid red;*/
    float: left;
    margin-left: 25px;
    margin-top: 25px;
}

.rg_left > p:first-child {
    color: #FFD026;
    font-size: 20px;
}

.rg_left > p:last-child {
    color: #A6A6A6;
    font-size: 20px;

}

.rg_center {
    float: left;
    margin-top: 30px;
    /* border: 1px solid red;*/

}

.rg_right {
    /*border: 1px solid red;*/
    float: right;
    margin: 15px;
}

.rg_right > p:first-child {
    font-size: 15px;

}

.rg_right p a {
    color: pink;
}

.td_left {
    width: 100px;
    text-align: right;
    height: 45px;
}

.td_right {
    padding-left: 50px;
}

#username, #password, #email, #name, #tel, #birthday, #checkcode {
    width: 251px;
    height: 32px;
    border: 1px solid #A6A6A6;
    /*设置边框圆角*/
    border-radius: 5px;
    padding-left: 10px;
}

#checkcode {
    width: 110px;
}

#img_check {
    height: 32px;
    vertical-align: middle;
}

#btn_sub {
    width: 150px;
    height: 40px;
    border-radius: 4px;
    margin-top: 10px;
    background-color: #FFD026;
    border: 1px solid #FFD026;
}

#td_sub{
    padding-left: 150px;
}

.error{
    color:red;
    vertical-align: middle;
    font-size: 1px;
}

 外部js：

window.onload=function () {
    // 1.给表单绑定onsubmit事件
    document.getElementById("form").onsubmit=function () {
        //调用用户名校验方法  checkUsername（）
        //return checkUsername() &&checkPassword();
        //调用密码校验方法  checkPassword（）
        return checkUsername() && checkPassword() && checkEmail() &&checkTel() && checkCheckcode();
    }
    //添加失去焦点事件
    document.getElementById("username").onblur=checkUsername;
    document.getElementById("password").onblur=checkPassword;
    document.getElementById("email").onblur=checkEmail;
    document.getElementById("tel").onblur=checkTel;
    document.getElementById("checkcode").onblur=checkCheckcode;
}

//校验用户名
function checkPassword() {
    //1.获取用户名的值
    var password = document.getElementById('password').value;

    //2.定义正则表达式
    var reg_password=/^\w{6,12}$/;
    //3.判断值是否符合正则的规则
    var flag = reg_password.test(password);
    //4.提示信息
    var s_password = document.getElementById("s_password");


    if (flag){
        //提示红色对勾
        s_password.innerHTML="";
    }else{
        //提示红色用户名有误
        s_password.innerHTML="6-12位的英文和数字的组合";
    }


    return flag;

}

//校验密码
function checkUsername() {
    //1.获取密码的值
    var username = document.getElementById("username").value;

    //2.定义正则表达式
    var reg_username=/^\w{6,12}$/;
    //3.判断值是否符合正则的规则
    var flag = reg_username.test(username);
    //4.提示信息
    var s_username = document.getElementById("s_username");


    if (flag){
        //提示红色对勾
        s_username.innerHTML="";
    }else{
        //提示红色用户名有误
        s_username.innerHTML="6-12位的英文和数字的组合";
    }
    return flag;

}

//校验邮箱
function checkEmail() {
    //1.获取邮箱的值
    var email = document.getElementById('email').value;

    //2.定义正则表达式
    var reg_email=/^\w+@[a-z0-9]+\.[a-z]{2,4}$/;
    //3.判断值是否符合正则的规则
    var flag = reg_email.test(email);
    //4.提示信息
    var s_email = document.getElementById("s_email");


    if (flag){
        //提示红色对勾
        s_email.innerHTML="";
    }else{
        //提示红色用户名有误
        s_email.innerHTML="请写正确的邮箱格式";
    }


    return flag;

}
//校验手机号
function checkTel() {
    //1.获取手机号的值
    var tel = document.getElementById('tel').value;

    //2.定义正则表达式
    var reg_tel=/^\w{11}$/;
    //3.判断值是否符合正则的规则
    var flag = reg_tel.test(tel);
    //4.提示信息
    var s_tel = document.getElementById("s_tel");


    if (flag){
        //提示红色对勾
        s_tel.innerHTML="";
    }else{
        //提示红色用户名有误
        s_tel.innerHTML="请输入正确的手机号码";
    }


    return flag;

}
//校验验证码
function checkCheckcode() {
    //1.获取验证码的值
    var checkcode = document.getElementById('checkcode').value;

    //2.定义正则表达式
    var reg_checkcode=/^\jgmxj$/;
    //3.判断值是否符合正则的规则
    var flag = reg_checkcode.test(checkcode);
    //4.提示信息
    var s_checkcode = document.getElementById("s_checkcode");


    if (flag){
        //提示红色对勾
        s_checkcode.innerHTML="";
    }else{
        //提示红色用户名有误
        s_checkcode.innerHTML="请输入正确的验证码";
    }


    return flag;

}

页面html：

    
    
    


    




        
            

                
新用户注册
                
USER REGISTER

            
        
            

                

                    
                    

                        

        
                            

                                
用户名
                                

                                    
                                    
                                

                            
        

                            

                                
密码
                                

                                    
                                    
                                
                            
        
                            

                                
Email
                                

                                    
                                    
                                
                            
        
                            

                                
姓名
                                

                            
        
                            

                                
手机号
                                

                                    
                                    
                                
                            
        
                            

                                
性别
                                

                                     男
                                     女
                                
                            
        
                            

                                
出生日期
                                

                                
                            
        
                            

                                
验证码
                                

                                    
                                    
                                    
                                
                            

        
                            

                                

                            
                        

                    




    

            
            

        
已有账号?立即登录