1.页面左部分
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.STYLE1 {
font-size: 12px;
color: #FFFFFF;
}
.STYLE3 {
font-size: 12px;
color: #033d61;
}
-->
</style>
<style type="text/css">
.menu_title SPAN {
FONT-WEIGHT: bold; LEFT: 3px; COLOR: #ffffff; POSITION: relative; TOP: 2px
}
.menu_title2 SPAN {
FONT-WEIGHT: bold; LEFT: 3px; COLOR: #FFCC00; POSITION: relative; TOP: 2px
}
</style>
<script>
var he=document.body.clientHeight-105
document.write("<div id=tt style=height:"+he+";overflow:hidden>")
</script>
<table width="165" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="28" background="images/main_40.gif"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="19%"> </td>
<td width="81%" height="20"><span class="STYLE1">管理菜单</span></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top"><table width="151" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="23" background="images/main_47.gif" id="imgmenu1" class="menu_title" onMouseOver="this.className='menu_title2';" onClick="showsubmenu(1)" onMouseOut="this.className='menu_title';" style="cursor:hand"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="18%"> </td>
<td width="82%" class="STYLE1">业务中心</td>
</tr>
</table></td>
</tr>
<tr>
<td background="images/main_51.gif" id="submenu1">
<div class="sec_menu" >
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="16%" height="25"><div align="center"><img src="images/left.gif" width="10" height="10" /></div></td>
<td width="84%" height="23"><table width="95%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" style="cursor:hand" οnmοuseοver="this.style.borderStyle='solid';this.style.borderWidth='1';borderColor='#7bc4d3'; "οnmοuseοut="this.style.borderStyle='none'"><span class="STYLE3">短信群发</span></td>
</tr>
</table></td>
</tr>
<tr>
<td height="23"><div align="center"><img src="images/left.gif" width="10" height="10" /></div></td>
<td height="23"><table width="95%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" style="cursor:hand" οnmοuseοver="this.style.borderStyle='solid';this.style.borderWidth='1';borderColor='#7bc4d3'; "οnmοuseοut="this.style.borderStyle='none'"><span class="STYLE3">用户资料修改</span></td>
</tr>
</table></td>
</tr>
<tr>
<td height="23"><div align="center"><img src="images/left.gif" width="10" height="10" /></div></td>
<td height="23"><table width="95%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" style="cursor:hand" οnmοuseοver="this.style.borderStyle='solid';this.style.borderWidth='1';borderColor='#7bc4d3'; "οnmοuseοut="this.style.borderStyle='none'"><span class="STYLE3">公司信息管理</span></td>
</tr>
</table></td>
</tr>
<tr>
<td height="23"><div align="center"><img src="images/left.gif" width="10" height="10" /></div></td>
<td height="23"><table width="95%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" style="cursor:hand" οnmοuseοver="this.style.borderStyle='solid';this.style.borderWidth='1';borderColor='#7bc4d3'; "οnmοuseοut="this.style.borderStyle='none'"><span class="STYLE3">其他业务</span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="5"><img src="images/main_52.gif" width="151" height="5" /></td>
</tr>
</table></div></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="23" background="images/main_47.gif" id="imgmenu2" class="menu_title" οnmοuseοver="this.className='menu_title2';" οnclick="showsubmenu(2)" οnmοuseοut="this.className='menu_title';" style="cursor:hand"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="18%"> </td>
<td width="82%" class="STYLE1">系统管理</td>
</tr>
</table></td>
</tr>
<tr>
<td background="images/main_51.gif" id="submenu2"><div class="sec_menu" >
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="16%" height="25"><div align="center"><img src="images/left.gif" width="10" height="10" /></div></td>
<td width="84%" height="23"><table width="95%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" style="cursor:hand" οnmοuseοver="this.style.borderStyle='solid';this.style.borderWidth='1';borderColor='#7bc4d3'; "οnmοuseοut="this.style.borderStyle='none'"><span class="STYLE3">系统配置</span></td>
</tr>
</table></td>
</tr>
<tr>
<td height="23"><div align="center"><img src="images/left.gif" width="10" height="10" /></div></td>
<td height="23"><table width="95%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" style="cursor:hand" οnmοuseοver="this.style.borderStyle='solid';this.style.borderWidth='1';borderColor='#7bc4d3'; "οnmοuseοut="this.style.borderStyle='none'"><span class="STYLE3">修改用户密码</span></td>
</tr>
</table></td>
</tr>
<tr>
<td height="23"><div align="center"><img src="images/left.gif" width="10" height="10" /></div></td>
<td height="23"><table width="95%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" style="cursor:hand" οnmοuseοver="this.style.borderStyle='solid';this.style.borderWidth='1';borderColor='#7bc4d3'; "οnmοuseοut="this.style.borderStyle='none'"><span class="STYLE3">数据更新</span></td>
</tr>
</table></td>
</tr>
<tr>
<td height="23"><div align="center"><img src="images/left.gif" width="10" height="10" /></div></td>
<td height="23"><table width="95%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" style="cursor:hand" οnmοuseοver="this.style.borderStyle='solid';this.style.borderWidth='1';borderColor='#7bc4d3'; "οnmοuseοut="this.style.borderStyle='none'"><span class="STYLE3">网站维护</span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="5"><img src="images/main_52.gif" width="151" height="5" /></td>
</tr>
</table>
</div></td>
</tr>
</table> </td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="23" background="images/main_47.gif" id="imgmenu3" class="menu_title" οnmοuseοver="this.className='menu_title2';" οnclick="showsubmenu(3)" οnmοuseοut="this.className='menu_title';" style="cursor:hand"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="18%"> </td>
<td width="82%" class="STYLE1">安全管理</td>
</tr>
</table></td>
</tr>
<tr>
<td background="images/main_51.gif" id="submenu3" style="DISPLAY: none"><div class="sec_menu" >
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="16%" height="25"><div align="center"><img src="images/left.gif" width="10" height="10" /></div></td>
<td width="84%" height="23"><table width="95%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" style="cursor:hand" οnmοuseοver="this.style.borderStyle='solid';this.style.borderWidth='1';borderColor='#7bc4d3'; "οnmοuseοut="this.style.borderStyle='none'"><span class="STYLE3">企业安全</span></td>
</tr>
</table></td>
</tr>
<tr>
<td height="23"><div align="center"><img src="images/left.gif" width="10" height="10" /></div></td>
<td height="23"><table width="95%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" style="cursor:hand" οnmοuseοver="this.style.borderStyle='solid';this.style.borderWidth='1';borderColor='#7bc4d3'; "οnmοuseοut="this.style.borderStyle='none'"><span class="STYLE3">信息安全管理</span></td>
</tr>
</table></td>
</tr>
<tr>
<td height="23"><div align="center"><img src="images/left.gif" width="10" height="10" /></div></td>
<td height="23"><table width="95%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" style="cursor:hand" οnmοuseοver="this.style.borderStyle='solid';this.style.borderWidth='1';borderColor='#7bc4d3'; "οnmοuseοut="this.style.borderStyle='none'"><span class="STYLE3">安全审计</span></td>
</tr>
</table></td>
</tr>
<tr>
<td height="23"><div align="center"><img src="images/left.gif" width="10" height="10" /></div></td>
<td height="23"><table width="95%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" style="cursor:hand" οnmοuseοver="this.style.borderStyle='solid';this.style.borderWidth='1';borderColor='#7bc4d3'; "οnmοuseοut="this.style.borderStyle='none'"><span class="STYLE3">网站安全</span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="5"><img src="images/main_52.gif" width="151" height="5" /></td>
</tr>
</table>
</div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="18" background="images/main_58.gif"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="18" valign="bottom"><div align="center" class="STYLE3">版本:2008V1.0</div></td>
</tr>
</table></td>
</tr>
</table>
<script>
function showsubmenu(sid)
{
whichEl = eval("submenu" + sid);
imgmenu = eval("imgmenu" + sid);
if (whichEl.style.display == "none")
{
eval("submenu" + sid + ".style.display=\"\";");
imgmenu.background="images/main_47.gif";
}
else
{
eval("submenu" + sid + ".style.display=\"none\";");
imgmenu.background="images/main_48.gif";
}
}
</script>
2.div方式写,不用table
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>企业信息管理系统</title>
<style>
body{
margin:0px;
padding:0px;
height:100%;
background-color:#1873aa;
font-size:12px;
}
#container{
width:170px;
text-align:center;
}
#style1{
background-image:url(images/left1.gif);
width:165px;
height:28px;
margin-left:8px;
}
.style2{
width:165px;
background-color:#FFFFFF;
margin-left:8px;
height:460px;
}
.style21{
margin-bottom:5px;
}
.style21image{
background-image:url(images/left2.gif);
width:151px;
height:23px;
}
.style21image div{
margin-top:5px;
margin-left:-40px;
}
.style21image div a{
text-decoration:none;
color:#FFFFFF;
}
.style22text{
width:149px;
border:1px solid #95d6e4;
margin-top:-1px;
}
.style22text ul{
list-style-type:none;
list-style-image:url(images/left3.gif);
margin-left:-30px;
margin-top:10px;
}
.style22text ul li{
margin-bottom:10px;
}
.style22text ul li a{
color:#033d61;
text-decoration:none;
}
.style22text ul li a:hover{
color:#3399CC;
text-decoration:underline;
}
</style>
<script>
function hiddendiv(div){
div.style.display = (div.style.display=='none'?'block':'none');
}
</script>
</head>
<body>
<div id="container">
<div id="style1">
</div>
<div class="style2">
<div class="style21">
<div class="style21image">
<div><a href="javascript:void(0)" οnclick="hiddendiv(document.getElementById('d1'))">业务中心</a></div>
</div>
<div class="style22text" id="d1">
<ul>
<li><a href="#">短信群发</a></li>
<li><a href="#">短信群发</a></li>
<li><a href="#">短信群发</a></li>
<li><a href="#">短信群发</a></li>
</ul>
</div>
</div>
<div class="style21">
<div class="style21image">
<div><a href="javascript:void(0)" οnclick="hiddendiv(document.getElementById('d2'))">业务中心</a></div>
</div>
<div class="style22text" id="d2">
<ul>
<li><a href="#">短信群发</a></li>
<li><a href="#">短信群发</a></li>
<li><a href="#">短信群发</a></li>
<li><a href="#">短信群发</a></li>
</ul>
</div>
</div>
<div class="style21">
<div class="style21image">
<div><a href="javascript:void(0)" οnclick="hiddendiv(document.getElementById('d3'))">业务中心</a></div>
</div>
<div class="style22text" id="d3">
<ul>
<li><a href="#">短信群发</a></li>
<li><a href="#">短信群发</a></li>
<li><a href="#">短信群发</a></li>
<li><a href="#">短信群发</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
<div><a href="javascript:void(0)" οnclick="hiddendiv(document.getElementById('d3'))">业务中心</a></div>
这句中 <a href="javascript:void(0)" 去掉超链接的默认行为