全屏导航背景设置方法

有些时候为了使网站更美观,我们会将导航栏设置为横向全屏显示,先来看下效果。

以常见的两种分辨率显示器给大家预览下效果

1366*768分辨率显示器下

 21.5寸以上显示器流行的1920*1080分辨率


不同分辨率的显示器下,导航栏始终显示的是横向全屏的效果,下面给大家介绍下卓老师建站平台如何设置这种效果。

首先,我们先到网站顶部添加一个导航模块,模块栏类型选择导航栏,模块标题任意填写,导航栏宽度建议小于您的网站主体宽度(网站主体宽度可在全局设置中修改)

添加好之后拖动模块,调整到合适的大小和位置

当前的显示效果如下图


接下来就步入正题了。

首先,我们先计算一下当前导航栏的高度

大致计算方法,导航栏目字号+导航内距的上下边距+栏目内距的上下边距(下图红框中的五项之和)

然后通过作图软件制作一个等高的背景(可以用photoshop等作图软件,下面以photoshop为例)

打开photoshop,新建一个文件,宽度任意,高度为以上计算出的结果

然后点击工具栏中的前景色选色面板(背景色也可以),选择与导航栏设置的背景相同的颜色

然后按快捷键alt+delete填充(背景色填充ctrl+delete),保存即可

(注:导航背景使用图片和渐变的朋友一定已经有了自己的导航背景图片,直接使用您已有的导航背景做以下操作即可)

背景图片制作好之后,接下来登陆卓老师建站管理后台,找到网站样式管里》全局样式管理

在这里找到网站顶部主体背景和网站顶部全屏背景,选择您刚刚制作的背景图片,平铺方向设置为横向平铺,位置设置为下

(前边的颜色设置是您除导航区域外其他区域的颜色,不是导航颜色)

然后提交即可预览效果,然后根据显示情况可以进行适当微调,这样我们想要的效果就完成了,是不是很简单呢


地址:北京市XX区XX大厦XX号 客服电话:010-88888888
版权所有:自助建站 www.abcd.com © 2010 - 2015 All Rights Reserved  京ICP备15031340号
本站为您提供:免费建站|企业建站|自助建站|模板建站|智能建站|企业网站建设|个人主页|网站申请|域名注册服务