在这个模型中,一个图像掩盖住另一个图片的一部分。假设我们放置一些独特的内容在每个图像的周围，例如标签的圆角，我们并不希望上面一副图像完全的遮蔽住下面一副。为了防止这种情况的发生，我们可以将上面一副图像（此例中的左边那幅）控制的尽可能的窄。但仍然要保证一定的宽度来显现标签一侧的独特性。如果外部是圆角，我们就应该控制上面一副图像和它的弧线部分具有一样的宽度。

　　 www.goodsgy.com

　　如果目标在大小上增长，并超过了以上所显示的宽度，归咎于文本大小及字体的改变，图像会被拉开，产生不美观的间隙。我们需要判断的是，预测这种可扩展的量将有多大。如果在浏览器中改变字体的大小，目标又会如果增长呢？实际来说，我们至少应该估算到字体大小增长至300%的情况。背景图像也得适应这种增长。对于以上的例子，我们将下面（即右边）的图像设为400*150像素，上面的设为9*150像素。

　　在头脑中，始终要有这样的认识：背景图像只是显示一个可供内容填充的有效空间（即内容区域和padding，称为doorway）。这两幅图像始终和各自外部的边角相锚定。背景图像的可见部分和在一起即形成了一个具有这种标签形状的空间（doorway）：

　　 www.goodsgy.com

　　如果标签被撑大，图像即滑开，doorway变宽，图像的也将被显露的更多：

　　 www.goodsgy.com

　　此例中，我在photoshop中制作两个平滑，细的3D标签图像，如文章开头所显示的那样。对于其一，内部明亮，边框暗淡些，用来表现当前选中的标签。将这种技巧模型应用于左右两幅图像中，我们需要扩大标签图像覆盖的区域，将它裁剪成两部分：

　　 www.goodsgy.com

　　同样的方式将应用到被称为“当前”的标签中。一旦我们完成了这四幅图像（1, 2, 3, 4），我们就可以开始用标记和CSS来制作我们的标签了。
标签的创造

　　当你在研究用CSS来创造水平列表时，会发现至少有两种方法将列表项安排在同一行里。两种方法各有千秋，但都需要CSS来解决布局所带来的混乱。一种方法使用inline box，另一种则用floats。

　　方法一，可能是比较普遍的一种，是将列表项都inline显示。inline方法的魅力在于它的简易性。但是，对于我们即将谈到的滑动门技术来说，inline方法在特定的浏览器上存在一些解释上问题。方法二，是我们将要关注的，即用floats将列表项安排在同一行里。令人沮丧的是，floats表面上矛盾的行为正巧回避了自然的逻辑。尽管如此，对于解决多重浮动元素的基本认识，以及可靠浮动的意义，仍是值得讨论的。

　　我们将用另一种浮动元素来解决浮动元素的排列问题。这样，父类元素将子类元素完全包括起来。于是，我们就可以为标签加上背景色彩和背景图像。非常重要的一点必须记住，紧跟在标签后的文本元素用CSS中的clear功能来清除浮动对象。这样避免了浮动标签影响页面上其它元素的位置。

　　我们从以下的标记开始：

　　＜div id="header"＞

　　 ＜ul＞

　　 ＜li＞＜a href="#"＞Home＜/a＞＜/li＞

　　 ＜li id="current"＞＜a href="#"＞News＜/a＞＜/li＞

　　 ＜li＞＜a href="#"＞Products＜/a＞＜/li＞

　　 ＜li＞＜a href="#"＞About＜/a＞＜/li＞

　　 ＜li＞＜a href="#"＞Contact＜/a＞＜/li＞

　　 ＜/ul＞

　　＜/div＞ www.goodsgy.com

[1] [2] [3] [4]  下一页