合肥网站建设工作室

关注合肥工作室微信公众号,提供最新网站建设资讯

扫一扫微信二维码

滑动门效果代码!

2010-06-25 19:14:29建站知识 154

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<html xmlns="http://www.w3.org/1999/xhtml">xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<head>xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<title>简洁Tab</title>xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<style type="text/css">xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<!--xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
body,div,ul,li{xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 padding:0;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 text-align:center;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
body{xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 font:12px "宋体";xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 text-align:center;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
a:link{xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 color:#00F;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 text-decoration:none;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
a:visited {xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 color: #00F;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 text-decoration:none;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
a:hover {xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 color: #c00;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 text-decoration:underline;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
ul{ list-style:none;}xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
/*选项卡1*/xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
#Tab1{xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
width:960px;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
margin:0px;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
padding:0px;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
margin:0 auto;}xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
/*选项卡2*/xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
#Tab2{xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
width:576px;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
margin:0px;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
padding:0px;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
margin:0 auto;}xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
/*菜单class*/xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.Menubox {xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
width:100%;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
background: #FF0000;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
height:28px;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
line-height:28px;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.Menubox ul{xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
margin:0px;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
padding:0px;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.Menubox li{xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 float:left;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 display:block;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 cursor:pointer;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 width:114px;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 text-align:center;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 color:#949694;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 font-weight:bold;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 }xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.Menubox li.hover{xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 padding:0px;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 background:#fff;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 width:116px;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 border-left:1px solid #A8C29F;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 border-top:1px solid #A8C29F;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 border-right:1px solid #A8C29F;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
background: #990033;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 color:#739242;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 font-weight:bold;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 height:27px;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
line-height:27px;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.Contentbox{xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 clear:both;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 margin-top:0px;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 border:1px solid #A8C29F;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 border-top:none;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 height:181px;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 text-align:center;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 padding-top:8px;xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
-->xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</style>xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<script>xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<!--xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
/*第一种形式 第二种形式 更换显示样式*/xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
function setTab(name,cursel,n){xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 for(i=1;i<=n;i++){xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
  var menu=document.getElementById(name+i);xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
  var con=document.getElementById("con_"+name+"_"+i);xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
  menu.className=i==cursel?"hover":"";xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
  con.style.display=i==cursel?"block":"none";xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 }xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
//-->xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</script>xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</head>xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<body>xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<br><br>xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div id="Tab1">xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div class="Menubox">xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<ul>xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
   <li id="one1" onclick="setTab('one',1,8)"  class="hover">新闻1</li>xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
   <li id="one2" onclick="setTab('one',2,8)" >新闻2</li>xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
   <li id="one3" onclick="setTab('one',3,8)">新闻3</li>   xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
   <li id="one4" onclick="setTab('one',4,8)">新闻4</li>xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
   <li id="one5" onclick="setTab('one',5,8)">新闻5</li>xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
   <li id="one6" onclick="setTab('one',6,8)" >新闻6</li>xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
   <li id="one7" onclick="setTab('one',7,8)">新闻7</li>   xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
   <li id="one8" onclick="setTab('one',8,8)">新闻8</li>xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</ul>xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</div>xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 <div class="Contentbox">  xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
   <div id="con_one_1" class="hover">新闻列表1</div>xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
   <div id="con_one_2" style="display:none">新闻列表2</div>xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
   <div id="con_one_3" style="display:none">新闻列表3</div>xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
   <div id="con_one_4" style="display:none">新闻列表4</div> xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
   <div id="con_one_5" style="display:none">新闻列表5</div>xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
   <div id="con_one_6" style="display:none">新闻列表6</div>xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
   <div id="con_one_7" style="display:none">新闻列表7</div> xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
      <div id="con_one_8" style="display:none">新闻列表8</div> xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 </div>xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</div>xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<br>xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div id="Tab2">xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div class="Menubox">xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<ul>xn8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
   <li id="two1" onmouseover="setTab('two',1,4)"  class="hover">新闻1</li>

本文关键词
滑动门效果代码