经常看到很多博客的导航顶部、底部,还有页脚底部有很漂亮的“装饰”。对于比较喜欢素雅风格的网站来说可能太多余,但是对于某些主题(例如begin主题)或者某些想要网站更炫酷一点的博主来说,折腾一下会有意想不到的效果。
实现的方法很简单,只需要一段CSS样式代码。将顶部导航 top-header 位置处的CSS修改成以下任意一种样式。对于Begin主题设置非常方便,进入后台 外观>>主题选项>>定制风格>>自定义样式,直接粘贴以下样式代码即可:
样式一:顶部导航添加彩色条
- #top-header {
- background: #e7e7e7 url(https://reaff.com/i/large/006VCrUsgy1fjmflwl7rog30ag004dfs.gif ) repeat-x scroll 0 100%;
- }
效果展示:
样式二:顶部导航添加渐变色
- #top-header {
- background: linear-gradient(-30deg,rgba(255,213,60,.71) 10%,rgba(161,230,243,.78)) no-repeat;
- border-bottom: 1px solid #dedede;
- }
效果展示:
样式三:底部页脚添加彩色条
- #footer-widget-box {
- background: #555 url(https://reaff.com/i/mw690/005UYuA2gy1fi98hpe55gg30ag004dfs.gif) repeat-x scroll 0 100%;
- }
效果展示:
以上针对的是WordPress主题begin做的导航美化,当然对于其他主题导航美化的方法都是一样的,只需要替换你网站导航所属的类,然后放置到合适的位置即可。喜欢折腾的站长可以操作一下。