标签滑动门技术
因为最近比较忙，所以好久没有上来写文章了。最近有很多朋友问我，能否让标签的背景图片自适应文字的宽度。答案是肯定的，这涉及一个滑动门技术，下面我会以实例向各位朋友介绍这种技术。
目前比较流行的就是两边是圆角，中间是文字的标签。如图：
要做成这种效果的标签需要一张两边是圆角的背景图片，而背景图片是不会自适应文字而放大或缩小的，所以我们要把图片剪切为两部分。一部分稍长些，用作放文字对象的背景图片。如图：
图片尽量做的宽些，以适应更长的文字。
一部分用作结束对象的图片。如图：
下面请看一个实例：
XHTML中的代码如下：
<div class="all">
<ul><li><span><a href="#" id="tagN">请在下面输入文字修改</a></span></li></ul>
</div>
一、<li>
这里用“li”来做标签项，在CSS中的代码为：
li {
float:left;
padding-left:15px;
background:url(/images/article/group_li_this_bg.gif) no-repeat top left;
}
将较长的左侧带有圆角的图片设置为“li”标签的背景图片，并设置内容距离左边框为15px。这样无论有无文字，始终保持左边显示15px的背景图。
二、<span>
这里用“span”放文字，CSS代码为：
li span {
display:block;
float:left;
height:26px;
line-height:26px;
padding-right:15px;
color:#FFF;
font-weight:bold;
background:url(/images/article/group_li_this_a_bg.gif) no-repeat top right;
}
1、将较短的右侧带有圆角的图片设置为“span”的背景图片，并使其居右显示。设置内容距离右边框为15px，使无论有无文字，始终保持右边可以看到15px的背景图。
2、必须设置“span”的高度，如果不设置的话背景图片将无法完全显示。高度视图片的高度而定。因为“span”为内联对象，无法直接设置高度，所以要用“display:block;”强制将其转换为块级对象。
3、“line-height:26px;”：当“line-height”的值同高度一致时，使单行文字垂直居中于对象。请参见《使文字垂直居中》
到这里，标签滑动门基本设置已经完成了，如果有多个标签，可以以同样的方法添加到“ul”中。
下一篇中我将向大家介绍多个标签的切换，请大家继续关注我的文章。
Posted by: 郁闷
