<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>导航栏示例</title>
</head>
<body>
<ul id="navigation">
<li></li>
<li><a href="#">首页</a></li>
<li><a href="#">我的博客</a></li>
<li><a href="#">互动交流</a></li>
<li><a href="#">开心一刻</a></li>
<li><a href="#">悬 赏 令</a></li>
<li></li>
</ul>
</body>
</html>
2、接下来准备相关的导航按钮图片（可以事先利用PS制作好）。
3、然后将以下CSS代码加入到<head></head>之间：
<style type="text/css">
body {text-align:center}
#navigation
{ list-style-type:noneheight:auto}
#navigation li { width:154pxheight:60pxtext-align:center
float:leftpadding-top:18pxfont-size:20pxfont-family:"微软雅黑", "宋体", "隶书"
background-image:url(images/noactive.jpg)}
a {width:154pxheight:72px}
a:link { text-decoration:nonecolor:#FFFF00}
a:visited { text-decoration:nonecolor:#FFFF00}
#navigation li:hover { color:#CC0000text-decoration:underline
background-image:url(images/active.jpg)}
a:hover{ color:#CC0033}
#left {background-image:url(images/left.jpg)width:22px}
</style>
4、接下来，对网页效果进行调整，将HTML菜单部分进行调整：
<body>
<ul id="navigation">
<li style="background-image:url(images/left.jpg)width:22px"></li>
<li><a href="#">首页</a></li>
<li><a href="#">我的博客</a></li>
<li><a href="#">互动交流</a></li>
<li><a href="#">开心一刻</a></li>
<li><a href="#">悬 赏 令</a></li>
<li style="background-image:url(images/right.jpg)width:22px"></li>
</ul>
</body>
5、最终炫酷的导航栏就制作完成啦！
单纯的HTML和CSS是实现不了这么炫酷的效果的，还得结合jQuery进行设计。教你个方法，打开琉璃神社--单击右键--网页另存为--选择“网页、全部”--确定。将它保存在你的电脑上，那基本上的文件就可以下载到本地，然后你再去分析人家的代码是怎么写的。
如果自己不会写的话也没有关系，里面的图片什么的都是可以分分离的，换自己的图片都可以用。
希望有帮助，愿采纳，多谢！
