1. 程式人生 > >frameset怎麽框架內部跳轉

frameset怎麽框架內部跳轉

nbsp target 版權 word 主頁 type 區域 平時 內部

版權聲明:本文為博主原創文章,未經博主允許不得轉載。

分幀

  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就實現了框架內部跳轉了,多用於網站後臺

frameset怎麽框架內部跳轉