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

html-css022

用纯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"。

设置每个table的样式,比如class=tab1,class=tab2,然后在样式表设置

.tab1 td{这里为tab1的样式}

.tab2 td{这里为tab2的样式}

而不用一个个去设置td class="xx"了 毕竟比较麻烦。

如下代码:

<table >

<td class="style1" >内容</td >

</table >

<table >

<td class="style2" >内容</td >

</table >

在CSS中定义:

.style1 {

}

.style2 (

}

或者是给TD加上class,相同样式用的相同Class,不同样式用的不同Class