CSS实例(七)：工具条效果

最新推荐文章于 2024-03-18 18:57:20 发布

最新推荐文章于 2024-03-18 18:57:20 发布 · 452 阅读

文章标签：

图片素材：

　　网页代码：

Html代码

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=GB2312"/>
<title></title>
<styletype="text/css">
html,body{
font-size:12px;
}
.dataBara,.dataBarspan,.dataBardiv{
display:block;
height:16px;
line-height:16px;
vertical-align:middle;
float:left;
}
.dataBardiv{
float:left;
padding:00.5em;
}
.dataBara{
color:red;
text-decoration:none;
padding-left:3px;
}
.dataBara:hover,.dataBara#currentData{
color:white;
}
.dataBarspan{
cursor:hand;
padding-right:3px;
}
.dataBara:hover,.dataBara:hoverspan,.dataBara#currentData,.dataBara#currentDataspan{
background:url(tab.gif)00;
}
.dataBara:hoverspan,.dataBara#currentDataspan{
background-position:100%100%;
}
</style>
<scripttype="text/javascript">
functionitemClick(a){
varid="currentData";
if(a.id==id){
returntrue;
}
else{
document.getElementById(id).id="";
a.id=id;
}
returntrue;
}
</script>
</head>
<bodystyle="background-color:#ccc">
<divclass="dataBar"style="height:16px;">
<ahref="#"id="currentData"onclick="itemClick(this)"><span>最新动态</span></a>
<div>|</div>
<ahref="#"onclick="itemClick(this)"><span>高清</span></a>
<div>|</div>
<ahref="#"onclick="itemClick(this)"><span>美剧</span></a>
<div>|</div>
<ahref="#"onclick="itemClick(this)"><span>动漫</span></a>
</div>
</body>
</html>

　　效果，编辑调试环境IE7：