呵呵，十一放假两天，就能自己写几篇啦~

刚才我转了转看到jk博客上那个

这个，他说是很流行的，其实是我先研究出来的

不知道被谁查看了源代码，流行开啦

被他看到了直接分析了代码发了出来，下面我就给大家讲下原理：

我这个CSS导航其实是用软件做的~软件的名字叫

下载地址CSS Tab Designer！

CSS Tab Designer操作很简单，主界面采用三列式布局：项目(Items)、样式(Tab Styles)、预览(Preview)依次排开，几乎所有的操作都在主界面中完成，如图。

新建菜单的步骤非常简单，在“样式(Tab Styles)”中预制了60余种风格各异的菜单样式，先选择需要的样式，接下来点击左侧“项目(Items)”中的“用样本填充(Fill with samples)”，立即就可以在“预览(Preview)”中看到效果，菜单就算生成了。

    当然，软件内置样式模版中的菜单项目都是英文，对于中文用户并不适合，我们还需要做一些修改。主窗口左侧“项目(Items)”中显示当前的菜单项目，项目工具栏排列多个按钮，从左到右依次是：添加多个项目(Add Multiple Items)、添加项目(Add Item)、删除项目(Delete Item)、上移(Move Up)、下移(Move Down)、编辑选择项目(Edit Selected Item)，如图。

鼠标双击任意当前项目即可进入编辑对话框，我们在这里修改原始英文为所需中文即可，如图。

 将所有内容修改完毕后，就可以在预览区看到效果了。此时，我们发现菜单上的文字并不是预期中出现的中文，而是一些乱码，这是为什么呢？如图。

    CSS Tab Designer是一款英文软件，预置编码是针对英语系网页的，所以我们需要手工修改编码为中文。由于软件本身并不具备代码编辑功能，我们将在CSS菜单网页文件生成后再做修改。

    预览时面对乱码还是不太好，你可以在预览区空白处点击右键，在右键菜单中选择“编码→简体中文(gb2312)”，预览效果即恢复正常，如图。

不觉间，CSS菜单已经做好，接下来输出文件。点击软件工具栏上“创建HTML(Generate HTML)”按钮，系统转入保存对话框。本例：选择保存文件夹：D:/web，输入文件名：menu，点击“保存”按钮完成。

    前面已经说过，软件默认生成的网页编码是英语系的，接下来，我们开始做编码修改工作。

    进入D:/web目录，一般可以看到两个文件：

    menu.html，生成的CSS菜单网页。

    menu1.gif，CSS菜单调用的相关图片，实际情况下文件名可能略有不同。

    你可以用任意文本编辑器打开menu.html文件，笔者使用的系统自带的“记事本”，打开文件后，找到如下内容：

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

    CSS Tab Designer生成文件的默认编码为“ISO-8859-1”，修改为中文编码“gb2312”即可，如图：

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

就这样简单，保存修改结果，再次打开menu.html看看吧，怎么样，没有乱码了吧！

这是一般网页的CSS导航就做出来了，下面我们来提取其中的

<STYLE type=text/css>
<!--
body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        margin: 0;
        font-size: 80%;
        font-weight: bold;
        background: #FFF;
        }
h2 {
        font: bold 14px Verdana, Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0px;
        padding: 0px 0px 0px 15px;
}
ul {
        list-style: none;
        margin: 0;
        padding: 0;
        }
img {
    border: none;
}
/*- Menu 9--------------------------- */
#menu9 {
        width: 150px;
        margin: 10px;
        }
#menu9 li a {
        height: 32px;
          voice-family: "\"}\"";
          voice-family: inherit;
          height: 24px;
        text-decoration: none;
        }
#menu9 li a:link, #menu9 li a:visited {
        color: #FFF;
        display: block;
        background:  url(http://s15.sinaimg.cn/orignal/49bf8d50a2c073a000dfe);
        padding: 8px 0 0 35px;
        }
#menu9 li a:hover, #menu9 li #current { {
        color: #FFF;
        background:  url(http://s15.sinaimg.cn/orignal/49bf8d50a2c073a000dfe) 0 -32px;
        padding: 8px 0 0 35px;
        }
-->
</STYLE>

<DIV id=menu9>
<UL><!-- CSS Tabs -->
<LI><A href="http://blog.sina.com.cn/m/csbeyond">我的主博</A>
<LI><A href="http://blog.sina.com.cn/m/csbeyond#sort_2">原创作品</A>
<LI><A href="http://blog.sina.com.cn/m/csbeyond#sort_3">博客教程</A>
<LI><A href="http://blog.sina.com.cn/m/csbeyond#sort_6">我的素材</A>
<LI><A id=current href="http://blog.sina.com.cn/m/csbeyond#sort_5">业界新闻</A>
<LI><A href="http://blog.sina.com.cn/m/csbeyond#sort_7">比昂专辑</A>
<LI><A href="http://blog.sina.com.cn/m/csbeyond#sort_4">摇滚心情</A>
<LI><A href="http://blog.sina.com.cn/m/csbeyond#gbook_1">给我留言</A></LI></UL></DIV></STYLE>
添加到空白面板里就行了~里面要用到一张图片

直接上传就可以了~

大家要使用的话，直接复制文章最后的
<STYLE type=text/css>
<!--
body {.........</A></LI></UL></DIV></STYLE>
就可以了，中间连接什么的可以自己改哈
比如
<LI><A href="http://blog.sina.com.cn/m/csbeyond">我的主博</A>
你可以改成
<LI><A href="你的连接">连接名称</A>