wordpress站点-顶部导航美化及侧边栏和两栏标题美化

一、知更鸟顶部导航美化

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

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

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

复制代码

2、顶部导航添加渐变色

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

复制代码

渐变色美化后图

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

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

1. #sidebar h3 {
   
2.     background: #fff;
   
3.     height: 37.5px;
   
4.     line-height: 37.5px;
   
5.     border-bottom: 1px solid #e2e1e1;
   
6.     margin: 0 20px 0 20px;
   
7.     text-align: center;
   
8.     font-size: 1.8rem;
   
9.     letter-spacing: 4px;
   
10.     color: #606777;
    
11. }

复制代码

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

1. .title-i {
   
2.     float: left;
   
3.     width: 16px;
   
4.     display: none;
   
5. }

复制代码

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

侧边栏标题美化后

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

两栏标题美化前

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

1. <div style="text-align: left;">.cat-box .cat-title a {</div><div style="text-align: left;">float: left;</div><div style="text-align: left;">width: 95%;</div><div style="text-align: left;">margin-left: 20px;</div><div style="text-align: left;">color: #606777;</div><div style="text-align: left;">}</div>

复制代码

两栏标题美化后