frameset的用法

来源：互联网发布：小蜜蜂软件官方网编辑：程序博客网时间：2024/06/05 17:11

frameset可以用来对网站页面布局，有时会用到所以系统学习下，并记录下来。
frameset是把其他页面嵌入到框架页面中，几个页面分别为default.aspx、top.aspx、left.aspx、main.aspx、content.aspx。
default.aspx前台页面代码如下：

<head runat="server">    <title></title></head><%--把页面横向分成两行1、2--%><frameset rows="110px,*" frameborder="no" framespacing="0" border="0">    <%--横向1--%>    <frame src="top.aspx" noresize="noresize"></frame>    <%--横向2，横向2部分又纵向分成两列2.1、2.2--%>    <frameset cols="220px,*" frameborder="no" framespacing="0" border="0">        <%--2.1部分--%>        <frame src="left.aspx" name="leftFrame" noresize="noresize" scrolling="auto"></frame>        <%--2.2部分，name属性可作为菜单的target值使用--%>        <frame src="main.aspx" name="mainFrame" scrolling="auto"></frame>    </frameset> </frameset><noframes>    <body>        您的浏览器无法处理框架！    </body></noframes></html>

top.aspx前台页面代码如下：

<head runat="server">    <title></title>    <style type="text/css">        body        {            /*不同浏览器默认的padding、margin值不同，最好清空一下*/            padding:0;            margin:0;            background-color:#ccccff;        }        .top        {            height:108px;            border:1px solid #0000ff;        }    </style></head><body>    <form id="form1" runat="server">    <div class="top">        网站头部    </div>    </form></body>

left.aspx前台页面如下：

<head runat="server">    <title></title>    <style type="text/css">        html        {            height:100%;        }        body        {            height:100%;            padding:0;            margin:0;            background-color:#ccffcc;            /*border:1px solid #00ff00;*/            /*把border包含在100%中，如果不加box-sizing: border-box;样式，             *那100%和border组合使用会出现滚动条            box-sizing: border-box;*/        }    </style></head><body>    <form id="form1" runat="server">    <div class="left">        网站菜单        <ul>            <%--target='mainFrame'对应name='mainFrame'的<frame/>控件--%>            <li><a href="content.aspx?id=1" target="mainFrame">菜单一</a>            </li>            <li><a href="content.aspx?id=2" target="mainFrame">菜单二</a>            </li>            <li><a href="content.aspx?id=3" target="mainFrame">菜单三</a>            </li>            <li><a href="content.aspx?id=4" target="mainFrame">菜单四</a>            </li>            <li><a href="content.aspx?id=5" target="mainFrame">菜单五</a>            </li>            <li><a href="content.aspx?id=6" target="mainFrame">菜单六我要写挺长的内容来试一下横向滚动条是否出现</a>            </li>        </ul>    </div>    </form></body>

main.aspx前台代码如下：

<head runat="server">    <title></title>    <style type="text/css">        html        {            /*html也设置height:100%，body设置的height:100%才会起作用*/            height:100%;        }        body        {            height:100%;            padding:0;            margin:0;            background-color:#ffcccc;            border:1px solid #ff0000;            box-sizing: border-box;        }    </style></head><body>    <form id="form1" runat="server">    <div class="main">        网站主内容    </div>    </form></body>

content.aspx前台代码如下：

<body>    <form id="form1" runat="server">    <div>    <%:mycontent %>    </div>    </form></body>

content.aspx后台代码如下：

protected void Page_Load(object sender, EventArgs e){    if (!IsPostBack)    {        string type=Request.QueryString["id"];        switch (type)        {            case "1": mycontent = "菜单一对应页面"; break;            case "2": mycontent = "菜单二对应页面"; break;            case "3": mycontent = "菜单三对应页面"; break;            case "4": mycontent = "菜单四对应页面"; break;            case "5": mycontent = "菜单五对应页面"; break;            case "6": mycontent = "菜单六对应页面"; break;        }    }}

1 0