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

来源：互联网发布：腾讯云域名备案编辑：程序博客网时间：2024/04/29 17:44

<!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