![网页导航栏制作：[2]如何为网页添加导航栏](https://search.52zhanxing.com/aiimages/网页导航栏制作：[2]如何为网页添加导航栏.png)
操作方法
打开Deamweaver8，新建一网页文件。接着输入以下导航菜单的内容： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=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>
此时对应效果如图：
接下来准备相关的导航按钮图片（可以事先利用PS制作好）。本文中小编使用的图标如图所示。
然后将以下CSS代码加入到<head></head>之间： <style type="text/css"> body {text-align:center;} #navigation { list-style-type:none; height:auto;} #navigation li { width:154px; height:60px; text-align:center; float:left; padding-top:18px;font-size:20px; font-family:"微软雅黑", "宋体", "隶书"; background-image:url(images/noactive.jpg);} a {width:154px; height:72px;} a:link { text-decoration:none; color:#FFFF00;} a:visited { text-decoration:none; color:#FFFF00; } #navigation li:hover { color:#CC0000; text-decoration:underline; background-image:url(images/active.jpg);} a:hover{ color:#CC0033;} #left {background-image:url(images/left.jpg); width:22px;} </style>
在加入CSS代码之间，网页此时的效果如图：
接下来，我们对网页效果进行调整，将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>
最终炫酷的导航栏就制作完成啦！