CSS制作标签卡TAB效果
amazon.com这种方式得导航引起了相当多人的效仿。那么，它是如何做到的呢？有过网页设计经验的人应该不难明白，如果不知道细节的话，通过察看源代码就能知道，它实际上是通过在表格中插入事先制作好的作为标签卡的图片来制作的，标签卡的效果通过颜色来控制，比如上图中的“YOUR STORE”这张图片和底下子栏目的颜色一致，背景都为深蓝色，这样看上就向一张卡片了。
不过，现在网页设计的趋势是XHTML+CSS来完成。那么，如果不用图片加表格的方法，有没有办法仅仅利用CSS来制作呢？有的，可以通过项目列表的CSS设定来做到。
这张图，就是利用这种方法来制作的。
下面，我们就分别来学习CSS的标签卡制作。
利用列表元素制作标签卡
通常情况下，项目列表的排列方式是垂直的，并在前头带有特定的项目符号，如下：
项目列表一
项目列表二
项目列表三
项目列表四
它所对应的HTML代码是这个样子：
ul
li项目列表一/li
li项目列表二/li
li项目列表三/li
li项目列表四/li
/ul [ 查看全文 ]
2016-02-19
标签:
