CSS导航条：100%宽度导航条制作

站长地带继续导航条这个专题的学习制作，具体所有教程：http://www.zzarea.com/s/daohangtiao/

本节讲解100%宽度的效果，这种效果市面上用的比较多了，效果如下：

HTML代码：

<div class="nav_all">       <div class="nav">            <ul>                 <li><a href="http://www.zzarea.com" class="shouye">项目1</a></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>                 <li><a href="#">项目6</a></li> <li><a href="#">项目7</a></li>             </ul>        </div>  </div>

CSS代码

<style type="text/css">  *{ margin:0px; padding:0px; }   body{ font-size:14px; font-family:"微软雅黑"; }   .nav_all{ width:100%; background-color:#0099FF; height:40px; }   .nav{ width:1000px; margin:30px auto 0px auto; background-color:#0099FF; height:40px;   }   ul{ list-style:none;   }   li{ float:left; line-height:40px; width:100px; text-align:center;   }   li a{        color:#FFFFFF;        text-decoration:none;        display:block;      /*块状结构*/         width:100px;         height:40px;       }   li a:hover{ background-color:#000000;   }   li .shouye{ background-color:#333333; }       </style>

和前面的导航条的区别在于，在整个导航条外层，又添加了一个div，用于100%宽度使用，www。zzarea。com原创教程，转载注明出处。