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

发布时间：

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

近日，去一些博客闲逛，发现他们的右侧滚动条按钮比知更鸟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(255, 255, 255, 0.6);
  14.     border: 1px solid #ddd;
  15.     border-radius: 2px;
  16.     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.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(0, 0, 0, 0.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. }
  45. @media screen and (min-width: 900px) {
  46.     #scroll li a:hover {
  47.     background: #2f889a;
  48.     color: #fff;
  49.     border: 1px solid #2f889a;
  50.     transition: all 0.2s ease-in 0s;
  51. }

第二步，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(0, 0, 0, 0.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(0, 0, 0, 0.1);
  10. }

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