亚马逊网站应该不会陌生吧？对它页面上方标签卡（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;
}
此样式作用于所给项目列表的结果如下：
- 项目列表一
- 项目列表二
- 项目列表三
- 项目列表四
|
上一篇：柱状统计图表的CSS实现 下一篇：用CSS样式表缩写给你的网站加速 |
