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

一点优化 2019年12月25日22:12:04
评论
1.7K看 935字
广告也精彩

一、知更鸟顶部导航美化

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

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

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

wordpress站点-顶部导航美化及侧边栏和两栏标题美化
彩色条美化后图

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;
}

wordpress站点-顶部导航美化及侧边栏和两栏标题美化
渐变色美化后图

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

将侧边栏标题 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  隐藏后,如下效果图。
wordpress站点-顶部导航美化及侧边栏和两栏标题美化
侧边栏标题美化后
然后,如果使用杂志布局的会发现两栏位置前面的 标题ICO 也会不见了,下图红圈的位置。
wordpress站点-顶部导航美化及侧边栏和两栏标题美化
两栏标题美化前
然后,将 .cat-box .cat-title a  位置css修改成以下即可。

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

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


经过一番折腾,美化了一些,代码也是在小伙伴站扒的,还扒了一些其他的,不好全部写出来,需要的小伙伴自己扒吧。

  • SEO话题
  • 这是我的QQ群扫一扫
  • weinxin
  • wp开发交流
  • 我的QQ交流群扫一扫
  • weinxin
wordpress搭建站中站(栏目站)教程 基础建站教程

wordpress搭建站中站(栏目站)教程

wordpress如何搭建栏目站?也就是我们所说的站中站。wordpress因为文章数据库表单只有一个,所以一般会比较卡,当然也有一些SEO站长因为站中站权重比较集中,所以使用站中站的方式做优化,还有...
修改WordPress数据库前缀完后台无法登陆教程 WP综合教程

修改WordPress数据库前缀完后台无法登陆教程

一点优化操作完上一个如何修改WordPress数据库前缀修改完之后,发现网站后台无法登陆了,百思不得其姐,然后在百度的帮助下,解决了这个问题,后续的教程请看下面。 如果你将数据库导入到运营中的服务器登...
如何修改WordPress数据库前缀 WP综合教程

如何修改WordPress数据库前缀

之前有一点优化有出一个分布式缓存的教程,但是那个分布式缓存会导致多个网站在一个服务器下面,数据库相同表前缀导致出现错误,所以这里一点优化在这边出三个WordPress修改表前缀的方法,分别是插件,安装...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: