一、知更鸟顶部导航美化 将顶部导航 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;
- }
复制代码渐变色美化后图 二、侧边栏和两栏标题美化将侧边栏标题 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修改成以下即可。
- <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>
复制代码
两栏标题美化后
|