知更鸟主题右下角滚屏快捷方式美化

2018年7月4日16:51:32 33 6.9K 2070字阅读6分54秒

知更鸟主题右下角滚屏快捷方式美化

近日,去一些博客闲逛,发现他们的右侧滚动条按钮比知更鸟Begin主题自带的要好看,最后在【99八十一】博客成功扒取代码,美化成功,版本以Begin LTS版本为例。效果如下图:

知更鸟主题右下角滚屏快捷方式美化

第一步,Style.css里找到 /** 滚屏 **/

并查找以下两段代码:

  1. #scroll li a {
  2.     background: #fff;
  3.     font-size: 16px;
  4.     color: #777;
  5.     width: 32px;
  6.     height: 32px;
  7.     line-height: 28px;
  8.     text-align: center;
  9.     vertical-align: middle;
  10.     margin-top: 4px;
  11.     display: block;
  12.     cursor: pointer;
  13.     background: rgba(2552552550.6);
  14.     border: 1px solid #ddd;
  15.     border-radius: 2px;
  16.     box-shadow: 0 1px 1px rgba(0000.04);
  17. }
  1. @media screen and (min-width: 900px) {
  2.     #scroll li a:hover {
  3.     background: #3690cf;
  4.     color: #fff;
  5.     border: 1px solid #3690cf;
  6.     transition: all 0.2s ease-in 0s;
  7. }

将其修改为:

  1. #scroll li a {
  2.     font-size: 16px;
  3.     color: #f8f8f8;
  4.     width: 32px;
  5.     height: 32px;
  6.     line-height: 28px;
  7.     text-align: center;
  8.     vertical-align: middle;
  9.     margin-top: 4px;
  10.     display: block;
  11.     cursor: pointer;
  12.     border: 1px solid #ddd;
  13.     border-radius: 20px;
  14.     box-shadow: 0 1px 1px rgba(0000.04);
  15. }
  16. .scroll-home {
  17.     background-color: #ff9531;
  18. }
  19. .scroll-h {
  20.     background-color: #ff5e5c;
  21. }
  22. .scroll-c {
  23.     background-color: #24a5db;
  24. }
  25. .scroll-b {
  26.     background-color: #ff9531;
  27. }
  28. .qq-mobile {
  29.     background-color: #fffffb;
  30. }
  31. .phone-mobile {
  32.     background-color: #7fb80e;
  33.     border-radius: 20px;
  34. }
  35. .log-button {
  36.     background-color: #f47920;
  37. }
  38. #gb2big5 {
  39.     background-color: #aec534;
  40. }
  41. .qr {
  42.     background-color: #4a4a4a;
  43. }
  44. @media screen and (min-width: 900px) {
  45.     #scroll li a:hover {
  46.     background: #2f889a;
  47.     color: #fff;
  48.     border: 1px solid #2f889a;
  49.     transition: all 0.2s ease-in 0s;
  50. }

第二步,Style.css里找到 /** QQ **/ 单独进行QQ美化

1、查找以下代码:

  1. .phone-mobile .be-phone {
  2.     color: #555;
  3. }

将其修改为:color: #f8f8f8;

2、查找:

  1. .online a {
  2.     width: 30px;
  3.     color: #fff;
  4.     text-align: center;
  5.     line-height: 31px;
  6.     display: block;
  7.     border-radius: 2px;
  8.     box-shadow: 0 1px 1px rgba(0000.1);
  9. }

修改为:

  1. .online a {
  2.     width: 30px;
  3.     color: #fff;
  4.     text-align: center;
  5.     line-height: 31px;
  6.     display: block;
  7.     background-color: #fffffb;
  8.     border-radius: 2px;
  9.     box-shadow: 0 1px 1px rgba(0000.1);
  10. }

更改成功,完美显示彩色按钮快捷方式。

继续阅读
weinxin
星光博客 站长语录
星光博客,欢迎各位来访!这是我的QQ,扫一扫,加好友。大家一起交流博客建站技术,分享前沿资讯!
漂亮的音乐播放器插件Aplayer 资源分享

漂亮的音乐播放器插件Aplayer

Aplayer是一款HTML5的WordPress音乐播放器,界面仿照网易云音乐外链播放器,每个音乐需要填写音乐名称、作者、音乐封面、还有外链地址,添加成功后在音乐列表右侧复制短代码到文章需要显示的位...
知更鸟主题添加设置导航菜单方法 WordPress

知更鸟主题添加设置导航菜单方法

主题支持四个菜单(主要菜单、顶部菜单、移动端菜单和移动端页脚菜单),菜单操作使用方法: 进入WP后台→外观→菜单,点击创建新菜单。 首先输入一个菜单名称,并保存菜单。 菜单支持添加单篇文章、分类、标签...
知更鸟主题文章底部添加个性图标和分类目录 WordPress

知更鸟主题文章底部添加个性图标和分类目录

星光自己也摸索过文章显示当前分类目录的方法,虽然也是成功了,但是不怎么美丽,离我的要求还有一点点的距离,没有达到完美化。在与“简单生活”博客友联过程中看到他的网站显示的效果正是我想要的,随与博主联系获...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:33   其中:访客  26   博主  7
    • 墨雲軒 墨雲軒 0 来自天朝的朋友 谷歌浏览器 Windows 10 广东省广州市 电信

      看起來很不錯的樣子

      • 喵J ♂ 喵J ♂ 1 来自天朝的朋友 火狐浏览器 Windows 10 广东省佛山市 联通

        很不错的样子

        • 北极星 北极星 1 来自天朝的朋友 谷歌浏览器 Windows 10 山东省济南市 移动

          星光博客谢谢分享

          • bokezhu bokezhu 0 来自天朝的朋友 谷歌浏览器 Windows 10 河北省 联通

            看看学习下

            • 二龙博客 二龙博客 1 来自天朝的朋友 谷歌浏览器 Windows 10 内蒙古呼和浩特市 电信

              我也在用begin主题,都是按照博主的方式美化,哈哈,多谢分享

                • BG4PGR BG4PGR  博主 来自天朝的朋友 火狐浏览器 Windows 10 中国 移动

                  回复 二龙博客 谢谢关注本博客 :wink: