面板折叠

网页布局框架详解

最新推荐文章于 2024-09-07 20:52:50 发布

转载最新推荐文章于 2024-09-07 20:52:50 发布 · 622 阅读

文章标签：

#界面 #框架

MVC学习笔记专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用frameset进行网页布局的方法，详细解释了如何通过设定不同区域的高度和宽度来实现头部、底部、左侧菜单及右侧主界面的自适应显示，并提供了一个用于隐藏或显示左侧菜单的功能。

在做框架一个时候一般会将界面分成好几个部分，如头部、底部、左侧菜单，中间折叠，右侧主界面等

这里写图片描述

<frameset rows="104,*,30" cols="*" frameborder="no" border="0" framespacing="0">@*顶部发104px，底部30px，中间部分自适应*@
  <frame src="Home/Top.aspx" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
  <frameset cols="193,*" frameborder="no" border="0" framespacing="0" id="middenFram">@*左侧193px，右侧自适应*@
    <frame src="Home/Left.aspx" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame"/>
    <frame src="Home/Right.aspx" name="mainFrame" id="mainFrame" title="mainFrame" />
  </frameset>
  <frame src="/Content/buttom.aspx" name="topFrame" scrolling="No" noresize="noresize" id="bootomFrame" title="topFrame" />
</frameset>

        function hideShowFrame() {
            if (document.getElementById("middenFram").cols == "193,*") {
                document.getElementById("middenFram").cols = "0,*";
            }
            else {
                document.getElementById("middenFram").cols = "193,*"
            }
        }