web前端学习笔记（登录界面）

vue背景图有间隙怎么去除

把body的外边距设置为0。注意，要设置在最底层的组件里！通常是App.vue

body{
    margin: 0px;
  }

修改输入框的提示字样式

谷歌浏览器

::-webkit-input-placeholder { color:snow; }/*Webkit browsers 谷歌，修改placeholder的样式*/

火狐浏览器

  :-moz-placeholder {  /*Mozilla Firefox 4 to 8 火狐*/
    color: rgba(164, 164, 164, 1);
    font-size: 18px;
  }

IE浏览器

  :-ms-input-placeholder {  /*Internet Explorer 10+ IE10以上*/
    color: rgba(164, 164, 164, 1);
    font-size: 18px;
  }

改变鼠标图标

style="cursor:pointer";/*变成小手图标*/

关于position的absolute和fixed

absolute是相对于父级元素进行定位；
fixed是相对于浏览器窗口进行定位；
注意：当包裹你的上一个元素，宽高使用了百分比设置时，他不是父级元素；父级元素要定位到使用px固定的容器上。

实现密码框小眼睛功能

1.去除type=“password”的输入框自带小眼睛。（自带的小眼睛不同浏览器有兼容问题，最好自己实现，比较好用）

  /*去除ie10,11浏览器中password自带的小眼睛*/
  input[type="password"]::-ms-reveal{
    display:none;
  }

2.把输入框的类型变成可变的
当设置input的type="text"时密码就可见，当设置type=“password”时密码就隐藏了。

<input :type="pswType"  placeholder="密码" class="input_text">/*input空一格，然后打上冒号（英文的），pasType是自己取的一个变量名*/

在

data(){
          return{
            pswType:"password",/*给一个初始状态，初始时设置为password，不显示密码*/
          };
      },

3.设置方法
设置一个方法用于切换pswType的值，从而改变type

 methods: {
        showPwd() {
          this.pswType = this.pswType === 'password' ? 'text' : 'password';/*this.pswType = 这是要赋值；this.pswType === 'password''text' : 'password'三元表达式，三个等于号表示等于*/
        },
      },

4.调用方法，并改变小眼睛图标

<!--cursor:pointer;设置鼠标停留变成手型。@click添加事件，v-if用来判断，pswType等于password时显示上面这个图标，否则显示下面那个图标-->
<i class="Hui-iconfont" style="color: snow; text-decoration: none; cursor:pointer;" @click="showPwd" v-if="pswType=='password'">&#xe725;</i>
<i class="Hui-iconfont" style="color: snow; text-decoration: none; cursor:pointer;" @click="showPwd" v-else>&#xe624;</i>

设置中间分隔线

html代码

<div class="register">
          <!--通过div设置中间分割线，利用下边框，再将下边距设置为字体大小一半-->
          <div style="border-bottom: snow solid;border-bottom-width: 1px;width: 25%;margin-bottom: 8px"></div>
          <p style="width: 50%;text-align: center">没有账号？请<a href="#" style="text-decoration: none;color:#40D9FF;">注册</a></p>
          <div style="border-bottom: snow solid;border-bottom-width: 1px;width: 25%;margin-bottom: 8px"></div>
</div>

css代码

  .register{
    display: flex;
    width: 80%;
    margin: 25% 10% auto;
    color: snow;
    font-family: 宋体;
    font-size: 16px;
  }

调节边框

/*设置左横边框*/
  .title:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
    height: 3px;
    width: 50px;
    background-color: seashell;
  }
/*设置右横边框*/
  .title:after{
    content: '';
    position: absolute;
    left: auto;
    top: auto;
    bottom: 0;
    right: 0;
    height: 3px;
    width: 50px;
    background-color: seashell;
  }
  /*设置左竖边框*/
  .word:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
    height: 48px;
    width: 3px;
    background-color: seashell;
  }
/*设置右竖边框*/
  .word:after{
    content: '';
    position: absolute;
    left: auto;
    top: auto;
    bottom: 0;
    right: 0;
    height: 48px;
    width: 3px;
    background-color: seashell;
  }

左边医院管理系统平台，左上和右下两个小框就是效果

以上是我登录界面的一点笔记。菜鸟一个。