tft每日頭條

 > 生活

 > 前端開發的幾個口訣

前端開發的幾個口訣

生活 更新时间:2024-07-01 22:15:44

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)

前端開發的幾個口訣(近期整理的一些開發備注)1

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved