在css导航的制作中，出现个问题，以前做的导航都是左右对称的，只要利用margin:0 auto;就可以实现居中。但这次的图片模板中导航的左边宽，右边窄，如果都当成背景来布局，一眼会感觉这个导航没有在中间。

为了让其视觉上logo和导航菜单所在的白色区域居中，就要用相对定位和绝对定位了。

left-side.pngright-side.png

Html的代码如下：

     
         
      
         
      
                。。。。。。
     
     

 

Css代码如下：

#msg{
       float:left;    width:100%;    height:130px;    margin-left:-18px;/*相对于原来的位置改变*/    position:relative;    background-color:#fff;}.left-side{
       position:absolute;/*相对于父级改变，在此父级为msg*/    left:-90px;    background-image:url(images/left-side.png);    background-repeat:no-repeat;    width:90px;    height:130px;}.right-side{
       position:absolute;    right:-70px;    background-image:url(images/right-side.png);    background-repeat:no-repeat;    width:70px;    height:130px;}