<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.mx-con {
height: 590px;
background: #f8f8f8;
position: relative;
}
ul.xy-pic {
width: 1000px;
height: 120px;
margin: 0 auto;
border-bottom: 2px solid #ed553e;
font-size: 0;
letter-spacing: normal;
word-spacing: normal;
text-align: center;
font-size: 0;
padding: 40px 0 0 0;
}
ul.xy-pic li {
width: 90px;
height: 115px;
padding: 5px 6px 0 6px;
background: url(global.png) no-repeat 0 -2852px;
display: inline-block;
vertical-align: top;
font-size: 14px;
letter-spacing: normal;
word-spacing: normal;
margin: 0 21px;
position: relative;
}
ul.xy-pic li a.cur1 {
background: url(global.png) no-repeat 0 -2466px;
}
ul.xy-pic li a.cur2 {
background: url(global.png) no-repeat 0 -2578px;
}
ul.xy-pic li a.cur3 {
background: url(global.png) no-repeat 0 -2706px;
}
ul.xy-pic li.cur a.cur1, ul.xy-pic li a.cur1:hover {
background: url(global.png) no-repeat -100px -2466px;
}
ul.xy-pic li.cur a.cur2, ul.xy-pic li a.cur2:hover {
background: url(global.png) no-repeat -100px -2578px;
}
ul.xy-pic li.cur a.cur3, ul.xy-pic li a.cur3:hover {
background: url(global.png) no-repeat -100px -2706px;
}
ul.xy-pic li a {
width: 90px;
height: 90px;
display: block;
}
a {
font-size: 12px;
text-decoration: none;
}
ul.xy-pic li.cur i {
display: block;
}
ul.xy-pic li i {
width: 12px;
height: 7px;
overflow: hidden;
background: url(global.png) no-repeat -100px -2983px;
position: absolute;
left: 50%;
margin-left: -6px;
bottom: -2px;
display: none;
}
.xy-tips {
line-height: 26px;
padding: 32px 0 70px 0;
text-align: center;
font-size: 16px;
text-align: center;
}
.xy-tips h5 {
line-height: 70px;
}
</style>
</head>
<body>
<div class="mx-con">
<ul class="xy-pic">
<li id="t_one1" onmouseover="setTab(‘t_one‘,1,3)" class="cur">
<a class="cur1" href="javascript:"></a> <i></i> </li>
<li id="t_one2" onmouseover="setTab(‘t_one‘,2,3)" class="">
<a class="cur2" href="javascript:"></a> <i></i> </li>
<li id="t_one3" onmouseover="setTab(‘t_one‘,3,3)" class="">
<a class="cur3" href="javascript:"></a> <i></i> </li>
</ul>
<div class="xy-tips" id="t_one_con1" style="display: block;">不同浏览器对于相同元素的默认样式并不一致。
<h5>—毛豆</h5>
</div>
<div class="xy-tips" id="t_one_con2" style="display: none;">而且不同内核的浏览器在某些控件（元素）的表现上也是各有差异。
<h5>—春田花花</h5>
</div>
<div class="xy-tips" id="t_one_con3" style="display: none;">比如字体、缩进等等，这些问题都是由于浏览器的默认样式（CSS）在作怪，下面西部e网整理了一份浏览器默认css的样式表文件。
<h5>—豆豆虫</h5>
</div>
</div>
</body>
</html>
<script>
function setTab(name,num,n){//t_one, index是否等于num,n是总数
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);//t_one+1
var con=document.getElementById(name+"_"+"con"+i);//t_one_con+1
menu.className=i==num?"cur":"";//当前cur下换背景图片，且让i标签display:block;如果当前的index值等于num，就添加样式cur，否则就清空；
con.style.display=i==num?"block":"none";//如果当前的index值等于num，就让他显示，否则就隐藏
}
}
</script>
时间： 2024-11-05 23:53:53