同样的方式将应用到被称为“当前”的标签中。一旦我们完成了这四幅图像（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>

现实中，#header div可能同样包含logo和搜索框。对于我们的例子，我们要缩短每一个锚链中超链接的值。显然，这些值应该正确的包含文件或者目录的位置。

我们从定位#header容器开始设计列表。这样确保了这个容器确确实实的充当了容器的作用，以包容它内部浮动的列表项。既然元素是浮动的，我们同样需要声明它的宽度为100%。加入临时的黄色背景以确保父类容器完全填满标签后面的整个区域。同样，设定默认的文本属性，确保样式的统一：

#header {
    float:left;
    width:100%;
    background:yellow;
    font-size:93%;
    line-height:normal;
    }

现在，我们同样需要为无序列表设定默认的margin/padding值为0，并去掉列表项前面的标记。每个列表项左浮动：

#header ul {
    margin:0;
    padding:0;
    list-style:none;
    }
#header li {
    float:left;
    margin:0;
    padding:0;
    }

设定锚链强制作为块对象呈递，我们便可无忧的控制所有的样式：

#header a {
    display:block;
    }

下一步，我们将右侧的背景图像加入到列表项中去（改变如粗体所示）：

#header li {
    float:left;
    background:url("norm_right.gif")
      no-repeat right top;
    margin:0;
    padding:0;
    }

在加入左侧图像之前，我们可以在效果1种看看目前为止的效果。（在效果中，忽略body中的规则。仅设定基本margin,padding,colors,text的属性。）

---

现在我们可以将左侧图像放置在锚链的左边（容器内的元素）。我们同时加入padding，扩大标签并将文本从标签的边缘推开：

#header a {
    display:block;
    background:url("norm_left.gif")
      no-repeat left top;
    padding:5px 15px;
    }

这样我们就得到了效果2。注意我们的标签是如何成型的。在这里，ie5/mac的用户会立刻惊奇道，“天啊，我的标签垂直堆在一起并且延伸至整个屏幕！”不要着急，我们马上帮你解决。眼下，尽量按照下面去做，或者方便的话，临时改换其他的浏览器，并且ie5/mac版本的问题会马上得到解决。