[css]登录模块总结

最新推荐文章于 2024-05-13 10:09:55 发布

haliofwu

最新推荐文章于 2024-05-13 10:09:55 发布

阅读量1.6k

点赞数 5

分类专栏： css 文章标签： css 登录

本文链接：https://blog.csdn.net/xixi880928/article/details/79034114

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

工作中开发过的项目都需要有登录模块。登录界面的形式千变万化，却万变不离其中。来来回回就是那几个需要注意的地方。所以，趁着今天重写一遍登录界面，做一个简单的总结。日后好套用模块。

最终实现的效果：

一、基本的框架
1.一张1920X1080的背景图片；
2.登录的内容居中；

实现背景的方式有好几种。可以使用background-image，也可以直接使用img标签，再利用z-index来放置在登录模块之下。

background-image方式：

<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>
<style media="screen">
    body {
        background-size: 100% 100%;
        background-image: url("./Galaxy.jpg");
        background-repeat: no-repeat;
    }
</style>

<body>
    <div class="login_wrap">
    </div>
</body>

</html>

效果图：

可以看到图片没有被撑开。这是因为background-image作为body的背景图，而body是空的，因此body没有高度，无法被撑开；
设置background-size:100% 1080px;可以达到被撑开的效果;但是指定了背景的高度。缩放图片的时候，背景图非等比缩放，出现变形，图片失真；
效果图：
这里写图片描述
缩放后：

设置background-size:cover可以实现被撑开的效果，且可以随着缩放，等比缩放图片：

可以明显的看到背景图片等比缩放后，没有失真。

接下来登录框居中：

html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>
<style media="screen">
//兼容浏览器不同版本最出世body的margin,padding不为0.我常用火狐的浏览器，就遇到这个问题。如果不是以background-image来作为背景，而是使用img来作为背景，则会看到周边有一个margin:8px的空白。
  *{
    margin: 0;
    padding: 0px;
  }
    body {
        background-size: cover;
        background-image: url("./Galaxy.jpg");
        background-repeat: no-repeat;//设置background-size后会出现背景repeat的样子，这里要去掉
        display: flex;//父元素使用flex，子div中使用margin:auto来居中。这时目前看到最简单又不用考虑兼容的居中方式。而且还可以随着浏览器窗口缩放而自动居中。
    }
    .login_wrap{
      margin: 50px auto ;
      background-color: #fff;
    }
    //先在这里模拟登录框中的内容
    .login_wrap_inner{
      width: 420px;
      height: 500px;
    }
</style>

<body>
    <div class="login_wrap">
      <div class="login_wrap_inner">

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

</html>

效果图：
这里写图片描述
二、登录框中的内容：


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>
<style media="screen">
  *{
    margin: 0;
    padding: 0px;
  }
    body {
        background-size: cover;
        background-image: url("./Galaxy.jpg");
        background-repeat: no-repeat;
        display: flex;
    }
    //实现白色包裹块居中，背景色白色
    .login_wrap{
      margin: 50px auto ;
      background-color: #fff;
    }
    //实现登录的内容，包括名称/版本号/登录信息/在包裹块margin:50px的中间
    .login_wrap_inner{
      margin: 50px;
//标题 
    .title_1{
      margin:50px 25px;
      font-size: 42px;
      font-family: "Arial";
      color: #009dff;
    }
    //版本说明
    .title_2{
      display: block;
      margin-left: 25px;
      font-size: 24px;
      font-family: "Calibri";
      color: #72828d;
    }
    .error_tip{
      margin-left: 25px;
        font-size: 12px;
        font-family: "宋体";
        color: #ff1313;
    }
    //用margin-left,right实现登录框居中
    .login_info{
      margin-left: 25px;
      margin-right:25px;
      margin-top: 10px;
    }
    //设置name/account/password三个框的长度(与登录button长度的计算)，高度，输入内容位置（padding）
    .common{
     width: 310px;
     height: 46px;
     font-size: 16px;
    font-family: "Microsoft YaHei";
    border-radius: 4px;
    border: 1px solid #cbcbcb;
    padding-left: 5px;
    padding-right: 5px;
    }
    .name{
      margin-bottom: 20px;
    }
    .account{
      margin-bottom: 20px;
    }
    .password{
     margin-bottom: 10px;
    }
    //与login_info保持一致margin-left:25px;这里将img进行包裹，主要是使得内部的img可以使用float:left；使得其后跟随的lable紧随其后；
    .check_box{
      height: 14px;
        margin-left: 25px;
        margin-bottom: 20px;
    }
    //登录button的设置
    .loginto{
      margin-left: 25px;
      width: 320px;
      height: 46px;
      font-size: 20px;
      font-family: "Microsoft YaHei";
      border-radius: 4px;
      border: none;
      background-color: #009dff;
    }
    .login_check_label {
        margin-left: 10px;
        font-family: "Microsoft yahei";
        font-size: 14px;
        color: #999999;
        line-height: 14px;
    }
    //这里使用float:left将后边的lable紧随其后
    .check_box_true{
      float: left;
      width: 14px;
      height: 14px;
      border-radius:2px;
    }

</style>

<body>
    <div class="login_wrap">
      <div class="login_wrap_inner">
           <label class="title_1">SHBSM&nbsp;CSP</label>
           <label class="title_2">Version&nbsp;1.0</label>
           <div class="error_tip">
             <label></label>
           </div>
           <div class="login_info">
             <div >
               <input type="text" class="name common" placeholder="姓名">
             </div>
             <div >
               <input type="text" class="account common" placeholder="帐号">
             </div>
             <div >
               <input type="password" class="password common" placeholder="密码">
             </div>

           </div>
           <div class="check_box">


           <div class="check_box_true">
              <img src="./login_checked.png" />
           </div>
           <label class="login_check_label">保存登录信息</label>
            </div>
           <button type="button" class="loginto">登&nbsp;&nbsp;录</button>
      </div>
    </div>
</body>

</html>

效果图：
这里写图片描述

三、完善

1.login_wrap边框不够圆滑，可以设置圆角，以及框的底部实现阴影，显得登录框不与背景过于有切割感；
2.登录button，当鼠标滑动的时候，有颜色的变化，表明这是个“活”的button。
3.当开始在Input框中开始输入的时候，input的边框有一定颜色变化，实现一个聚焦的效果；

.login_wrap{
      margin: 50px auto ;
      background-color: #fff;
      border-radius: 4px;
      border-bottom: 1px solid #cacaca;
    }
    .loginto:hover{
      background-color: #34b0fd;
    }
  .common:focus{
     border: 1px solid lightsteelblue;
    }

效果图：
这里写图片描述

说真的，有时候觉得自己真变态。一点点的对不齐，或者哪里有点切割感就很受不了。。。

四、更进一步

1.开始输入的时候，对内容进行判断，比如输入的只能是数字
2.提交的时候对输入内容进行判断，错误时给与提示，并将相应的输入框边框变红；

因为我主要使用angular框架，所以以此为例：

<div class="login_info">
  <div class="login_form_unend_item">
      <input type="text" ng-class = "{true:'login_error',false:'login_normal'}[loginInfo.nameError]" oninput="func(event)" placeholder="姓名" ng-model = "loginInfo.name" ng-focus = "loginHideError()">
  </div>
</div>

func(event){
  event.target.value=event.target.value.replace(/[^\d]/g,'');
}
//输入框再次聚焦时，取消错误提示
loginHideError(){
}
//错误时边框变红等
.login_error{
}
//正常情况下的输入边框颜色
.login_normal{}
使用nameError来标志是否由输入错误；

五、背景图使用img标签来实现

[github上的实现](https://github.com/liuruomu/js/tree/master/js/login2)

六、登录的逻辑
前段时间看到设计模式。这部分可以使用职责链模式来设计。不过因为登录所使用的逻辑都不同，可复用性不高。回头再看。

haliofwu

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
[css]登录模块总结

工作中开发过的项目都需要有登录模块。登录界面的形式千变万化，却万变不离其中。来来回回就是那几个需要注意的地方。所以，趁着今天重写一遍登录界面，做一个简单的总结。日后好套用模块。最终实现的效果：一、基本的框架 1.一张1920X1080的背景图片； 2.登录的内容居中；实现背景的方式有好几种。可以使用background-image，也可以直接使用img标签，再利用z-in
复制链接

扫一扫