准备工作：下载自定义导航压缩包

首先，给出几个自定义导航的压缩包
　　　　天幻经典皮肤－左侧导航
　　　　天幻经典皮肤－右侧导航
　　　　经典皮肤红色版本－左侧导航

　　这些导航的使用方法：只要将压缩包上传到专题根目录后解压缩，将navbar.css文件的名称修改成main.css即可。
　　如果mail.css文件已经存在，不用将原文件删除后将新文件改名，因为有其他更容易的方法套用navbar.css里的样式，具体请看压缩包内的readme.txt文件进行修改。
　　 各个压缩包内的navbar.css和navbar目录下文件可以互换，只要在没有改动对应目录和文件名。

自定义导航，一般要考虑四个方面
　　正上方logo设置（titlelogo.jpg/gif）
　　背景条/循环标语条设置（sidebar.gif）
　　脚标图像（footer.gif）
　　专题栏目的颜色/图标设置（项目列表 #nav）

以下会分别讲解这四个方面 ，不过各位学习者最好再看下这两章
　　专题导航布局的层次解说 及 导航用的CSS解说

To Top

正上方logo设置

下面是本段相关的css代码，根据导航位置左/右侧的不同，代码可能会有些许变化
（具体请自行在压缩包内的navbar.css里寻找）

#navbar {
	float: left;
	background: url(navbar/titlelogo.jpg) no-repeat center top;
	width: 153px;
	padding-top: 165px;
	margin-left: 2px;
	display: inline;
	position: relative;
	top: -60px;
	font-size: 12px;
}

一般可能会修改的是以下三个属性：
background: url(……)里的地址是titlelogo.jpg的路径，可以直接修改原图，或者将路径换成其他图片， 之后的no-repeat center top都不要修改
width: 后面的数值是图片的宽度，建议保持153px不变
padding-top: 后面的数值是图片的高度，如果这个数值不改成自定义图片的高度，则会导致导航与图片脱节

正上方的logo（titlelogo.jpg/gif）宽度建议为153px不变；高度不限，不过最好在85px到360px之间。小于85px logo图片的比例会比较难看，大于360px 导航容易被设置的过于靠下。
另外，尽量在logo上注明专题的域名(xxx.ffsky.cn)

To Top

背景条/循环标语条设置

下面是本段相关的css代码

#wrapper {
	width : 760px;
	min-height: 100%;
	margin: auto;
	text-align: left;
	background: #fff url(navbar/sidebar.gif) repeat-y left;
}

background: 与上面相同，url(……)里的地址是sidebar.gif的路径，属性repeat-y left/right则不要修改

对于背景条/循环标语，高度方面没有任何限制，宽度方面则为157px，建议格式为gif
如果是使用背景条，建议背景条的颜色尽量单一，容易重复
反之，使用循环标语的话，建议标语区宽度不超过60px，高度则根据标语长度而定

To Top

脚标图像

下面是本段相关的css代码

#footer {
	height: 54px;
	font: 12px/20px Verdana, Simsun, sans-serif;
	margin: -54px auto 0;
	width : 755px;
	background: url(navbar/footer.gif) no-repeat left bottom;
}

background: 与上面相同，url(……)里的地址是footer.gif的路径，属性left/right bottom则不要修改
不过，可以删除这一整行参数来取消设定脚标图像
margin: 第一个数值需要改动成图片高度的负数，剩下的auto和0则不要改动
另外 ，如果图片高度大于54px，建议加上一句 padding-top: ??px
??处的数值为（图片高度-54px）/2

对于脚标图像，宽度方面则为153px，建议格式同样为gif
高度方面，需要大于54px，建议在54～100px之间，过大也会影响效果
如果没有合适的图片，以及使用循环标语时，建议不设置脚标

To Top

专题栏目的颜色/图标设置

本段相关的css代码比较多，并且设置繁杂，如果对CSS没有很大信心的话可以不修改
具体则制作中，请稍后期待

To Top

专题导航布局的层次解说

专题的导航由三个div组成：

　 一个是#wrapper层(id="wrapper")，这层主要是为了显示导航背景条（sidebar.gif）和专题的总宽度而设置。
　 在本层里，导航背景条sidebar.gif的宽度需要限制在157px，并且外侧两边都必须有一层黑边+一层白边。

　 在#wrapper层内部的是#navbar层，以及项目列表 #nav。
　 #navbar层上方显示的是titlelogo.jpg/gif图片，这张图片在导航背景上方，并覆盖掉这部分导航背景条。#navbar层的宽度限定为153px。

　最下面的是#footer层，这部分显示脚标图像，同时也显示ffsky的站点信息和版权信息。因为导航背景条的双层描边，footer.gif的宽度需要比sidebar.gif小4象素。

To Top