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

默认的都是百度的滚动条,这里我们只需要修改一下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) 打赏 生成海报

评论 抢沙发

6 + 2 =


长按图片转发给朋友

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

支付宝扫一扫打赏

微信扫一扫打赏

目前网站从前段时间应工信部备案要求调整,目前已恢复正常
目前网站从前段时间应工信部备案要求调整,目前已恢复正常
切换注册

登录

忘记密码 ?

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

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

注册