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;
}