羊毛之家

这里总有一款属于你的菜

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

经常看到很多博客的导航顶部、底部,还有页脚底部有很漂亮的“装饰”。对于比较喜欢素雅风格的网站来说可能太多余,但是对于某些主题(例如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. }

效果展示:

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

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

效果展示:

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

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

效果展示:

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

免责声明:内容均来自网络或网友投稿,如有侵权请联系管理员,我们会第一时间为您处理!谢谢您的合作!

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址