用纯CSS如何制作流行的TAB菜单？

html-css024

用纯CSS如何制作流行的TAB菜单？,第1张

Tab菜单比较简单的方法是直接使用dreamweaver cs3的spry制作,其他方法制作难度比较大，不管哪种方法，必须要使用javascript调用。

<ul class="tabs">

<li>

<input type="radio" name="tabs" id="tab1" checked />

<label for="tab1">选项卡 1</label>

<div id="tab-content1" class="tab-content">

<p>选项卡内容 1</p>

</div>

</li>

<li>

<input type="radio" name="tabs" id="tab2" />

<label for="tab2">选项卡 2</label>

<div id="tab-content2" class="tab-content">

<p>选项卡内容 2</p>

</div>

</li>

</ul>

tab 是在css当中一个自定义的类。通常定义在网页的<style></style>之间。比如：

<head>

<style type="text/css">

.tab { font-size:12ptcolor:#00ff00}

</style>

这个前面带有 . 的 tab 就是一个css 类。引用的时候就得这样：

<div class="tab">这里面的内容就会应用 .tab 类</div>。当然也可以

<span class="tab">这也是一样的效果。</span>

就是任何的标签都可以引用这个 .tab 类。

如果定义不在本网页中的话，那就是使用了外部链接。就是说有一个外部的css文件。那样在使用的时候就这样：<link rel="stylesheet" type="text/css" href="abc.css">(放在<head></head>之间）。引用的时候还是用class="tab"。