欢迎来到卓老师建站。 [ 请登录 ] | [ 免费注册 ] | [ 忘记密码 ]

全屏导航背景设置方法

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

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

1366*768分辨率显示器下

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


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

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

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

当前的显示效果如下图


接下来就步入正题了。

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

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

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

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

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

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

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

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

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

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

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


 

全国统一服务热线
  • 卓老师主站:(010)51661876
  • [点击网站右侧客服即可通过QQ联系]
京ICP备10048112号 | 京公网安备110114001101号 | 增值电信业务经营许可证:京 B2-20060128
Copyright©2008-2016 北京卓研科技有限公司 版权所有 本站程序界面、源代码受相关法律保护,未经授权,严禁使用
卓老师建站为您提供:免费建站 | 企业建站 | 自助建站 | 模板建站 | 智能建站 | 企业网站建设 | 个人主页 | 网站申请 | 域名注册服务