CSS实现背景图片不规则的导航菜单

发布时间：2013-02-18 00:30:41作者：知识屋

一般情况下导航菜单的背景图片都是比较有规则的，但是平时我们也会遇到很多背景图片形状不规则导航条（比如但鼠标移上的时候，背景图片不规则，本例只讨论此种类型）,如下图所示：

（图一）

当鼠标移上去的时候背景变成红色箭头，也许，咋一看，觉得这个效果并没有什么特别的地方，但是仔细看看我画上去的绿色框框部分，就会发现每一块都是接在一起的不会断开的；如果说按照普通方法来做，那么实现的可能是下图所示的效果：

（图二）

即是块与块之间是断开的。www.zhishiwu.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script type="text/javascript" src="js/jquery.js"></script>
 <!-- wbg解决ie6下的背景 勿动！！！-->
     <!--[if IE 6]>
       <script src="js/ie_png.js" mce_src="js/ie_png.js">
       </script>
       <script type="text/javascript">   
           DD_belatedPNG.fix('.previous,img'); 
      </script>
 <![endif]--> 
 <style type="text/css">
 body{
         font-size:12px;
         font-family:Arial, Helvetica, sans-serif;
 }
 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {    
     margin:0;   
      padding:0;  
     list-style:none;
 } 
 body img{
   border:none;
 }
 a{
  color:#000;
  border:0;
  text-decoration:none;
 }
 a:hover{
   color:#f00;
   text-decoration:none;
 }
 #warp{
     margin:20px auto;
     width: 960px;
 }
 body{
         background:url(img/bj.jpg) no-repeat center top #090909;
 }
 .nav{
         background:url(img/nav_bj.png) right no-repeat;
         _background:url(img/nav_bj.gif) right no-repeat;
         height:47px;
         width:638px;
 }
 .nav ul li{
             float:left;
             margin:0 -7px;/*这里的marign是实现这个效果最关键的地方*/
             display:inline;
             width:104px;
 }
 .nav ul li a{
                 display:block;
                 color:#FFFFFF;
                 padding:7px 0px;
                 _padding:5px 0px 6px;
                 width:104px;
                 float:left;
                 text-align:center;
                 font-family:Microsoft YaHei !important;
 }
 .nav ul li a span{
                     display:block;
 }
 .nav ul li a:hover{
                         background:url(img/a_hover.png) no-repeat;
                         _background:url(img/a_hover.gif) no-repeat;
                         color:#fff;
 }
 .nav ul .home a:hover{
                         background:url(img/home_hover.png) 7px center no-repeat;
                         _background:url(img/home_hover.gif) 7px center no-repeat;
 }
 </style> 
 <title></title>
 </head>
 <body>
     <div id="warp">
         <div class="nav">
             <ul>
                 <li class="home"><a href=""><span>Home</span>首页</a></li>
                 <li><a href=""><span>About</span>关于九弘</a></li>
                 <li><a href=""><span>Serve</span>服务项目</a></li>
                 <li><a href=""><span>Case</span>活动案例</a></li>
                 <li><a href=""><span>Information</span>公司动态</a></li>
                 <li><a href=""><span>Partners</span>合作伙伴</a></li>
                 <li><a href=""><span>Contact</span>联系方式</a></li>
             </ul>
         </div>
     </div>
 </body>
 </html>

在这个效果的实现过程中最关键的地方就是把“li”的margin值左右两边设为负数，然后把“li”和”a“的宽度设成一样，这样”a“的宽度就是固定的了，而”li“左右两边因为有margin，所以会缩小。www.zhishiwu.com

（免责声明：文章内容如涉及作品内容、版权和其它问题，请及时与我们联系，我们将在第一时间删除内容，文章内容仅供参考）