一个浏览器窗体可以通过几个页面的组合来显示。我们可以使用框架来完成(frames)这项工作。(框架可以把HTML文档分为多个页面)
详情可见：http://www.dreamdu.com/xhtml/tag_frame/
主要概念：框架标签
framHTML框架使用frameset标签把浏览器的窗体分为多个行与列的框架页，每个页面又使用了[frame]标签定义，同时应该使用定义浏览器不支持框架时显示的内容。
1、frameset：框架标签
rows 横向分割 ，定义了框架含有多少列与列的大小(每个值使用逗号分隔),取值为象素px或者百分比%
cols 纵向分割，定义了框架含有多少行与行的大小(每个值使用逗号分隔),取值为象素px或者百分比%
表示自适应尺寸
<frameset rows="10%,,50px"> 头部占10%、底部占50px、中间高度自适应
2、使用frame标签嵌套其他html页面 。
3、使用nresize属性固定frame的尺寸。
4、在frame中设置name属性==该页面的名称：使用如在left.html中将a标签链接内容在right.html中显示
框架标签的使用.png
一、index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="10%,*,50px">
<frame src="top.html" noresize="noresize"/>
<frameset cols="30%, *">
<frame src="left.html" noresize="noresize"/>
<frame src="right.html" name="Right"/>
</frameset>
<frame src="bottom.html" noresize="noresize"/>
</frameset>
<noframes>
<body>
梦之都使用了框架技术，但是您的浏览器不支持框架，
请升级您的浏览器以便正常访问梦之都。
</body>
</noframes>
</html>
二、top.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上方页面</title>
</head>
<body bgcolor="palevioletred">
上方
</body>
</html>
三、bottom.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下方页面</title>
</head>
<body bgcolor="red">
下方
</body>
</html>
四、left.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左侧页面</title>
</head>
<body bgcolor="orangered">
<a href="http://www.mop.com" target="Right">猫扑</a>
<a href="http://www.dapenti.com" target="Right">打喷嚏</a>
<a href="http://www.cnbeta.com" target="Right">cnbeta</a>
<a href="http://www.51aspx.com" target="Right">51.aspx</a>
</body>
</html>
五、right.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>右侧页面</title>
</head>
<body bgcolor="blue">
right
</body>
</html>
网友评论