HTML+CSS+JavaScript实现原神登录框

登录界面

样图

成品图

登录界面过程

 去找一张登录框做样图，用PS模拟出盒模型的样子（不同的人有不同的盒模型设计方案）。

 1.先写一个大盒子，再把他一分为二，上半部分20%，下半部分80%。

 2.先把上半部分分区完成。

 3.附上内容,我把LOGO图换掉了，可以自行修改

 4.接下来是下面部分

5.字体只能看着来了。 

 

 6.接着下面的2个功能连接

 

 7.没有配套字体，只能用稍微像一点的幼圆字体代替

 8.我换了一种字体做登录这个按钮的字体，Aa清欢圆体

9.布局

 10.差不多就这样

 

 

 

 源代码

 源代码和图片在我的getee仓库，里面也有一些曾经做过的页面代码供大家自行下载，不想下载的话文章最后也有源代码供大家使用CV大法。 

https://gitee.com/ren-qingjie/web-design-source-code

 登录界面源代码

index.html文件

    
    
    



    

        

        

        

    
    

        
        
        

            没有账号?
            立即注册
            忘记密码
        
        
登录
        

            

            
手机快捷登录
        
    
    

index.css文件

*{
    margin: 0;
    padding: 0;
}

body{
    width: 100%;
    background-color: black;
}

#login-box{
    background-color: #ffffff;
    width: 400px;
    height: 350px;
    position: absolute;
    left: 35%;
    top:60px;
}

#login-box-top{
    background-color: white;
    width: 100%;
    height: 20%;
}

#login-box-top-left{
    margin-left: 7.4%;
    float: left;
    width: 7.6%;
    height: 100%;
    background-color: white;
    background-image: url("图片/左上按钮.jpg");
}
#login-box-top-medium{
    float: left;
    width: 70%;
    background-color: orange;
    height: 100%;
    background-image: url("图片/LOGO.jpg");
}

#login-box-top-right{
    float: left;
    width: 7.6%;
    background-color: white;
    height: 100%;
    background-image: url("图片/右上按钮.jpg");
}



#login-box-body{
    background-color: #ffffff;
    width: 100%;
    height: 80%;
}


#login-box-body-f1{
    background-color: #ffffff;
    width: 80%;
    height: 16%;
    margin-left: 10%;
    border: #eae9e9 solid 1px;
    border-left: #f6f5f5 solid 1px ;
    border-right: #f6f5f5 solid 1px ;
    outline: none;
    font-size: 15px;
    font-family: 幼圆;
    color: #d1d1d1;
    font-weight: bolder;
    text-indent: 10px;
}
#login-box-body-f2{
    background-color: #ffffff;
    width: 80%;
    height: 16%;
    margin-left: 10%;
    margin-top: 10px;
    border: #eae9e9 solid 1px;
    border-left: #f6f5f5 solid 1px ;
    border-right: #f6f5f5 solid 1px ;
    outline: none;
    font-size: 15px;
    font-family: 幼圆;
    color: #d1d1d1;
    font-weight: bolder;
    text-indent: 10px;
}
#login-box-body-f3{
    background-color: #ffffff;
    width: 80%;
    height: 14%;
    margin-left: 10%;
    margin-top: 20px;
}

#login-box-body-f3-left{
    display: inline-block;
    float: left;
    background-color: #ffffff;
    height: 100%;
    width: 21%;
    font-size: 14px;
    font-family: 幼圆;
    font-weight: bolder;
    color: #727171;
}
#login-box-body-f3-medium{
    display: inline-block;
    float: left;
    background-color: #ffffff;
    height: 100%;
    width: 23%;
    font-size: 14px;
    font-family:幼圆;
    font-weight: bolder;
    color: #fae95b;
}
#login-box-body-f3-right{
    display: inline-block;
    background-color: #ffffff;
    float: right;;
    height: 100%;
    font-size: 14px;
    font-family: 幼圆;
    font-weight: bolder;
    color: #fae95b;
}


#login-box-body-f4{
    background-color: #383b40;
    width: 80%;
    height: 18%;
    margin-left: 10%;
    margin-top: 5px;
    font-family: Aa清欢r;
    font-weight: bolder;
    text-align: center;
    font-size: 17px;
    line-height: 50px;
    color: #f3dcbd;
}




#login-box-body-f5{
    background-color: #ffffff;
    width: 40%;
    height: 12%;
    margin-left: 30%;
    margin-top: 15px;
}

#login-box-body-f5-logo{
    background-color: yellow;
    width: 40px;
    height: 40px;
    float: left;
    background-image: url("图片/A3——LOGO.jpg");
}
#login-box-body-f5-href{
    background-color: #ffffff;
    margin-left: 3%;
    width: 65%;
    height: 100%;
    float: left;
    font-family: Aa清欢r;
    font-weight: bolder;
    text-align: left;
    font-size: 12px;
    line-height: 35px;
    color: #050505;
}

我还没写完，下次会在这片博客下继续更新注册界面，找回密码界面。