CSS范例(七)：工具条效果
日期：2014-05-17 浏览次数：20744 次
CSS实例(七)：工具条效果
图片素材：
网页代码：
效果，编辑调试环境IE7：
这个示例没有仔细测试过，不知有没有什么问题。
图片素材：
网页代码：
<!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></title>
<style type="text/css">
html,body{
font-size:12px;
}
.dataBar a,.dataBar span,.dataBar div{
display:block;
height:16px;
line-height:16px;
vertical-align:middle;
float:left;
}
.dataBar div{
float:left;
padding:0 0.5em;
}
.dataBar a{
color:red;
text-decoration:none;
padding-left:3px;
}
.dataBar a:hover,.dataBar a#currentData{
color:white;
}
.dataBar span{
cursor:hand;
padding-right:3px;
}
.dataBar a:hover,.dataBar a:hover span,.dataBar a#currentData,.dataBar a#currentData span{
background:url(tab.gif) 0 0;
}
.dataBar a:hover span,.dataBar a#currentData span{
background-position:100% 100%;
}
</style>
<script type="text/javascript">
function itemClick(a){
var id = "currentData";
if(a.id==id){
return true ;
}
else{
document.getElementById(id).id="";
a.id=id;
}
return true;
}
</script>
</head>
<body style="background-color:#ccc">
<!--http://wallimn.iteye.com-->
<div class="dataBar" style="height:16px;">
<a href="#" id="currentData" onclick="itemClick(this)"><span>最新动态</span></a>
<div>|</div>
<a href="#" onclick="itemClick(this)"><span>高清</span></a>
<div>|</div>
<a href="#" onclick="itemClick(this)"><span>美剧</span></a>
<div>|</div>
<a href="#" onclick="itemClick(this)"><span>动漫</span></a>
</div>
</body>
</html>
效果，编辑调试环境IE7：
这个示例没有仔细测试过，不知有没有什么问题。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
