登录页面设计小总结

最新推荐文章于 2023-01-16 14:26:08 发布

Silence-Lee

最新推荐文章于 2023-01-16 14:26:08 发布

阅读量1.2k

点赞数 1

分类专栏： CSS 文章标签： transform：translate

本文链接：https://blog.csdn.net/chenxi_li/article/details/95787583

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在这里插入图片描述

文章目录

1 关于背景图居中且满屏显示

body {
    font-family: "Microsoft YaHei", "SimSun";
    width: 100%;
    /*height: 100%;*/
    /*background: #00ff00 url('../images/bottom.png') no-repeat fixed center;*/
    background: url('../images/bottom.png') center no-repeat fixed;
    background-size: cover;/* 满屏显示，背景图等比例缩放，以背景图相对较小边放大到目标容器大小结束*/
    position: relative;
}

2 整体页面左右两部分按6:4划分

.main {
    /*width: 100%;*/
    /*height: 100%;*/
    width: 100vw;
    height: 100vh;
    position: relative;
}

.main .left {
    width: 60%;
    height: 100%;
    float: left;
    position: relative;
}
.main .right {
    width: 40%;
    height: 100%;
    float: left;
    position: relative;
}

3 登录页面最外层盒子水平垂直居中

登录页面宽固定、高不写，被里面子元素撑起来，且该盒子在其父盒子中上下左右都居中：

.main .right .login_page {
    width: 350px;
    border: 1px solid #5D6374;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

当使用：top: 50%;left: 50%;，是以该盒子左上角为原点，故不处于中心位置；translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动该盒子自身长宽的 50%，以使其居于中心位置。

与负margin-left和负margin-top实现居中不同的是，margin-left必须知道自身的宽高（负自身已知宽高的一半），而translate可以在不知道宽高的情况下进行居中，translate()函数中的百分比是相对于自身宽高的百分比，所以能进行居中。

4 登录页面版心居中内层盒子

再在登录页面的盒子里写一个版心居中的盒子，里面的内容都写在该盒子里面：

.main .right .login_page .login_box{
    width: 300px;
    padding: 25px 25px 23px; 
    /*加起来刚好是大盒子宽度，该版心盒子左右padding相等，是居中的。*/
    
    background: #fff;
    position: relative;
}

5 登录页面

在这里插入图片描述
页面再分上下两部分，如上图，上面用普通的div等盒子来写，下面用form表单来写，注意，form表单里面一般不要放图片。
里面都是标准流，可以不用定位写。

6 transform: translate居中问题

注意：div会继承父元素的宽度，在写里面文本、表单、图片等居中时直接用text-align: center;即可。
没有居中的register注册盒子如下：
在这里插入图片描述

7 注意button按钮

span等行内元素本身不能继承父元素宽度，但通过设置display: block;可继承父元素宽度
button比较特殊，默认居中，且默认为display: inline-block;，不会继承父元素的宽度，即使设置了display: block;也不会继承父元素宽度，但可设置宽高，如下
在这里插入图片描述
button按钮自带的属性：

此时button按钮很丑，有边框阴影等，且鼠标放上去没有小手状态，如下图，需要对它进行美化一下

.main .right .login_page .login_box form .submit button{
    margin-top: 20px;
    /*display: block;*//*即使设为块级元素，宽度也不能继承*/
    width: 300px;/*button不继承宽度*/
    height: 40px;
    border-radius: 6px;
    font-size: 16px;
    line-height: 40px;
    background-color: #256EFF;
    color: #FFFFFF;

    border: 0;/*去掉默认的边框*/
    /*display: inline-block;*/ /*默认其实不用写*/
    overflow: hidden;  /**/
    vertical-align: middle;
    font-weight: 700;
    cursor: pointer;
    zoom: 1;
}

美化后效果如下：
在这里插入图片描述

8 引入矢量小图标

iconfont字体图标的使用方法
在这里插入图片描述

添加入库

点击右上角购物车，添加至项目

下载好解压，如下图：

然后通过link来引用：

使用的时候直接创建一个i标签或者span标签，并添加两个类名，一个固定的是iconfont，另一个是你想要的那个图标对应的类名：
在这里插入图片描述
使user_name、user_password（即label的父盒子）相对定位，然后设置label样式如下：

.main .right .login_page .login_box form label{
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    background: #ddd;
    text-align: center;
    position: absolute;
    left: 1px;
    top: 1px;
    outline: 0;
}
label .iconfont{
    font-size: 22px;
}

在这里插入图片描述
整个页面的html为：

<body>
<div class="main">
    <div class="left">
        <img src="images/top.png" alt="">
    </div>
    <div class="right">
        <div class="login_page">
            <div class="login_box">
                <div class="header_img">
                    <img src="images/logo-China-Union-SD-WAN.png" alt="">
                </div>
                <div class="header_name">
                    SD-WAN业务系统登录
                </div>

                <form action="">
                  <div class="user_name">
                        <label for="TP_userName"><i class="iconfont iconicon_mobile"></i></label>
                        <input type="text" placeholder="请输入手机号/邮箱" id="TP_userName">
                    </div>
                    <div class="user_password">
                        <label for="PSW"><i class="iconfont iconmima"></i></label>
                        <input type="password" placeholder="密码" id="PSW">
                    </div>
                    <div class="if_forget">
                        <a href="">忘记密码</a>
                    </div>
                    <div class="submit">
                        <!--                        <input type="button" value="立即登录">-->
                        <button type="submit">立即登录</button>
                    </div>
                    <div class="register">
                        <a href="">没有账号，立即注册</a>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
</body>

Silence-Lee

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
登录页面设计小总结

左右两部分按6:4划分.main { /*width: 100%;*/ /*height: 100%;*/ width: 100vw; height: 100vh; position: relative;}.main .left { width: 60%; height: 100%; float: left; pos...
复制链接

扫一扫