diiv标签怎样居中导航条

1、1、新建HTML页面

打开Dreamweaver CS6，新建一个HTML页面文件，保存在桌面。

如图：

2、2、输入HTML代码，在页面显示

在HTML代码中，输入想要显示的代码，如：

<div class="menu">  <!-- class选择器 -->

 <div class="nav">

        <ul>    <!-- ul标签 -->

 <li><a href="#">导航1</a></li>  <!-- li标签 -->

 <li><a href="#">导航2</a></li>

            <li><a href="#">导航3</a></li>

            <li><a href="#">导航4</a></li>

            <li><a href="#">导航5</a></li>

        </ul>

    </div>

</div>

如图：

3、3、编写CSS控制

在head便签之内，写入CSS控制：

<style>

    body

 {

        text-align:center;    /* 文字居中 */

 }

    ul

 {

        list-style-type:none; /* ul前面的点  */

 }

    *

 {

        margin:0px 0px;     /* 到边框的距离 */

 }

    .menu

 {

        background: #029789; /* 导航条背景的颜色  */

 }

    .nav

 {

        margin:0 auto;     /* 导航栏文字的位置  */

 width:800px;   /* 和文字宽度有关，不能小于文字宽度的总和  */

 height:80px;   /* 导航栏的宽度  */

 }

    .nav a

 {

        float:left;              /* 导航栏的位置配置 */

 width:140px;          /* 选中的文字块的长度  */

 line-height:80px;              /* 选中的文字块的宽度  */

 text-decoration: none;               /* 去掉连接下划线  */

 font-size:45px;           /* 字体大小 */

 color: #FFFFFF;           /* 字体颜色 */

 }

    .nav li a:hover

 {

        background-color: #1094f2;         /* 选中的文字块的颜色 */

 text-decoration:none;     /* 选中时去掉连接下划线 */

 }

    .nav li a:link{

        text-decoration:none; /* 连接被点之后没有下划线  */

 }

</style>

如图：

4、4、调整代码，对齐样式

使代码更清楚，更容易查找，按照级缩进式缩进代码，方便些注释和修改。

如图：

5、5、演示

在浏览器打开网页，演示效果。

如图：

6、6、总结

导航条一般使用li标签分条，并将li的样式取消，重新在CSS里布局。