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