基于layui如何实现登录页面

本篇内容主要讲解"基于layui如何实现登录页面"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"基于layui如何实现登录页面"吧!

首先给看下效果图吧！

html、js

                        
                
            
                
                                    
                
                    
                        用户名:                    
                    
                                                                    
                
                
                    
                        密码:                    
                    
                                                                    
                
                
                    
                        验证码:                    
                    
                                            
                    
                                            
                
                
                    
                        没有账号？点击注册                    
                    
                                            
                
            
        
    
        
    
        
            
                
                    用户名:                
                
                                                        
            
            
                
                    密码:                
                
                                                        
            
            
                
                    确认密码:                
                
                                                        
            
            
                
                    角色类型:                
                
                                            请选择...                        经纪人                        房东                                    
            
        
    

css

/*登陆表单样式 start*/.wrap{    width: 100%;    height: 100%;    background: url("../images/back.jpg") no-repeat;    background-size: cover;}.loginForm{    margin-left: 35%;    margin-top: 10%;    /*background-color: #cccccc;*/    background-color: #e7e7e7;    width: 400px;    height: 400px;    float: left;    z-index: 9999;    position: fixed;    opacity: 0.75;}.usernameDiv{    width: 300px;    height: 40px;    padding-left: 130px;    padding-top: 30px;}.adminInput{    width: 200px;    height: 40px;    font-size: 15px;    border-radius: 0.5em;    /*margin-left: auto;*/    /*border: 1px solid #cccccc;*/}.passwordDiv{    width: 300px;    height: 40px;    padding-left: 130px;    padding-top: 28px;}.cardDiv{    width: 120px;    height: 40px;    padding-top: 28px;    padding-left: 14px;    float: left;}.cardInput{    width: 124px;    height: 40px;    font-size: 15px;    border-radius: 0.5em 0em 0em 0.5em;}.codeDiv{    width: 100px;    height: 40px;    padding-top: 28px;    padding-right: 20px;    float: left;}.codeInput{    width: 80px;    height: 40px;    font-size: 15px;    border-radius: 0em 0.5em 0.5em 0em;    /*验证码样式*/    font-family: Arial;    font-style: italic;    font-weight: bold;    /*border: 0;*/    letter-spacing: 2px;    cursor: pointer;}i{    position: absolute;}.adminIcon{    font-size: 22px;    margin-top: 8px;    margin-left: 165px;}.logoHead{    width: 250px;    height: 60px;    padding-left: 90px;    padding-top: 25px;}.usernameLabel{    width: 60px;    height: 30px;    font-size: 16px;    float: left;    margin-left: 55px;    margin-top: 40px;}.submitLabel{    width: 160px;    height: 30px;    font-size: 13px;    float: left;    margin-left: 55px;    margin-top: 40px;    cursor: pointer;}.usernameWrapDiv{    width: 400px;    height: 70px;}.submitDiv{    width: 150px;    height: 40px;    padding-left: 10px;    padding-top: 28px;    float: left;}.submit{    width: 100px;    height: 40px;    border-radius: 0.5em;}img{    position: absolute;}.imgStyle{    width: 100%;    height: 100%;}/*登陆表单样式 end*//*注册页面样式 start*/.registerPage{    width: 100%;    height: 100%;    /*background-color: #cccccc;*/    display: none;    opacity: 0.75;}.registerDiv{    width: 100%;    height: 100%;    z-index: 9999;    opacity: 0.75;}/*注册页面样式 end*/

到此，相信大家对"基于layui如何实现登录页面"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！