免费空间

全屏导航背景设置方法

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

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

1366*768分辨率显示器下

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


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

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

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

当前的显示效果如下图


接下来就步入正题了。

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

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

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

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

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

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

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

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

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

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

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


地址:山东省胶州市李家河德才劳务 客服电话:17554177173
版权所有:免费空间© 2010 - 2015 All Rights Reserved