导航栏如何添加内容
发布网友
发布时间：2022-04-26 19:18
共1个回答
热心网友
时间：2023-10-23 10:27
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-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>
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
最终炫酷的导航栏就制作完成啦！
