前端笔记(近期整理的一些开发备注)
js点击下载文件
//点击下载文件写法 const w = window.open('about:blank'); w.location.href='文件url'
PC端中px转vw与vh,sass写法
//PC端 px转vwvh 写法 sass @function px-vw($px) { @return $px*100/3840*1vw } @function px-vh($px) { @return $px*100/2160*1vh }
sass实现纵向滚动条,并改变滚动条样式
//滚动条 height:300px; overflow-x: hidden; overflow-y: scroll; &::-webkit-scrollbar { width: 5px; height: 5px; } /*定义滚动条轨道 内阴影+圆角*/ &::-webkit-scrollbar-track { box-shadow: inset 0 0 0px rgba(240, 240, 240, .5); border-radius: 10px; } /*定义滑块 内阴影+圆角*/ &::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 0px rgba(240, 240, 240, .5); background-color: #1890ff; }
css实现竖条背景 内部百分比设置
//竖条背景
background-size:8px;
background-image: linear-gradient(90deg,#52e9ff 50%,#fff);
sass禁止文字换行 在新样式中引用样式
//禁止文字换行 .ellipsis{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } //引用样式class @extend .ellipsis;
css改变鼠标指针为手型
//改变鼠标指针为手型
cursor: pointer;
css背景样式渐变为透明色
//背景颜色渐变 transparent
background-image: linear-gradient(90deg, red, transparent);
sass中修改引用了antd组件的样式
//sass修改antd样式
:global(.className){}
css取第一个子元素与取最后一个子元素
//css取第一个 &:nth-child{} &:first-child{} //css取最后一个 &:last-child{}
js保留一位小数
//保留1位小数 2.01.toFixed(1)
博客园作者:herry菌朋友,看到这里,关注作者的公众号吧,不漏掉更新哦