frameset测试

　　frame不能放在body标签内。指定name属性，为这一个框架指定名字，在html的a的target属性可以设为target="right"在该框架显示跳转的页面。(常用于后台管理界面)

例子:

index.html

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <frameset rows="20%,*">
        <frame src="top.html" />
        <frameset cols="20%,80%">
            <frame src="left.html" />
            <!--frame不能放在body标签内。指定name属性，为这一个框架指定名字，在html的a的target属性可以
            设为target="right"在该框架显示跳转的页面-->
            <frame name="right" />          
        </frameset>
    </frameset>
</html>
复制代码

 

left.html

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--target为自己定义的名字，会在名为right的frame中显示right.html页面-->
        <a href="right.html" target="right">客户管理</a><br /><br />
        <a href="right1.html" target="right">商品管理</a><br /><br />
        <a href="right2.html" target="right">人员管理</a><br /><br />
        <a href="#">客户管理</a><br /><br />
        <a href="#">客户管理</a><br /><br />
    </body>
</html>
复制代码

 

 top.html

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <font size="7">欢迎xxx来到后台管理系统</font>
    </body>
</html>
复制代码

 

 

 right.xml

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        这是客户管理
    </body>
</html>
复制代码

 

right1.html

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        这是商品管理
        <img src="../img/logo2.png"/>
    </body>
</html>
复制代码

 

 

 right2.html

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        这人员管理
        <img src="../img/small02.jpg"/>
    </body>
</html>
复制代码

 

 

 

 测试:

 

点击客户管理

 

 

 点击商品管理

 

posted @   QiaoZhi  阅读(287)  评论(0)  编辑  收藏  举报
编辑推荐：
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 一个奇形怪状的面试题：Bean中的CHM要不要加volatile？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· Obsidian + DeepSeek：免费 AI 助力你的知识管理，让你的笔记飞起来！
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示