标签滑动门技术

返回首页
创建时间：二月 4th, 2008 Traffic(856)

因为最近比较忙，所以好久没有上来写文章了。最近有很多朋友问我，能否让标签的背景图片自适应文字的宽度。答案是肯定的，这涉及一个滑动门技术，下面我会以实例向各位朋友介绍这种技术。

目前比较流行的就是两边是圆角，中间是文字的标签。如图：

要做成这种效果的标签需要一张两边是圆角的背景图片，而背景图片是不会自适应文字而放大或缩小的，所以我们要把图片剪切为两部分。一部分稍长些，用作放文字对象的背景图片。如图：

图片尽量做的宽些，以适应更长的文字。

一部分用作结束对象的图片。如图：

下面请看一个实例：

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: 郁闷
相关话题：

Comments(0)

暂无留言。
User Name:
（必添）
User Email:
（必添）
User URL:
Comment:
（必添）