!DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleTAB实现自动切换/title style type="text/css" #header{ width: 603px; text-align: center; margin: 0 auto; } #content{ margin: 0 auto; width: 603px; height: 403px; } li{ float: lef
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TAB实现自动切换</title>
<style type="text/css">
#header{
width: 603px;
text-align: center;
margin: 0 auto;
}
#content{
margin: 0 auto;
width: 603px;
height: 403px;
}
li{
float: left;
width: 150px;
height: 30px;
line-height: 30px;
text-align: center;
list-style: none;
cursor: pointer;
}
li.nav_bar{
background-color: #ccc;
border-left:1px solid #ccc;
border-top:1px solid #ccc;
border-right:1px solid #ccc;
}
#main div{
width: 600px;
height: 370px;
clear: left;
border: solid 1px #ccc;
display: none;
}
#main div.main_bar{
display: block;
text-indent: 2em;
}
.nav_bar,.main_bar{
background-color: #ccc
}
</style>
<script type="text/javascript">
function setTab(n){
var tabs=document.getElementById("navs").getElementsByTagName("li");
var show=document.getElementById("main").getElementsByTagName("div");
for(var i=0;i<tabs.length;i++){
if(i==n){
tabs[i].className="nav_bar";
show[i].className="main_bar";
}else{
tabs[i].className=" ";
show[i].className=" ";
}
}
}
</script>
</head>
<body>
<div id="header">
<h1>TAB实现自动切换</h1>
</div>
<div id="content">
<div id="navs" class="navs">
<li class="nav_bar" onmousemove="setTab(0)">标题一</li>
<li onmousemove ="setTab(1)">标题二</li>
<li onmousemove ="setTab(2)">标题三</li>
<li onmousemove ="setTab(3)">标题四</li>
</div>
<div id="main" class="main">
<div class="main_bar">很多时候一个元素的样式并非直接对元素定义，而是对其祖先元素定义，然后通过继承性得到样式。例如，在body中定义的文字的颜色（color）属性，在p元素中也是有效的。这就是样式的继承。</div>
<div>例如：在body中定义了字体的大小，元素p的属性style中定义了文字颜色，内部样式表和外部样式表中也都定义了元素p的文字颜色，而且某段文字还用属性id和类名都定义了文字颜色。这样会导致复杂的样式层叠关系，到底谁可以起作用呢？</div>
<div> 如果一个元素被具有相同属性名的多个样式重复作用，也就是出现了样式层叠，CSS需要通过这些样式的选择器的特殊性来进行选择其中的一个样式。选择器越特殊优先权越高，选择器优先权最高的样式被选中。如果最高优先权的有多个，则要看这些样式中哪个样式离这个元素最近，离得最近的被选中</div>
<div> 盒子模型是css的核心，也是网页设计的核心内容，基本上所有的网页都有用到盒子模型。每个盒子都有border，margin，padding和content四个属性，但是盒子模型有两种不同的解释：标准W3C盒子模型和IE6盒子模型。</div>
</div>
</div>
</body>
</html>