自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(7)
  • 收藏
  • 关注

原创 滚动轴不占用滚动区域; 容器添加背景图片添加; 弹性盒模型align-self、order属性

易忘的CSS样式属性

2022-07-15 10:55:29 196 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 1662

原创 火狐、谷歌浏览器滚动轴样式修改

火狐浏览器.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关注的人

提示
确定要删除当前文章?
取消 删除