如何制作导航栏

html-css029

如何制作导航栏,第1张

1、打开Deamweaver8，新建一网页文件。接着输入以下导航菜单的内容：

<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进行设计。

教你个方法，打开琉璃神社--单击右键--网页另存为--选择“网页、全部”--确定。将它保存在你的电脑上，那基本上的文件就可以下载到本地，然后你再去分析人家的代码是怎么写的。

如果自己不会写的话也没有关系，里面的图片什么的都是可以分分离的，换自己的图片都可以用。

希望有帮助，愿采纳，多谢！