客户管理系统开发定制登录login页面--css效果-巴掌软件-高性价比的软件定制开发解决方案

效果如下

声明：客户管理系统开发定制图片与图标来源均来源客户管理系统开发定制于堆糖与阿里巴巴矢量图标库

客户管理系统开发定制将图片放置到images中

框架如下

login.html代码如下


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
      <title>login</title>
    <link rel="stylesheet" href="../mysite/login.css">
</head>
<body>
    <div class="login-box">
        <h4>login</h4>
        <div class="input-box">
             <div class="input-text">
                 <span class="login-login"><img src="images/4.png"style="width: 25px;height: 25px;"></span>
                 <input type="text" placeholder="用户名">
             </div>
             <div class="input-text">
                <span class="login-passwd"><img src="images/5.png" style="width: 25px;height: 25px;"></span>
                <input type="password" placeholder="密码">
            </div>
            <div class="button">
                登录
            </div>
            <div class="signup">
                还没有账户？<a href="#">注册</a>
            </div>
        </div>
    </div>   
</body>
</html>

使用css实现图片效果

在进行实现效果之前，需要了解，盒子模型指的是：外边距（margin）+ border（边框） + 内边距（padding）+ content（内容）。

假设div的宽高为300px，但是实际上设置的是content，之后我们又设置了padding：5px；border：1px；所以div的实际宽高为（300px+5px*4+1px*4）=324px

如果没有设置box-sizing：border-box，它的宽高会自动加上padding与border的值，则需要我们手动计算并调整content的值。

如果设置了box-sizing：border-box，那padding与border的值就不会影响元素的宽高。当于把padding和border的值都算在content里。

首先重置浏览器的默认样式


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

设置body，会用到flex等属性

Flex：弹性布局，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

图片来源于网络

这里我们简单说一下，flex-wrap属性

flex-wrap：

默认情况下，项目都排在一条线上。flex-wrap属性定义，如果一条轴线排不下，如何换行

可以取三个值


（1）nowrap（默认）：不换行。
（2）wrap：换行，第一行在上方。
（3）wrap-reverse：换行，第一行在下方。

当使用flex布局时，常会用到以下两个属性


align-items: center;  /*这种情况是垂直居中*/
justify-content: center;/*这种情况是水平居中*/

了解后，body的css如下


body{
    display: flex;
    justify-content: center; /*在容器中央对齐弹性项目*/
    align-items: center;
    width: 100%;
    min-height: 100vh;
    background-image:url(images/2.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

接下来设置login-box


.login-box{
    display: flex;
    justify-content: center;  /*居中排列*/
    align-content:space-around;
    flex-wrap: wrap;  /*项目排在一条线上，换行，第一行在上方*/
    width: 600px;
    height: 400px;
    background-color: rgba(0, 0, 0,.4);
    border: 10px;
    padding: 20px 50px;
    border-radius: 20px;
}

设置h4标题


.login-box h4{
    width: 100%;
    display: flex;
    justify-content: center;
    color: aliceblue;
    font-size: 30px;
}

设置input-box


.login-box .input-box{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    transform: translateY(-35px);
}

设置input-text与span 、input


.login-box  .input-box  .input-text{
    width: 100%;
    display: flex;
    justify-content: center;  
}
.login-box  .input-box  .input-text span{
    color: aliceblue;
    font-size: 18px;
    margin-top: 20px;
 
}
.login-box  .input-box  .input-text input{
    border: 0;
    padding: 6px;
    border-bottom: 1px solid white;
    background-color: #ffffff00;
    color: #fff;
    margin-top: 20px;
}

设置button


.login-box  .input-box  .button{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
    width: 145px;
    height: 25px;
    color: #fff;
    background: linear-gradient(120deg,#a6c0fe 0%, #2E8B57 100%);
    border-radius: 25px;
    cursor: pointer;
}

设置signup


.login-box  .input-box  .signup{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;
    color: #fff;
    font-size: 15px;
 
}
.login-box  .input-box  .signup a{
    color: #a6c0fe;
    text-decoration: none;
}

保存成功后使用浏览器访问即可