CSS制作标签卡Tab效果亚马逊网站应该不会陌生吧？对它页面上方标签卡（Tab）方式的导航条（如下图）还有印象么？ amazon.com这种方式得导航引起了相当多人的效仿。那么，它是怎么样做到的呢？有过网页设计经验的人应该不难明白，如果不知道细节的话，通过察看源代码就能知道，它实际上是通过在表格中插入事先制作好的作为标签卡的图片来制作的，标签卡的效果通过颜色来控制，比如上图中的“YOUR STORE”这张图片和底下子栏目的颜色一致，背景都为深蓝色，这样看上就向一张卡片了。 不过，现在网页设计的趋势是XHTML+CSS来完成。那么，如果不用图片加表格的方法，有没有办法仅仅利用CSS来制作呢？有的，可以通过项目列表的CSS设定来做到。 这张图，就是利用这种方法来制作的。 下面，我们就分别来学习CSS的标签卡制作。 利用列表元素制作标签卡通常情况下，项目列表的排列方式是垂直的，并在前头带有特定的项目符号，如下：
它所对应的HTML代码是这个样子： <ul> 那是否你曾想到过，项目列表也可以不垂直排列，而是水平分布呢？在Html中无论怎么样是做不到这点的。可是CSS却提供了这种方法。 首先，我们把项目列表放入到div标记中，如下： <div id="horizonlist"> <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"> 和上面的例子不同，这里的项目列表三多了类名“selected”，用来表示当前被选中的标签卡。 相应的CSS属性设定如下： #tabdemo ul li { 如果你希望每个标签卡之间有一定的距离，可以修改#tabdemo ul li此设定中的margin-left属性值，比如改为2，就可以看到类似早先给出的那张蓝色标签卡的样子。 接下来我们来进一步修饰上面这个标签卡，先来看效果果。
可以看到，每个标签卡之间不再紧贴一起，底下出现了一条连续的横线，当鼠标移动到每个标签卡的时候，出现了浮动的效果。 一起来分析一下代码： <div id="container"> 这个标签卡放在id为container的块div中。列表的id为beautytab，其中的列表项目标签卡一设定了一个类“selectedtab”，表示当前被选的标签卡类。 对应的CSS设定如下： #container 上一篇： 柱状统计图表的CSS实现 下一篇： 用CSS样式表缩写给你的网站加速 更多相关文章
|
推荐文章
精彩文章
· CSS小技巧
|
