网页导航栏制作：[2]如何为网页添加导航栏

时间：2024-10-15 13:37:37

1、打开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>

2、此时对应效果如图：

3、接下来准备相关的导航按钮图片（可以事先利用PS制作好）。本文中小编使用的图标如图所示。

4、然后将以下CSS代码加入到<head></head>之间：<style type="text/css">body {text-alig荏鱿胫协n: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>

5、在加入CSS代码之间，网页此时的效果如图：

6、接下来，我们对网页效果进行调整，将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>

7、最终炫酷的导航栏就制作完成啦！