本文最后更新于,已超过 1个月没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!

WordPress-右侧滚动条样式教程

小虫
小虫
小虫
872
文章
71
评论
2020年2月14日19:47:04 评论 59浏览 661字阅读2分12秒

把下面的代码放到你网站的CSS样式文件中。

比如WP博客的是放在主题下面的style.css  里面就可以了

复制下方代码代码

/*---滚动条默认显示样式--*/  

::-webkit-scrollbar-thumb{  

   background-color:#018EE8;  

   height:50px;  

   outline-offset:-2px;  

   outline:2px solid #fff;  

   -webkit-border-radius:4px;  

   border: 2px solid #fff;  

}  

/*---鼠标点击滚动条显示样式--*/  

::-webkit-scrollbar-thumb:hover{  

   background-color:#FB4446;  

   height:50px;  

   -webkit-border-radius:4px;  

}  

/*---滚动条大小-根据自己喜欢更改参数-*/  

::-webkit-scrollbar{  

   width:8px;  

   height:8px;  

}  

/*---滚动框背景样式--*/  

::-webkit-scrollbar-track-piece{  

   background-color:#fff;  

   -webkit-border-radius:0;  

}

把以上代码复制到网站的css样式文件中,

当然,你也可以自己修改,颜色大小圆角那些。

CSS里面hover是设置鼠标放上链接的颜色,同样的,active也可以设置鼠标点击的颜色,只要到上面的代码添加如下代码就行了。

  • QQ群
  • 6191686
  • weinxin
  • 微信公众号
  • 微信扫一扫
  • weinxin
小虫

您必须才能发表评论!