CSS制作标签卡Tab效果

2024-02-26 分类：网站建设

有过网页设计经验的人应该不难明白，如果不知道细节的话，通过察看源代码就能知道，它实际上是通过在表格中插入事先制作好的作为标签卡的图片来制作的，标签卡的效果通过颜色来控制，比如上图中的“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制作标签卡Tab效果
标题网址：https://www.cdcxhl.com/news16/318966.html

成都网站建设公司_创新互联，为您提供外贸网站建设、品牌网站建设、用户体验、软件开发、微信公众号、全网营销推广

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容