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'"></i>
<i class="Hui-iconfont" style="color: snow; text-decoration: none; cursor:pointer;" @click="showPwd" v-else></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;
}
左边医院管理系统平台,左上和右下两个小框就是效果
以上是我登录界面的一点笔记。菜鸟一个。