- <!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>
- //该片段来自于http://www.codesnippet.cn/detail/2906201614758.html
来源: http://www.codesnippet.cn/detail/2906201614758.html