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

html-css014

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

这个是按层级关系写的CSS。

它的意思是,在一个id属性为tabdemo 的标签里面,有<ul><li></li></ul>这两标签,如果这些<li>里,有class="selected "的话,那么,这个标签的样式就是你的{}里面的样式。

不知道说明白没有。