daohanqiehuan.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>daohanqiehuan.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./daohanqiehuan.css">
<script language="javascript" type="text/javascript">
function qie(neirong){
var zhao = document.getElementById("d3");
var re =document.getElementById("d4");
var zhao1 = document.getElementById("zs");
var re1 =document.getElementById("rz");
if(neirong=="zhaosheng"){
//display 控制元素是否显示
zhao.style.display = "block";
re.style.display = "none";
zhao1.style.backgroundColor="yellow";
}
else if(neirong=="rezhao"){
zhao.style.display = "none";
re.style.display = "block";
re1.style.backgroundColor="yellow";
}
else if(neirong=="chuguo"){
}
}
function qie1(obj){
obj.style.backgroundColor="silver";
}
</script>
</head>
<body >
<div class="div1">
<div class="div2">
<ul>
<li id ="zs" οnmοusemοve="qie('zhaosheng')" οnmοuseοut="qie1(this)">招生</li>
<li id ="rz" οnmοusemοve="qie('rezhao')" οnmοuseοut="qie1(this)">热招</li>
<li οnmοusemοve="qie('chuguo')">出国</li>
</ul>
</div>
<div id="d3" class="div3">
<ul>
<li><a href="#">招生招生招生招生</a></li>
<li><a href="#">招生招生招生招生</a></li>
<li><a href="#">招生招生招生招生</a></li>
<li><a href="#">招生招生招生招生</a></li>
<li><a href="#">招生招生招生招生</a></li>
<li><a href="#">招生招生招生招生</a></li>
<li><a href="#">招生招生招生招生</a></li>
<li><a href="#">招生招生招生招生</a></li>
</ul>
</div>
<div id="d4" class="div4">
<ul>
<li><a href="#">热招热招热招热招</a></li>
<li><a href="#">热招热招热招热招</a></li>
<li><a href="#">热招热招热招热招</a></li>
<li><a href="#">热招热招热招热招</a></li>
<li><a href="#">热招热招热招热招</a></li>
<li><a href="#">热招热招热招热招</a></li>
<li><a href="#">热招热招热招热招</a></li>
<li><a href="#">热招热招热招热招</a></li>
</ul>
</div>
</div>
</body>
</html><strong>
</strong>
daohanqiehuan.css
body{
font-size:12px;
}
.div1{
width :126px;
height:156px;
/* background-color:pink;*/
float:left;
padding:0px;
}
.div2{
width:21px;
height: 156px;
float: left;
/* background-color:green;*/
padding:0px;
}
.div2 ul{
width:21px;
height: 150px;
list-style-type :none;
float:left;
padding:0px;
margin-left:0px;
}
.div2 li{
width:21px;
height: 47px;
float:left;
background-color:silver;
/* margin-top:10px;*/
text-align : center;
padding-top : 8px;
margin-top:5px;
}
.div3,.div4{
width:100px;
height:156px;
float:left;
padding:0px;
/* background-color:silver;*/
margin-left:2px
}
.div3 ul,.div4 ul{
width:100px;
height:156px;
float:left;
list-style-type:none;
padding:0px;
margin-left:0px;
}
.div3 li,.div4 li{
width:100px;
heigth:18px;
float:left;
text-align:center;
/* background-color:red;*/
margin-top:6px;
}
.div4{
display:none;
}