这是我以前用无序列表写的导航。你参考一下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.ulClass{ width:605px; list-style:none; margin:0px; padding:0px;}/*padding为控件的内边距*/
.ulClass li{ float:left; width:150px; font-size:12px; font-weight:bold; color:#000000; background-color:#CCCC00; line-height:20px; margin-left:1px;}
#overClass{ background-color:#CCCCCC; color:#333399; border-style:solid; border-width:1px; border-color:#666666; border-bottom-style:none; border-bottom-width:0px; width:148px;}
#overClass1{ width:149px; background-color:#CCCCCC; color:#333399; border-style:solid; border-width:1px; border-color:#666666; border-bottom-style:none; border-bottom-width:0px;}
#outClass{ color:#000000; background-color:#CCCC00;}
.divClass{ clear:both; width:603px; height:300px; border-style:solid; border-width:1px; border-color:#999999; border-top-style:none; border-top-width:0px;}
</style>
<script language="javascript">
function chageText(num)
{
switch(num)
{
case 1:
document.getElementById("div1").style.display="block";
document.getElementById("div2").style.display="none";
document.getElementById("div3").style.display="none";
document.getElementById("div4").style.display="none";
break;
case 2:
document.getElementById("div1").style.display="none";
document.getElementById("div2").style.display="block";
document.getElementById("div3").style.display="none";
document.getElementById("div4").style.display="none";
break;
case 3:
document.getElementById("div1").style.display="none";
document.getElementById("div2").style.display="none";
document.getElementById("div3").style.display="block";
document.getElementById("div4").style.display="none";
break;
case 4:
document.getElementById("div1").style.display="none";
document.getElementById("div2").style.display="none";
document.getElementById("div3").style.display="none";
document.getElementById("div4").style.display="block";
break;
}
}
</script>
</head>
<body style="text-align:center; margin:0px; padding:0px;" >
<div style="width:603px; margin:0px auto">
<ul class="ulClass">
<li onmouseover="chageText(1); id='overClass'" style="margin-left:0px;" onmouseout="id='outClass'">首页</li>
<li onmouseover="chageText(2); id='overClass'" onmouseout="id='outClass'" >公司简介</li>
<li onmouseover="chageText(3); id='overClass'" onmouseout="id='outClass'" >产品介绍</li>
<li onmouseover="chageText(4); id='overClass1'" style="margin:0px; padding:0px; margin-left:2px;" onmouseout="id='outClass'" >联系我们</li>
</ul>
<div class="divClass" id="div1" >
欢迎光临蓝天电子科技有限公司网页！
</div>
<div class="divClass" id="div2" style="display:none">
我们公司是一家中美合资的大型电子产品生产和研发的公司。
</div>
<div class="divClass" id="div3" style="display:none">
主要生产液晶显示器，背投彩电，平板电视等
</div>
<div class="divClass" id="div4" style="display:none">
公司电话：010-456656125 传真：010-234684612
</div>
</div>
</body>
</html>
|
收藏
淘帖
踩
