登录界面截图

在这里插入图片描述

项目代码仓库地址

项目的代码放在了github的代码仓库当中：点我

项目访问地址

将登录界面项目部署在了github上面：点我

项目代码解析

项目的界面简析

主要部分是Login的模块，包括username文本框和password文本框以及Login的按钮
将Login模块进行居中，并且设置背景半透明
添加背景框

项目基本框架html代码解析

大写的Login英文字母采用标题实现

<h1>Login</h1>

username输入框，采用文本框实现

<input type="text" placeholder="username" name="username">

password输入框，采用password文本框实现密码回显为字符*

<input type="password" placeholder="password" name="password">

登陆按钮，采用button实现

<button type="submit">Login</button>

基本框架的代码

<html>

<head>
    <meta chatset="UTF-8">
</head>

<body>
    <form action="#" method="POST">
        <div id="login-box">
            <h1>Login</h1> <!-- Login的大标题 -->

            <div class="form">
                <div class="item"> <!-- username部分 -->
                    <i></i> <!-- 将来用来绘制username前面的图标 -->
                    <input type="text" placeholder="username" name="username"> <!-- 用文本框实现的username的输入 -->
                </div>

                <div class="item"> <!-- password部分 -->
                    <i></i> <!-- 将来用来绘制password前面的图标 -->
                    <input type="password" placeholder="password" name="password"> <!-- 用password文本框实现的密码输入 -->
                </div>

            </div>
            
            <button type="submit">Login</button> <!-- 用button实现的Login登陆按钮 -->
        </div>
    </form>
</body>

</html>

项目美化CSS代码解析

Login模块的居中显示

#login-box { 
   
    border: 1px solid blue;
    width: 30%;
    text-align: center;
    margin: 0 auto;
    margin-top: 15%;
    background: #00000080;
    padding: 20px 50px;
}

Login标题的颜色控制

#login-box h1 { 
   
    color: white;
}

在这里插入图片描述

对username和password窗口进行修改

#login-box .form .item input { 
   
    width: 200px; /* 设置合适的宽度 */
    border: 0; /* 首先将边界取消，方便下面修改下部边界宽度 */
    border-bottom: 5px solid white; /* 将下边界进行修改，显示出横线效果 */
    font-size: 18px; /* 将字体适当的变大加粗 */
    background: #ffffff00; /* 将输入框设置为透明 */
    color: white; /* 上面的文本颜色设置为白色，但是placeholder的颜色要单独设置 */
    padding: 5px 10px; /* 为了placeholder的内容不是顶格显示，增加内部边界 */
}

添加username和password前面的矢量图（点我）

<!-- 直接将前面的i用下面的代码替换 -->
<i class="fa fa-user-circle" aria-hidden="true"></i>
<i class="fa fa-key" aria-hidden="true"></i>

将添加的矢量图进行颜色和大小的设置

#login-box .form .item i { 
   
    color: white;
    font-size: 18px;
}

在这里插入图片描述

对button进行美化

#login-box button { 
   
    border: 0; /* 取消按钮的边界 */
    width: 150px; /* 设置合适的按钮的长和宽 */
    height: 30px;
    margin-top: 18px; /* 设置合适的上部外框的宽度，增加与上面的password框的距离 */
    font-size: 18px; /* 修改按钮文字的大小 */
    color: white; /* 修改按钮上文字的颜色 */
    border-radius: 25px; /* 将按钮的左右边框设置为圆弧 */
    background-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%); /* 为按钮增加渐变颜色 */
}

在这里插入图片描述

增加背景图

body { 
   
    background: url("../img/12345.jpg") center; /* 首先增加背景图 */
    background-size: 100% auto; /* 设置背景的大小 */
    background-repeat: no-repeat; /* 将背景设置为不重复显示 */
}