码迷,mamicode.com
首页 > Web开发 > 详细

html---frameset怎么框架内部跳转——转自玉狐大神

时间:2018-05-31 14:49:47      阅读:301      评论:0      收藏:0      [点我收藏+]

标签:调整   head   主页   action   http   cap   链接文件   oct   form   

分帧

  HTML 框架是划分窗口的技术 就是把一个窗口分隔成多个窗口 每个窗口显示不同的网页内容多用于后台 也叫做分帧

1.Frameset

  注意 如果你在页面上写frameset 了那么就不能出现body 因为他们两个见面就打仗

  <frameset></frameset>

  常用属性:

  Cols  分列单位可以写像素也可以写百分比 之后除上面内容外还可以写*(*代表剩余所有)

  Rows 分行单位可以写像素也可以写百分比 之后除上面内容外还可以写*(*代表剩余所有)

  Frameborder  分帧边框 0/1

  Border 边框粗细

 

2.Frame

  把窗口分成几份就要有对应的几个frame标签出现

  <frame />

  常用属性:

  Name  给设置的区域一个名字  用作跳转使用

  Src 默认的显示页面链接

  Noresize 不允许调整边框

  Scrolling  滚动条

  Auto|yes 出现滚动条|no 不出现滚动条

列如,我们分三个页面作为不同的区域

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>分帧</title>
  </head>
  <frameset rows="15%,*">
    <frame name="top" src="http://www.baidu.com" noresize scrolling="yes"/>
      <frameset cols="30%,*">
        <frame name="left" src="http://www.iqiyi.com" noresize/>
        <frame name="right" src="http://www.bilibili.com" noresize/>
      </frameset>
  </frameset>
</html>

那么我们平时也用不到这些,更多的是对于后代界面的管理那么我们就会用到src属性列如

先搞一个后代页面主页

技术分享图片
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>1.HTML分侦(HTML框架)做一个后台管理界面</title>
</head>
<frameset rows="15%,*" border="1px">
    <frame noresize name="top" src="top.html"></frame>
    <frameset cols="20%,*">
        <frame noresize name="laft" src="left.html"></frame>
        <frame noresize name="right1" src="right1.html"></frame>
    </frameset>
</frameset>
</html>
技术分享图片

对应的链接文件top.html

技术分享图片
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>top</title>
    <style type="text/css">
        h1{ width: 200px;  margin: 0 auto; font: 楷体,宋体}
    </style>
</head>
<body>
    <h1>学生管理系统</h1>
</body>
</html>
技术分享图片

对应的链接文件left.html

技术分享图片
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>left</title>
    <style type="text/css">
        h1{ margin: 0 auto; font: 楷体,宋体}
    </style>
</head>
<body>
    <div>学生管理系统</div><br>
    <a href="right1.html" target="right1">用户登录</a><br><br>
    <a href="right.html" target="right1">浏览用户</a>
</body>
</html>
技术分享图片

对应的两个right1.html 和 right.html文件

技术分享图片
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>right1</title>
    <style type="text/css">
        body{ background: #CCECFF;}
        table{ width: 260px; margin: 0 auto;}
        tr{ height: 50px;}
    </style>
</head>
<body>
    <table border="0">
        <form action="" method="post">
        <caption><h1>用户登录界面</h1></caption>
        <tr>
            <td>账号:</td>
            <td><input type="text" name="yhm"></td>
        </tr>
        <tr>
            <td>密码:</td>
            <td><input type="password" name="mima"></td>
        </tr>
        <tr>
            <td colspan="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="tijiao" type="submit" value="登录">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="chongxie" type="reset" value="重写"></td>
            <!-- <td></td> -->
        </tr>
        </form>
    </table>
</body>
</html>
技术分享图片
技术分享图片
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>right</title>
    <style type="text/css">
        h1{ margin: 0 auto; font: 宋体}
    </style>
</head>
<body>
    <h1>用户一</h1>
    <h1>用户二</h1>
    <h1>用户三</h1>
</body>
</html>
技术分享图片

其实主要的就是我们的a标签target的属性值一定要对应我们链接跳转 frame的

name="对应值"     就是      target="对应frame里面的name值"  列如 

<a href="right1.html" target="right1">用户登录</a>
<a href="right.html" target="right1">浏览用户</a>

frameset就实现了框架内部跳转了,多用于网站后台

html---frameset怎么框架内部跳转——转自玉狐大神

标签:调整   head   主页   action   http   cap   链接文件   oct   form   

原文地址:https://www.cnblogs.com/Life-is-Demo/p/9116328.html

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