WordPress网站顶部、底部导航美化(适合Begin主题)

2018年12月16日10:20:25 发表评论

经常看到很多博客的导航顶部、底部,还有页脚底部有很漂亮的“装饰”。对于比较喜欢素雅风格的网站来说可能太多余,但是对于某些主题(例如begin主题)或者某些想要网站更炫酷一点的博主来说,折腾一下会有意想不到的效果。

WordPress网站顶部、底部导航美化(适合Begin主题)

实现的方法很简单,只需要一段CSS样式代码。将顶部导航 top-header 位置处的CSS修改成以下任意一种样式。对于Begin主题设置非常方便,进入后台 外观>>主题选项>>定制风格>>自定义样式,直接粘贴以下样式代码即可:

样式一:顶部导航添加彩色条

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

效果展示:

WordPress网站顶部、底部导航美化(适合Begin主题)

 

样式二:顶部导航添加渐变色

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

效果展示:

WordPress网站顶部、底部导航美化(适合Begin主题)

 

样式三:底部页脚添加彩色条

  1. #footer-widget-box {
  2. background#555 url(https://wx3.sinaimg.cn/mw690/005UYuA2gy1fi98hpe55gg30ag004dfs.gif) repeat-x scroll 0 100%;
  3. }

效果展示:

WordPress网站顶部、底部导航美化(适合Begin主题)

 

以上针对的是WordPress主题begin做的导航美化,当然对于其他主题导航美化的方法都是一样的,只需要替换你网站导航所属的类,然后放置到合适的位置即可。喜欢折腾的站长可以操作一下。

©里维斯社,本站推荐使用的主机:阿里云腾讯云;本站推荐使用的WP主题:WordPress主题

里维斯社
晨会游戏

发表评论

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