Begin知更鸟主题美化——网站顶部、底部导航

2020年1月12日11:09:57来源:WordPress网站顶部、底部导航美化(适合Begin主题) - 里维斯社 评论 709 835字阅读2分47秒
摘要

最快的学习方法——模仿,虽然自己不懂代码,但是直接按照别人分享出来的教程设置 一样可以可以达到自己的目的,本次是美化顶部导航栏,感谢原作者。

正在加载今日诗词....

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

效果展示:

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

效果展示:

Begin知更鸟主题美化——网站顶部、底部导航

需要注意的是,如果是最新版begin主题要把样式二中“top-header”改成“header-top”才能生效。

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

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

效果展示:

Begin知更鸟主题美化——网站顶部、底部导航

 

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

继续阅读
二龙
阿里巴巴图标库使用方法 折腾网站

阿里巴巴图标库使用方法

主题换用阿里巴巴矢量图标库(Iconfont),与之前使用的 Font Awesome图标,有绝对的优势: 图标字体多 目前Iconfont大概有一百三十多万个,而Font Awesome只有600多...
过年啦,挂灯笼! 折腾网站

过年啦,挂灯笼!

过年挂灯笼是中国的一个习俗,家里挂灯笼,自己博客也是自己的家,当然也要挂一个了。很多年前Flash流行时,网上可以随便找一个Flash动画的灯笼,很方便就可以加到网站主题模板上,如今Flash已成过眼...
WordPress启用又拍云CDN,后台加载不出来 折腾网站

WordPress启用又拍云CDN,后台加载不出来

启用又拍云CDN加速功能 最近废了九牛二虎之力终于给我的二龙博客添加又拍云CDN加速,设置过程中遇到不少问题,具体设置方法以后再补上方法,我遇到一个比较严重严重的问题。那就是:使用了CDN加速后,登录...
增加说说功能,说说文章界面错位 折腾网站

增加说说功能,说说文章界面错位

一、博客现状 目前博客基本成型,还存在我唯一的缺憾,就是发表说说后,页面出现错位。 例如:这是一条测试说说 二、理想是这样的 正常应该是这样的: 三、求助大佬老铁 我这个问题怎么解决呢?
匿名

发表评论

匿名网友 填写信息

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