登录login页面--css效果

努力学习的puppy

已于 2022-03-29 16:29:48 修改

阅读量1.4w

点赞数 33

分类专栏：前端文章标签： css 前端

于 2022-03-29 14:54:51 首次发布

本文链接：https://blog.csdn.net/weixin_52347768/article/details/123816864

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果如下

声明：图片与图标来源均来源于堆糖与iconfont阿里巴巴矢量图标库

将图片放置到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;
}

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

努力学习的puppy

关注

33
点赞
踩
166

收藏

觉得还不错? 一键收藏
0
评论
登录login页面--css效果

效果如下声明：图片与图标来源均来源于堆糖与iconfont阿里巴巴矢量图标库将图片放置到images中框架如下login.html代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>login</title> <link rel="stylesheet" href="...
复制链接

扫一扫