您的位置：首页 > Web前端 > HTML

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

2015-01-03 19:12 260 查看 
<!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>


来图纪念！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航