热门标签

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

摘要: 分享一个网站美化教程里面的一个小样式改造 — 自定义网站页面右侧滚动条。

默认的都是百度的滚动条,这里我们只需要修改一下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:18px;
}
/*—滚动框背景样式–*/
::-webkit-scrollbar-track-piece{
background-color:#fff;
-webkit-border-radius:0;
}


代码注释的很详细啦,包括自定义粗细,颜色,大小以及背景样式等等,同学们如果感兴趣的话来玩玩,我的网址网页右边的滚动条就是Demo。
注:上面代码加入到我们当前 WordPress 主题的 mian.css 即可,如果您是其他网站源码,直接加入到本站源码调用的css即可。

标签:

未经允许不得转载:作者:锅巴网络, 转载或复制请以 超链接形式 并注明出处 锅巴资源
原文地址:《WordPress页面右侧自定义滚动条样式》 发布于2018-11-09

分享到:
赞(0) 打赏

评论 抢沙发

9 + 3 =


WordPress页面右侧自定义滚动条样式

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.5主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册