【知更鸟】知更鸟begin顶部导航美化及侧边栏和两栏标题美化

一、知更鸟顶部导航美化

将顶部导航 top-header 位置css修改成以下两种中的其中一种。

1、顶部导航部添加彩色条:

#top-header {
    background: #e7e7e7 url(https://wx2.sinaimg.cn/large/006VCrUsgy1fjmflwl7rog30ag004dfs.gif ) repeat-x scroll 0 100%;
}

彩色条美化后图:

2、顶部导航添加渐变色:

#top-header {
    background: linear-gradient(-30deg,rgba(255,213,60,.71) 10%,rgba(161,230,243,.78)) no-repeat;
    border-bottom: 1px solid #dedede;
}

渐变色美化后图:

二、侧边栏和两栏标题美化

6-27注：begin最新版下面修改失效，更多请自行折腾。

将侧边栏标题 sidebar h3 位置css修改成以下:

#sidebar h3 {
    background: #fff;
    height: 37.5px;
    line-height: 37.5px;
    border-bottom: 1px solid #e2e1e1;
    margin: 0 20px 0 20px;
    text-align: center;
    font-size: 1.8rem;
    letter-spacing: 4px;
    color: #606777;
}

按照以上css修改后，标题栏位置还多了一个 .title-i ，后台找到 .title-i 将其隐藏:

.title-i {
    float: left;
    width: 16px;
    display: none;
}

将 .title-i 隐藏后，如下效果图:

然后，如果使用杂志布局的会发现两栏位置前面的 标题ICO 也会不见了，下图红圈的位置。

两栏标题美化前

然后，将 .cat-box .cat-title a 位置css修改成以下即可:

.cat-box .cat-title a {
    float: left;
    width: 95%;
    margin-left: 20px;
    color: #606777;
}

两栏标题美化后

以上来自：https://www.zhushuming.cn/5735.html

感谢您的来访，获取更多精彩文章请收藏本站。