用选项卡布局成的网站首页_层和布局特效

用选项卡布局成的网站首页，你可以在这个大选项卡中布局一些背景图片，这样它就更漂亮了，用这种效果制作出首页，其实还是蛮不错的，挺个性。

<html>
<head>
<title>选项卡布局网站首页</title>
<style type="text/css"> 

</style>
<script> 
function bluring(){ 
if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG") document.body.focus(); 
} 
document.onfocusin=bluring; 
</script>
<script language="javascript"> 
function switchTag(tag,mrc)
{
  for(i=1; i <3; i++)
  {
    if ("tag"+i==tag)
    {
      document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i;
      document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan"+i;
    }else{
      document.getElementById("tag"+i).getElementsByTagName("a")[0].className="";
      document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="";
    }
    if ("mrc"+i==mrc)
    {
      document.getElementById(mrc).className="";
    }else{
      document.getElementById("mrc"+i).className="hidemrc";
    }
    document.getElementById("mrc").className=mrc;
  }
}
</script>
</head>
<body>
<div id="top"></div>
<div id="container">
  <div id="title">
    <ul>
      <li id="tag1"><a href="#" onclick="switchTag('tag1','mrc1');this.blur();" class="selectli1"><span>我的首页</span></a></li>
      <li id="tag2"><a href="#" onclick="switchTag('tag2','mrc2');this.blur();"><span>何许人也？</span></a></li>
      <li id="tag3"><a href="#" onclick="switchTag('tag3','mrc3');this.blur();"><span>苦涩北漂</span></a></li>
    </ul>
  </div>
  <div id="mrc" class="mrc1">
    <div id="mrc1">我喜欢说老实话，办老实事，做老实人......</div>
    <div id="mrc2" class="hidemrc">我来自银河系，30亿前撞击了地球，而后地球发生了变化，开始出现生命……</div>
    <div id="mrc3" class="hidemrc">我是传奇</div>
  </div>
</div>
<div id="bottom">marvellous &copy;版权所有2000-2006</div>
</body>
<html>

所属频道：层和布局特效/更新时间：2012-11-17

[收藏][报错][返回列表]

用选项卡布局成的网站首页_层和布局特效

层和布局特效Rss订阅特效代码搜索

层和布局特效推荐

猜你也喜欢看这些