<html><head>
<style type="text/css">
UL{list-style-type:none;margin:0; }
/*没有这个margin，界面就非常难看。图中上面的蓝色和下面的红框中间有距离*/
.ctt{padding-top:20px;border:1px solid red;text-align:center;height:100px;clear:both;border-top:0;}
.w800{margin:2px 0;150px;clear:both;}
.tb_{background-color:blue;}
.tb_ ul{height:20px;}
.tb_ li{float:left;cursor:pointer;50px;padding:3px,2px,0,8px;}
/*看清格式," .tb_ ul "中间一定要有空格呀。*/ 控制LI中的字的位置的。
.nortab{color:yellow;}
.hovertab{color:white;background-color:green;height:23px;font-weight:bold;}
.dis{display:block;}
.undis{display:none}
</style>
<script type="text/javascript" language="javascript">
function g(o)
{
return document.getElementById(o);
}
function Hoverli(n)
{
for(var i=1;i<=3;i++)
{
g('tb_'+i).className='nortab';
g('tb_0'+i).className='undis';
}
g('tb_'+n).className='hovertab';
g('tb_0'+n).className='dis';
}
</script>
</head>
<body>
<div class="w800">
<div class="tb_">
<ul>
<li class="hovertab" id="tb_1" onmouseover="Hoverli(1)" style="text-algin:center;">美国
</li>
<li class="nortab" id="tb_2" onmouseover="Hoverli(2)">俄国</li>
<li class="nortab" id="tb_3" onmouseover="Hoverli(3)">中国</li>
</ul>
</div>
<div class="ctt">
<div class="dis" id="tb_01">想打谁，就打谁</div>
<div class="undis" id="tb_02">谁骂我，我打谁</div>
<div class="undis" id="tb_03">谁打我，我骂谁</div>
</div>
</div>
</body>
</html>