腾讯云618限量抢购
  1. DIV+CSS教程

XHTML 框架导航示例

最后更新:2010-10-06 12:37阅读:10662

框架经常用于固定栏目导航的情况,如后台管理页面,其好处是操作时不用刷新整个页面。

上下框架导航例子

为简单起见,下面演示一个简单的上下导航框架的制作。对于更复杂的框架导航,原理是一样的。

frame.html 页面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
 <head>
  <title>框架导航示例</title>
 </head>
 <frameset rows="50,*">
  <frame src="frame_top.html" name="top" scrolling="no" noresize="noresize" />
  <frame src="frame_main.html" name="main" scrolling="yes" />
  <noframes>
   <body>
   <p>对不起,您的浏览器不支持框架!</p>
   </body>
  </noframes>
 </frameset>
</html>

frame_top.html 页面代码

<html>
 <head>
  <title>顶部导航页面</title>
 </head>
 <body>
  <p>
  <a href="frame_main.html" target="main">主页面</a>
  <a href="menu1.html" target="main">菜单1</a>
  <a href="index.html" target="_top">回全屏首页</a>
  </p>
 </body>
</html>

frame_main.html 页面代码

<html>
 <head>
  <title>主页面</title>
 </head>
 <body>
  <p>
  <p>这是主页面:frame_main!</p>
  </p>
 </body>
</html>

menu1.html 页面代码

<html>
 <head>
  <title>菜单1</title>
 </head>
 <body>
  <p>
  <p>这是菜单1页面:menu1.html。</p>
  </p>
 </body>
</html>

将以上文件存储在同一目录下,在浏览器查看 frame.html 页面,可以看到我们的框架结构。分别点击上面的菜单,可以看出导航效果。

提示

在该例子里面,请注意 target 属性的使用,其取值分别与 <frame /> 标签的 name 属性对应。当链接目标为自己本身时,可以取值 _self ,若要跳出框架,可以取值 _top 。


本章节内容共分 3 部分:
  1. 1. XHTML 框架 frameset 标签
  2. 2. XHTML 框架属性设置
  3. 3. XHTML 框架导航示例
腾讯云618限量抢购