登录界面

样图

成品图

登录界面过程

 去找一张登录框做样图，用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文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿原神登录框-CSDN予我心安A3</title>
    <link href="index.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="login-box">
    <div id="login-box-top" >
        <div id="login-box-top-left" onclick="alert('哈哈,没有上一页啦');"></div>
        <div id="login-box-top-medium"></div>
        <div id="login-box-top-right" onclick="alert('GG');window.close();"></div>
    </div>
    <div id="login-box-body">
        <input id="login-box-body-f1"  value="输入邮箱/手机号" onfocus='if(this.value=="输入邮箱/手机号"){this.value="";this.style.color="black"}; '
               onblur='if(this.value==""){this.value="输入邮箱/手机号";this.style.color="#d1d1d1"};'  >
        <input id="login-box-body-f2" value="输入密码" onfocus='if(this.value=="输入密码"){this.value="";this.style.color="black"}; '
               onblur='if(this.value==""){this.value="输入密码";this.style.color="#d1d1d1"};' >
        <div id="login-box-body-f3">
            <a id="login-box-body-f3-left">没有账号?</a>
            <a id="login-box-body-f3-medium" onclick="alert('抱歉,还没做')">立即注册</a>
            <a id="login-box-body-f3-right" onclick="alert('抱歉,还没做')">忘记密码</a>
        </div>
        <div id="login-box-body-f4" onclick="alert('没写啊')">登录</div>
        <div id="login-box-body-f5">
            <div id="login-box-body-f5-logo"></div>
            <div id="login-box-body-f5-href" onclick="alert('没写')">手机快捷登录</div>
        </div>
    </div>
    <script>
    </script>
</div>

</body>
</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;
}

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

# html # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

数仓安全：数据脱敏技术深度解析

avatar 华为云开发者联盟
cover

详解Python 中可视化数据分析工作流程

avatar 华为云开发者联盟
cover

带你了解GaussDB SQL中的BOOLEAN表达式

avatar 华为云开发者联盟