可能你刚开始接触前端,可能你第一次做项目,可能你刚开始工作。有一些页面的动画样式,一时不知道怎么写,每次看到都需要去百度,别慌,以下小功能的总结,让你学习办公更轻松。
1.文字过多,变成省略号形式
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
实现效果:
2. 修改scroll滚动条默认样式
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 0.75rem;
height: 0.75rem;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
box-shadow: inset 0 0 0.375rem #999;
border-radius: 0.625rem;
background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 0.625rem;
box-shadow: inset 0 0 0.375rem #999;
background-color: #333;
}
3. 设置盒子的上下左右阴影
box-shadow:
-2px 0 3px -1px green, //左边阴影
0 -2px 3px -1px blue, //顶部阴影
0 2px 3px -1px red, //底部阴影
2px 0 3px -1px yellow; //右边阴影
4. tr标签设置边框
border-collapse: collapse; //表格设置合并边框。将该语句放在table类(表格类的标签)里面均可。
5.点击其他位置关闭下菜单
有时后我们除了用表单中的select作为下拉菜单使用,同时也用ul,li,div,span 等做下拉菜单。点击菜单之外的位置使得下拉菜单关闭。
$("body").click(function (e) {
//closest()里面放点击不使下拉菜单关闭的元素
if (!$(e.target).closest(".dropdown li,.container-fluid .active,.list-main input").length) {
$('.dropdown').hide()
}
})
6.有时候span标签会出现谜之间距。
span标签有的时候会出现谜之间距,span默认是行元素,在页面中展示的是连续并排排列的,可是有的时候两个span 标签之间会出现一个小间距,这可能是在页面中写的标签的格式不对
//会出现间隔
<div class="customer-grade">
<span>A级</span>
<span>B级</span>
<span class="active">C级</span>
<span>D级</span>
</div>
//间隔消失
<div class="customer-grade">
<span>A级</span><span>B级</span><span class="active">C级</span><span>D级</span>
</div>
7. 如何获得元素的标签名
$(that)[0].tarName=='LI'
8.iframe //子集接受父级传来的参数
window.addEventListener('message', function (event) {
EmpID = event.data.emptid
getdata(EmpID)
})