更改博客导航栏的样式

2021-03-24

网页美化

有 N 人看过

这篇文章主要是记录一下本博客导航栏的修改过程。

因为博客的源码中导航栏的效果在这里，小霖的博客的导航栏效果在这里，对比之下我还是想弄成小霖博客的样子。

首先是修改导航栏按钮的效果，修改build.css文件：

修改

.header .header-menu-inner a {
    margin: 0 20px 0 0;
    color: var(--color-type);
    font-size: 14px;
    letter-spacing: 0;
}

为

.header .header-menu-inner a {
    border-radius: 8px;
    color: #171321;
    font-size: 16px;
    padding: 0 10px;
}

然后是更改鼠标指向时导航栏按钮的效果，从变长1px变成变色，修改build.css文件：

修改

1
2
3

.header .header-menu-inner a:active, .header .header-menu-inner a:hover {
    letter-spacing: 1px;
}

为

1
2
3

.header .header-menu-inner a:active, .header .header-menu-inner a:hover {
    background: #ffffff;
}

其次还有一个地方我不确认有没有改的必要，在这里也贴出来吧：

在浏览器控制台中，上述的源码默认是看不到的，需要点击那个::after的标签，然后删除掉下面的content: ‘ ‘;，如下：

.header .header-menu-inner a::after, .header .header-menu-inner a::before {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border: 1px solid rgba(255,255,255,0);
    bottom: 0;
    content: ' '; 		<-----------------------------删除
    display: block;
    margin: 0 auto;
    position: relative;
    -webkit-transition: all 280ms ease-in-out;
    transition: all 280ms ease-in-out;
    width: 0;
}