选项卡动态效果很好，而且节省网站页面空间，前面介绍过一个简单的js+css的选项卡，下面的这个选项卡是纯css和html标签控制的，也很简单，但不如js控制得完美，不过效果也还不错。

css代码

dl {
position:absolute;
width:270px;
height:170px;
border:10px solid #eee;
}
dd {
margin:0;
width:270px;
height:170px;
overflow:hidden;
}
dt {
position:absolute;
right:1px;
}
ul {
margin:0;
padding:0;
width:260px;
height:170px;
list-style:none;
background:url(“red.gif”) no-repeat 75% 1%;/*百分数表示背景的水平位置和垂直位置*/
}
#b {
background-position:75% 51%/*同上*/
}
#c {
background-position:75% 100%/*同上*/
}
dt a {
display:block;
margin:1px;
width:70px;
height:56px;
text-align:center;
font:18px/56px sans-serif;/*设置两个数值是为了让字体垂直居中*/
color:#fff;
background:#666;
}
dt a:hover {
background:orange
}

前面说了，它不太完美，就是因为不能很好地区分当前选项卡，所以加了一个红色条(图片)跟随选项卡;

html代码

<dl>
<dt><a href=”#a”>CSS</a><a href=”#b”>HTML</a><a href=”#c”>JS</a></dt>
<dd>
<ul id=”a”>什么是css</ul>
<ul id=”b”>html,xhtml,dhtml</ul>
<ul id=”c”>javascript</ul>
</dd>
</dl>

之所以能实现选项卡，就是因为上面的abc分别链接到下面的id选择器；

实际效果：css选项卡

p.s.耕堂gengtang.net

 右上方更多相关内容/站内搜索-关键词请用空格隔开