标签控件应用示例二

作者：chilleen 来源：ITPOW（原创）日期：2007-2-9

这个是使用图片制作的标签效果。

首先，制作两张图片，一张命名为：normalTitle.gif，一张命名为：activeTitle.gif，如下：

normalTitle activeTitle

然后，为 title 写样式表：
.normalTitle
{
    background-position:center top;
    background-repeat:no-repeat;
    background-image:url("http://www.itpow.com/c/2007/02/FZBSG578D74F1NNN/normalTitle.gif");
}

.activeTitle
{
    background-position:center top;
    background-repeat:no-repeat;
    background-image:url(http://www.itpow.com/c/2007/02/FZBSG578D74F1NNN/activeTitle.gif);
}

最后，对样式表的其它地方作些调整，比如边框、宽度等。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ITPOW控件－标签控件</title>
<style type="text/css">
body,
a:link,
a:visited,
a:hover
{
    font-size:13px;
    line-height:150%;
}
/*========================================*/
.block
{
    width:320px;
}
/*========================================*/
.titles
{
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    list-style-type:none;
}

.titles li
{
    float:left;
    width:25%;
    line-height:150%;
    text-align:center;
    cursor:default;
}
/*========================================*/
.normalTitle
{
    background-position:center top;
    background-repeat:no-repeat;
    background-image:url("http://www.itpow.com/c/2007/02/FZBSG578D74F1NNN/normalTitle.gif");
}

.activeTitle
{
    background-position:center top;
    background-repeat:no-repeat;
    background-image:url("http://www.itpow.com/c/2007/02/FZBSG578D74F1NNN/activeTitle.gif"); 
}

/*========================================*/
.content
{
    display:none;
    clear:both;
    border-right:1px solid #000000;
    border-bottom:1px solid #000000;
    border-left:1px solid #000000;
    background-color:#99FF99;
}

.content ul
{
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 20px;
}
</style>  
</head>
<body>

<p>如果没有效果或报错，您可能需要刷新本页面。</p>

<div class="block">
<ul class="titles">
  <li class="normalTitle" id="t1"><div>ASP</div></li>
  <li class="normalTitle" id="t2"><div>JavaScript</div></li>
  <li class="normalTitle" id="t3"><div>XHTML+CSS</div></li>
  <li class="normalTitle" id="t4"><div>SQL Server</div></li>
</ul>
<div class="content" id="c1"><ul><li><a href="http://www.itpow.com/c/2006/12/R642K00FOGR6QSNB.asp" target="_blank">如何利用 object 标签创建服务器组件</a></li><li><a href="http://www.itpow.com/c/2006/12/FHDUNK2DSCA568ZE.asp" target="_blank">显示数据库中的表</a></li><li><a href="http://www.itpow.com/c/2006/12/QQWDQCR5VTNPQ064.asp" target="_blank">用 JS 显示公共内容？</a></li><li><a href="http://www.itpow.com/c/2006/12/3GC9M7IT3GURIPWD.asp" target="_blank">charcode 取值</a></li><li><a href="http://www.itpow.com/c/2006/12/6RFP1TJUJLGL26SQ.asp" target="_blank">IIS 上建立多站点</a></li><li><a href="http://www.itpow.com/c/2006/11/HVIOJQ3QBWFG6KZB.asp" target="_blank">如何连接有数据库密码的 Access</a></li></ul></div>
<div class="content" id="c2"><ul><li><a href="http://www.itpow.com/c/2006/12/WOYNSH75QM4NPFRS.asp" target="_blank">scrollTop scrollLeft scrollWidth scrollHeight</a></li><li><a href="http://www.itpow.com/c/2006/12/0DU87TLSHFMGIMMY.asp" target="_blank">offsetTop 与 style.top 的区别</a></li><li><a href="http://www.itpow.com/c/2006/12/PCTKER6T0V62S854.asp" target="_blank">offsetTop offsetLeft offsetWidth offsetHeight</a></li><li><a href="http://www.itpow.com/c/2006/12/4G79XCX3L2V9BDSB.asp" target="_blank">optgroup</a></li><li><a href="http://www.itpow.com/c/2006/12/TWGPVGOI4XVG4X5V.asp" target="_blank">FlyAds 网友订制版本</a></li><li><a href="http://www.itpow.com/c/2006/12/ENKADABBQ538IJZM.asp" target="_blank">body.onload 的位置</a></li></ul></div>
<div class="content" id="c3"><ul><li><a href="http://www.itpow.com/c/2006/12/01T8G62S9RMC4WC7.asp" target="_blank">如何为 a 的 class 写样式</a></li><li><a href="http://www.itpow.com/c/2006/12/8QRIDC2BUBXIB50R.asp" target="_blank">dl、dt、dd 标签的使用</a></li><li><a href="http://www.itpow.com/c/2006/11/7YFAJ81G7ZT6C1HX.asp" target="_blank">DOCTYPE 使 IE 支持 W3C 标准？</a></li><li><a href="http://www.itpow.com/c/2006/11/FETZYL4LRF7TV1QI.asp" target="_blank">样式表注意大小写</a></li><li><a href="http://www.itpow.com/c/2006/11/43F681ZJDC50897M.asp" target="_blank">span 套 div 错误</a></li><li><a href="http://www.itpow.com/c/2006/11/W45JNEXGBF8RVH52.asp" target="_blank">用百分比表示字体大小</a></li></ul></div>
<div class="content" id="c4"><ul><li><a href="http://www.itpow.com/c/2006/12/Q0FRNASGI7WX5GO3.asp" target="_blank">在视图上创建触发器</a></li><li><a href="http://www.itpow.com/c/2006/12/B4GPUUP01YGQ47IE.asp" target="_blank">如何在视图上创建索引</a></li><li><a href="http://www.itpow.com/c/2006/12/TBQ87P80C80Y0ZUF.asp" target="_blank">忽略重复键</a></li><li><a href="http://www.itpow.com/c/2006/12/9M4AFUD0YJV2LMY2.asp" target="_blank">重复记录－题外</a></li><li><a href="http://www.itpow.com/c/2006/12/LG1450RXYDTSNRFQ.asp" target="_blank">重复记录－避免</a></li><li><a href="http://www.itpow.com/c/2006/12/7N88QNXEMWIWOHT1.asp" target="_blank">重复记录－删除</a></li></ul></div>
</div>
<script language="javascript" type="text/javascript" src="http://www.itpow.com/products/webComponents/TabCtrl/CTabCtrl.js"></script>
<script language="javascript" type="text/javascript">
<!--
//ITPOW www.itpow.com

var tab = new CTabCtrl("tab", "normalTitle", "activeTitle");
tab.BindItem("t1", "c1");
tab.BindItem("t2", "c2");
tab.BindItem("t3", "c3");
tab.BindItem("t4", "c4");
tab.ActivateItem(0);
-->
</script>
</body>
</html>

[Ctrl+A 全部选择提示：您可先修改部分代码，再按运行]