WordPress博客顶部导航菜单两种美化方法

  • A+
所属分类:wordpress主题

对于喜欢WordPress主题的朋友们来说,美化网站都是我们比较迫切的事情,每个人都喜欢自己把它装修的美美的。前段时间看到星光博客里的一种美化顶部导航菜单的方法,对于喜欢炫彩丰富的朋友们来说可以尽情的折腾下。

WordPress博客顶部导航菜单两种美化方法

效果如图:

WordPress博客顶部导航菜单两种美化方法

第一种,整体渐变背景色:打开Style.css,查找#top-header(最新版主题是#header-top),将背景色background:#e7e7e7;修改为

background:linear-gradient(-30deg,rgba(255, 213, 60, 0.71) 10%,rgba(161, 230, 243, 0.78)) no-repeat;

第二种,导航菜单背景颜色交替:第一步,先把css样式添加到外观→自定义→额外css里面,样式如下

.mcnmq{background:#b485e2;color:#fff;padding:2px 8px;border-radius:2px}.mcnmw{background:#74d62f;color:#fff;padding:2px 8px;border-radius:2px}

第二步,在把调用代码到你想要添加的地方,如顶部导航菜单→菜单结构→导航标签里面!

<span class="mcnmq"> 导航 </span>

<span class="mcnmw"> 导航 </span>

注意:“mcnmq”和“mcnmw”要隔开用,否则出来的菜单效果就是一个颜色了。

Joson

发表评论

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