frameset的用法

最新推荐文章于 2021-07-08 10:16:55 发布

changuncle

最新推荐文章于 2021-07-08 10:16:55 发布

阅读量5.9k

点赞数 5

分类专栏：前端内容

本文链接：https://blog.csdn.net/xiaouncle/article/details/52142104

版权

前端内容专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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;
        }
    }
}