HTML 将导航页嵌套到<iframe>中_导航菜单写在iframe里-优快云博客

本文链接：https://blog.youkuaiyun.com/houyanhua1/article/details/78375969

本文介绍了如何使用HTML的<iframe>标签将一个导航页面嵌入到主页面中，实现网页间的无缝链接和交互。通过示例代码，详细解析了<iframe>的使用方法和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导航页：

<!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>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link rel="stylesheet" type="text/css" href="" />
  <style type="text/css">
  body{margin:0;}  /* 必须把导航页和内容页的边缘都设为0，否则顶部会留白边 */
  </style>
  <script type="text/javascript"></script>
 </head>

 <body>
  <table width="960" border="0" cellpadding="0" cellspacing="0" align="center">  <!--表格三参为0，否则顶部会留白边-->
	<tr background="nav.png" align="center">
		<td height="96">首页</td>
		<td>导航1</td>
		<td>导航2</td>
		<td>导航3</td>
		<td>导航4</td>
		<td>导航5</td>
		<td>导航6</td>
	</tr>
  </table>
 </body>
</html>

主页（在主页中嵌套导航页<iframe>）：

<!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>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link rel="stylesheet" type="text/css" href="" />
  <style type="text/css">
  body{margin:0;}   /* 必须把导航页和内容页的边缘都设为0，否则顶部会留白边 */
  </style>
  <script type="text/javascript"></script>
 </head>

 <body>
<table width="960" align="center" border="0" cellpadding="0" cellspacing="0">   <!--将ifame放在表格中，否则不会居中。表格三参为0，否则顶部会留白边-->
	<tr>
		<td><iframe src="toptest.html" width="960" height="96" scrolling="no" border="0" frameborder="0" align="center"></iframe></td>    <!--将ifame的src指定为导航页-->
	</tr>
</table>
 </body>
</html>