我们在开发网页的时候经常使用到导航条，那么如何利用div制作导航条呢？今天本人就利用div制作一个导航条，同时把制作过程和截图分享给大家，希望对你有所帮助和启发。工具/原料moredreamweaver cs5方法/步骤1/9分步阅读

双击打开dreamweaver cd5，执行文件-新建命令，打开新建文档对话框，在该对话框中选择html后点击创建按钮。

2/9

首先在title中输入文件的名称为导航条，这样在浏览文件的时候就可以看到文件了。

3/9

在标题下面输入代码

style type=text/css

.menu{width:80%; height:40px; margin:auto; margin-top:10px; border: solid 1px #fcc;}

/style

定义类

4/9

接着在body中输入代码div class=menu /div在页面中你会看到一个css。

5/9

在style中再次定义一个类，即小导航条，代码为

.xk{

float:left;

width:8.99%;

height:30px;

margin-top:5px;

list-style-type:none;

border-right:solid 1px #fcc;

text-align:center;

}

6/9

在大导航条中建立若干小导航条，输入代码为div class=xk /div根据实际需要来确定小导航条的个数。

7/9

在每个小导航条中输入文字内容，输入代码为div class=xk 导航1/div，接着可以查看效果。

8/9

接着按f12在浏览器中查看，弹出“是否将改动保存到”提示信息对话框，直接点击是即可。

9/9

执行文件-令存为命令，在弹出的对话框中输入名称为“导航条”，选择一个合适的位置进行保存即可。

DREAMWEAVERDIVCSS导航条如何制作导航