HTML中如何利用frame结构写出导航框架

最新推荐文章于 2021-06-14 13:53:57 发布

奋斗的金鱼

最新推荐文章于 2021-06-14 13:53:57 发布

阅读量447

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_15379219/article/details/42366123

版权

HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bankuaituijianframe</title>
</head>
<frameset rows="22.5%, 60%" border="0" bordercolor="#eee">">
  <frame src="head.png">
  <frameset cols="3.3%,30%" frameborder="1">
   <frame name='index' src='daohang.html'></frame>
    <frame name='content' src='computer.html'></frame>
</frameset>
<noframes>
  <body>
  本网页使用框架，但你的浏览器不支持，特告知。
  </body>
</noframes>
</html>

其实原理很简单，只是比原来多了一步给frame命名，这样就实现了frame之间的互操作。computer.html是框架名为content的默认页，daohang.html就是左侧的导航栏，位于名为index的框架下，文件如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>daohang</title>
<style type="text/css">
.导航 {
	font-weight: bold;
	color: #003;
}
</style>
</head>
<body>
<table width="116" border="3" bordercolor="#eee">
  <tr>
    <td width="102" class="导航"><span class="导航"><span class="导航"><a href='computer.html' target='content'>计算机类推荐</a></span></span></td>
  </tr>
  <tr>
   <td class="导航"><span class="导航"><a href="child.html" target='content'>儿童类推荐</a></span></td>
  </tr>
  <tr>
   <td class="导航"><span class="导航"><a href="art.html" target='content'>艺术类推荐</a></span></td>
  </tr>
  <tr>
    <td class="导航"><span class="导航"><a href="index.html">返回首页</a></span></td>
  </tr>
</table>
</body>
</html>

来图纪念！

奋斗的金鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML中如何利用frame结构写出导航框架

bankuaituijianframe"> 本网页使用框架，但你的浏览器不支持，特告知。其实原理很简单，只是比原来多了一步给frame命名，这样就实现了frame之间的互操作。computer.html是框架名为content的默认页，daohang.html就是左侧的导航栏，位于名为index的框架下，文件如下：daoh
复制链接

扫一扫