码迷,mamicode.com
首页 > 其他好文 > 详细

frameset测试

时间:2017-08-12 21:23:11      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:ror   oda   ++i   xom   uva   upd   udp   ddr   vsp   

  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>

 

 

 

 测试:

技术分享

 

点击客户管理

技术分享

 

 

 点击商品管理

技术分享

 

frameset测试

标签:ror   oda   ++i   xom   uva   upd   udp   ddr   vsp   

原文地址:http://www.cnblogs.com/qlqwjy/p/7351471.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!