近日,去一些博客闲逛,发现他们的右侧滚动条按钮比知更鸟Begin主题自带的要好看,最后在【99八十一】博客成功扒取代码,美化成功,版本以Begin LTS版本为例。效果如下图:
第一步,Style.css里找到 /** 滚屏 **/
并查找以下两段代码:
- #scroll li a {
- background: #fff;
- font-size: 16px;
- color: #777;
- width: 32px;
- height: 32px;
- line-height: 28px;
- text-align: center;
- vertical-align: middle;
- margin-top: 4px;
- display: block;
- cursor: pointer;
- background: rgba(255, 255, 255, 0.6);
- border: 1px solid #ddd;
- border-radius: 2px;
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
- }
- @media screen and (min-width: 900px) {
- #scroll li a:hover {
- background: #3690cf;
- color: #fff;
- border: 1px solid #3690cf;
- transition: all 0.2s ease-in 0s;
- }
将其修改为:
- #scroll li a {
- font-size: 16px;
- color: #f8f8f8;
- width: 32px;
- height: 32px;
- line-height: 28px;
- text-align: center;
- vertical-align: middle;
- margin-top: 4px;
- display: block;
- cursor: pointer;
- border: 1px solid #ddd;
- border-radius: 20px;
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
- }
- .scroll-home {
- background-color: #ff9531;
- }
- .scroll-h {
- background-color: #ff5e5c;
- }
- .scroll-c {
- background-color: #24a5db;
- }
- .scroll-b {
- background-color: #ff9531;
- }
- .qq-mobile {
- background-color: #fffffb;
- }
- .phone-mobile {
- background-color: #7fb80e;
- border-radius: 20px;
- }
- .log-button {
- background-color: #f47920;
- }
- #gb2big5 {
- background-color: #aec534;
- }
- .qr {
- background-color: #4a4a4a;
- }
- @media screen and (min-width: 900px) {
- #scroll li a:hover {
- background: #2f889a;
- color: #fff;
- border: 1px solid #2f889a;
- transition: all 0.2s ease-in 0s;
- }
第二步,Style.css里找到 /** QQ **/ 单独进行QQ美化
1、查找以下代码:
- .phone-mobile .be-phone {
- color: #555;
- }
将其修改为:color: #f8f8f8;
2、查找:
- .online a {
- width: 30px;
- color: #fff;
- text-align: center;
- line-height: 31px;
- display: block;
- border-radius: 2px;
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
- }
修改为:
- .online a {
- width: 30px;
- color: #fff;
- text-align: center;
- line-height: 31px;
- display: block;
- background-color: #fffffb;
- border-radius: 2px;
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
- }
更改成功,完美显示彩色按钮快捷方式。