您当前的位置: 站长圈 > 网页前端

div+css圆角框之三——3图片自适应宽度

来源:站长圈|0 作者:adminzzq 点击: 0
    今天我们用3张图片来制作一个自适应宽度的导航条,用到的图片有:

nav_l.gif

nav_r.gif

nav_c.gif

    这次我们仍然用嵌套的方式来编写html代码,如:

    可以看出,在一个类名叫做nav_l的盒子里套着一个nav_r的盒子,nav_r的盒子里又套着一个nav_c的盒子,它们是一级级嵌套的关系。
    然后我们把nav_l.gif这张左边圆角的图片作为背景图片放在nav_l盒子里,左对齐不重复。把nav_r.gif这张右边圆角的图片作为背景图片放在nav_r盒子里,右对齐不重复。接着把nav_c.gif这张中间图片作为背景图片放在nav_c盒子里,横向重复。
    然后我们悲哀的发现,我们预期的圆角框效果没有出现,如下图:

    只是为神马尼?现在我就来piapia滴分析一下原因:因为是嵌套关系,所以最里面的盒子(也就是nav_c这个横向重复背景的盒子)的背景图片把其它两个盒子的背景给挡住了,因为它在三维空间的深度是在最上面的。
    知道了原因,解决办法就来了:把左边圆角背景的盒子设置一个左padding,宽度值不小于圆角宽度,也不能大于图片宽度,如padding-left:8px,这样就能把图片的圆角部分空出来,不被遮挡;。同理,右边盒子也是如此方法。
    完整css代码如下:
 
    下面来看看最终效果吧:
  
  这里为了自适应宽度,给最外面的盒子nav_l设置了左浮动float:left; 。如果你想要一个普通的固定宽度又居中的导航条,只要改为width:960px;margin:0 auto;就可以了