IE6下的按钮效果

  这张图片是3个tab页的按钮,每个按钮都可以根据字的长度来调节按钮的长度,例如“服务台”和“运维”宽度就不一样。下面是IE6下的显示效果。下面具体说是怎么实现的。

  1.“个人工作区”的按钮

    两个div嵌套,外层div的背景图片为上述按钮的左边有圆角的一个小截图,no-repeat,截图截得精确一点,不够的地方用和按钮相同的颜色代替,里层div背景图片用按钮右边的小截图 ,文字写在里层div里面即可。

  <div class="left"><div class="right">个人工作区</div></div>

  .left{

    background:url('css/images/left.png') top left no-repeat #D6EEFF)

   }

  .right{

    background:url('css/images/right.png') top right no-repeat);

  }

  2."服务台"按钮

  3个嵌套的div,会有三张图片,左边一张截图,中间一张,右边一张,注意截图截得精准一点。左右两张no-repeat,中间repeat-x.

  <div class="middle"><div class="left"><div class="right">服务台</div></div></div>

  .nav li .div_middle{
      height:38px;
      background:url("images/middle_.png") top left repeat-x;
  }
  .nav li .div_left{
      height:38px;
      background:url("images/left_.png") top left no-repeat;
  }
  .nav li .div_right{
      height:38px;
      background:url("images/right_.png") top right no-repeat; 
  }

  

原文地址:https://www.cnblogs.com/redangel/p/2935555.html