带左右上下的框架页面

主页面的frame就不写了

直接写上下左右按钮的代码:

1.左边


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>cssrain</title>
<script language="javascript" type="text/javascript" >

function switchSysBar()
{
if (parent.document.getElementById('MainBody').cols=="210,10,*")
{
document.getElementById('leftbar').style.display="block";
document.getElementById('rightbar').style.display="none";
parent.document.getElementById('MainBody').cols="0,10,*";
}
else
{
parent.document.getElementById('MainBody').cols="210,10,*";
document.getElementById('leftbar').style.display="none"
document.getElementById('rightbar').style.display="block";
}
}
function load()
{
if (parent.document.getElementById('MainBody').cols=="0,10,*")
{
document.getElementById('leftbar').style.display="none";
}
}

</script>
</head>
<body onload="load()" style="margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px" >
<center>
<table cellspacing="0" cellpadding="0" border="0" style=" width:100%; height:100%"; >
<tbody>
<tr>
<td style="background-color: #009fef; width:1px ">
<img alt="" height="1" width="1" src="images/ccc.gif"/>
</td>
<td id="leftbar" style="display: none; background-color: #f5f4f4">
<a onclick="switchSysBar()" href="javascript:void(0);">
<img height="90" style=" border:0px; width:9px" alt="展开左侧菜单" src="images/pic24.gif"/>
</a>
</td>
<td id="rightbar" style="background-color: #f5f4f4">
<a onclick="switchSysBar()" href="javascript:void(0);">
<img height="90" style=" border:0px; width:9px;" alt="隐藏左侧菜单" src="images/pic23.gif"/>
</a>
</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>

2.顶部

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>cssrain</title>
<link href="../css/sytel.css" type="text/css" rel="stylesheet" />
<script language="javascript" type="text/javascript">
function switchSysBar()
{
if (parent.document.getElementById('MainFrame').rows=="53,10,*")
{
document.getElementById('leftbar').style.display="block";
document.getElementById('rightbar').style.display="none";
parent.document.getElementById('MainFrame').rows="0,10,*";
}
else
{
parent.document.getElementById('MainFrame').rows="53,10,*";
document.getElementById('leftbar').style.display="none"
document.getElementById('rightbar').style.display="block";
}
}
function load(){
if (parent.document.getElementById('MainFrame').rows=="53,10,*")
{
document.getElementById('leftbar').style.display="none";
}
}
</script>
</head>
<body onload="load()" style="margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px ; background-color: #f5f4f4;" >
<div class="t">
<table cellspacing="0" cellpadding="0" style="height: 10px; border:0px;padding-top:0px ;font-size:1pt " >
<tr style="padding-top:0px " >
<td id="leftbar" style="display: none; background-color: #f5f4f4;width:100%;text-align:center;height: 10px; ">
<a onclick="switchSysBar()" href="javascript:void(0);">
<img alt="展开顶部" src="images/pic27.gif" style="width: 120px; height: 9px;"/>
</a>
</td>
<td id="rightbar" style="height: 9px;background-color: #f5f4f4;width:100%;text-align:center; ">
<a onclick="switchSysBar()" href="javascript:void(0);">
<img alt="隐藏顶部" src="images/pic26.gif" style="width: 121px;height:9px;" />
</a>
</td>
</tr>
</table>

</div>
</body>
</html>

注意顶部的table 字体一定要设置成小点,否则在IE下无法贴到顶部。在FF 和谷歌浏览器下不存在这样的问题,不知道是否是BUG

不说了上图

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值