CSS制作标签卡TAB效果

日期：2007年6月7日作者：查看:[大字体中字体小字体]

　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取消了每个列表项目后的换行，而成为一行显示。
[1] [2] [3] 下一页
CSS制作标签卡TAB效果相关文章：
·CSS制作标签卡TAB效果
CSS制作标签卡TAB效果相关软件

上一篇:CSS自定义属性Expression

下一篇:CSS应用小技巧十四例

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

CSS制作标签卡TAB效果

精品推荐

热点TOP10

特别推荐