- 博客(7)
- 收藏
- 关注
RSS订阅
1原创 JS中如何通过鼠标滚轮控制横向滚动轴滚动
// 滚动轴【鼠标】横向滚动let tabsContainer = document.querySelector(".workgroup-tabs");tabsContainer.addEventListener("wheel", (event) => { event.preventDefault(); tabsContainer.scrollLeft += event.deltaY;});<div class="workgroup-tabs"> <ul class
2022-05-11 16:44:04
2189
原创 给X系列手机设置安全区域
添加meta标签【viewport-fit的值为cover】<meta name="viewport" content="width=device-width,initial-scale=1.0, viewport-fit=cover"><div id="nav"> 视图区域</div>body { padding: 0; margin: 0; height: 100%; width: 100%;}#nav { width.
2022-04-21 14:52:36
272
原创 利用bootstrap的icon给input标签添加具有清空功能的图标【也可以用Font Awesome图标替代】
css代码：#clear-input-value { width: 30px; height: 30px; position: absolute; z-index: 100; cursor: pointer; display: inline-block; display: none; justify-content: center; align-items: center;}页面代码：<div class="input-group" id="input-wrapper"&g
2022-04-20 15:50:05
912
原创 给btn添加hover、active、focus效果
去除默认的border.btn { cursor: pointer; border: 0; padding: 10px 20px; background-color: #000; color: #fff; border-radius: 5px;}去除选中时button的默认边框.btn:focus { outline: 0;}按钮悬浮的效果btn:hover { background-color: #222;}点击时button动画效果，按钮大小变为原来的0.98.
2021-06-18 14:14:13
1664
原创 火狐、谷歌浏览器滚动轴样式修改
火狐浏览器.el-table__body-wrapper { transition: all 1s; /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */ scrollbar-width: thin; scrollbar-color: transparent transparent;}.el-table__body-wrapper:hover { /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */ scrollbar-color: rgba(
2021-06-18 14:00:32
406
原创 利用网格布局，将内容居中
去除input默认样式【input前有icon，所以flex：1】.search input { display: block; flex: 1; background: transparent; border: none; outline: none;}自定义滚动条(隐藏).items::-webkit-scrollbar { width: 0;}.item::-webkit-scrollbar-track { width: 0;}利用网格布局，将内容居中.nav-it
2021-06-18 13:50:26
657
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人