CSS制作标签卡Tab效果

亚马逊网站应该不会陌生吧？对它页面上方标签卡（Tab）方式的导航条（如下图）还有印象么？



amazon.com这种方式得导航引起了相当多人的效仿。那么，它是如何做到的呢？有过网页设计经验的人应该不难明白，如果不知道细节的话，通过察看源代码就能知道，它实际上是通过在表格中插入事先制作好的作为标签卡的图片来制作的，标签卡的效果通过颜色来控制，比如上图中的“YOUR STORE”这张图片和底下子栏目的颜色一致，背景都为深蓝色，这样看上就向一张卡片了。

不过，现在网页设计的趋势是XHTML+CSS来完成。那么，如果不用图片加表格的方法，有没有办法仅仅利用CSS来制作呢？有的，可以通过项目列表的CSS设定来做到。



这张图，就是利用这种方法来制作的。

下面，我们就分别来学习CSS的标签卡制作。

利用列表元素制作标签卡

通常情况下，项目列表的排列方式是垂直的，并在前头带有特定的项目符号，如下：

• 项目列表一
• 项目列表二
• 项目列表三
• 项目列表四

它所对应的HTML代码是这个样子：

<ul>
<li>项目列表一</li>
<li>项目列表二</li>
<li>项目列表三</li>
<li>项目列表四</li>
</ul>
　

那是否你曾想到过，项目列表也可以不垂直排列，而是水平分布呢？在Html中无论如何是做不到这点的。可是CSS却提供了这种方法。

首先，我们把项目列表放入到div标记中，如下：

<div id="horizonlist">

<ul>
<li>项目列表一</li>
<li>项目列表二</li>
<li>项目列表三</li>
<li>项目列表四</li>
</ul>

</div>

然后，我们为这个id为horizonlist的Div设定如下样式：

#horizonlist {//*设定div的Box属性*//

border: 1px solid #000;

margin: 2em;

width: 80%;

padding: 5px;

font-family: Verdana, sans-serif;

}



#horizonlist ul, #horizonlist li {//*设定限制于horizonlist的div内的ul和li的属性*//

display: inline;

margin: 0;

padding: 0;

color: #339;

font-weight: bold;

}

此样式作用于所给项目列表的结果如下：

• 项目列表一
• 项目列表二
• 项目列表三
• 项目列表四

可以看到，此时的项目列表成了水平放置，而且列表前的符号自动消失。之所以这样，关键在于属性display的设置值inline的作用。display用来改变元素的显示值，可以将元素类型线上，块和清单项目相互变换，其中取值inline的作用是“删除元素前后的分行符，使其并入其它元素流中”。在这里，inline取消了每个列表项目后的换行，而成为一行显示。

顺着这个思路下去，如果我们给每个列表项目设定Box属性，那不就有了类似标签卡的效果出来了么：

• 项目列表一
• 项目列表二
• 项目列表三
• 项目列表四

我们来看看这个例子的代码：

<div id="tabdemo">
<ul>
<li>项目列表一</li>
<li>项目列表二</li>
<li class="selected">项目列表三</li>
<li>项目列表四</li>
</ul>
</div>

和上面的例子不同，这里的项目列表三多了类名“selected”，用来表示当前被选中的标签卡。

相应的CSS属性设定如下：

#tabdemo ul li {
margin-left: 0;
margin-bottom: 0;
padding: 2px 15px 5px;
border: 1px solid #000;
list-style: none;//*不显示列表符号*//
display: inline;//*取消项目之间的分行*//
background-color: #ffc;
}

#tabdemo ul li.selected {//*设定被选中的列表的效果*//
border-bottom: 1px solid #fff;
background-color: #fff;
list-style: none;
display: inline;
}

如果你希望每个标签卡之间有一定的距离，可以修改#tabdemo ul li此设定中的margin-left属性值，比如改为2，就可以看到类似早先给出的那张蓝色标签卡的样子。

接下来我们来进一步修饰上面这个标签卡，先来看效果果。

• 标签卡一
• 标签卡二
• 标签卡三
• 标签卡四

可以看到，每个标签卡之间不再紧贴一起，底下出现了一条连续的横线，当鼠标移动到每个标签卡的时候，出现了浮动的效果。

一起来分析一下代码：

<div id="container">

<ul id="beautytab">
<li><a href="#" class="selectedtab">标签卡一</a></li>
<li><a href="#">标签卡二</a></li>
<li><a href="#">标签卡三</a></li>
<li><a href="#">标签卡四</a></li>
</ul>

</div>

这个标签卡放在id为container的块div中。列表的id为beautytab，其中的列表项目标签卡一设定了一个类“selectedtab”，表示当前被选的标签卡类。

对应的CSS设定如下：

#container
{//*设定包含列表的div的Box属性*//
width: 500px;
padding: 30px;
border: 1px solid #ccc;
background: #fff;
}

#beautytab
{//*设定项目列表Ul元素的属性，其中background用来设定连贯于各个列表项目下的横线，否则它们会彼此分离，用了一张事先准备好的图片，让它放置在底部，水平重复*//
height: 20px;
margin: 0;
padding-left: 10px;
background: url('http://webdesign.chinaitlab.com/UploadFiles_8014/200604/20060417094503312.gif?http://www.xvna.com') repeat-x bottom;
}

#beautytab li
{//*设定各个列表项目的属性，display属性设定取消项目间的分行，list-style-type设定取消列表项目前的符号*//
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#beautytab a:link, #beautytab a:visited
{//*设定标签卡中超链接的文字的属性*//
float: left;
background: #f3f3f3;
font-size: 12px;
line-height: 14px;
font-weight: bold;
padding: 2px 10px 2px 10px;
margin-right: 4px;
border: 1px solid #ccc;
text-decoration: none;
color: #666;
}

#beautytab a:link.selectedtab, #beautytab a:visited.selectedtab
{//*设定当前被选中的标签卡中超链接的属性*//
border-bottom: 1px solid #fff;
background: #fff;
color: #000;
}

#beautytab a:hover
{//*设定超链接鼠标浮动效果*//
background: #fff;
}
　

如果手头上有漂亮的修饰图片，我们还可以进一步制作出类似下图的漂亮雅致的标签卡来。



至于如何制作，用兴趣的人可以自己动手做做看。