前言

通过设置css样式表自定义网站的各类样式，包括底栏、滚动条、鼠标等

本篇设置基于Butterfly主题4.4.0版本

参考这个大佬的视频

1. 准备工作

在hexo博客目录的source文件夹中创建css文件夹，并在里面新建style.css样式表文档。

后面的所有样式就写在这个文档里面，网站会自动调用。

在修改特定样式前右键要修改的部位，点击“检查”会出现网站的样式代码，找到该位置的class名称，在style.css中输入class名称和相应的属性。

image-20220905121148860

2. 修改底栏footer

将footer修改为“透明”，字体修改为“黑色”：

1
2
3
4
5
6
7
#footer{
    background: transparent;
}

#footer-wrap{
    color: #0d0d0d;
}

3. 修改滚动条和鼠标

样式文件参考github上的代码

在style.css样式表文档中添加代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/* 鼠标样式 */
body {
    cursor: url(https://cdn.jsdelivr.net/gh/constown/HexoCustomFile/public/cursors/default.cur),
      default;
  }
  a,
  img {
    cursor: url(https://cdn.jsdelivr.net/gh/constown/HexoCustomFile/public/cursors/pointer.cur),
      default;
  }

  /* 滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  ::-webkit-scrollbar-track {
    background-color: rgba(73, 177, 245, 0.2);
    border-radius: 2em;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: #49b1f5;
    background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.4) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.4) 50%,
      rgba(255, 255, 255, 0.4) 75%,
      transparent 75%,
      transparent
    );
    border-radius: 2em;
  }
  
  ::-webkit-scrollbar-corner {
    background-color: transparent;
  }
  
  ::-moz-selection {
    color: #fff;
    background-color: #49b1f5;
  }