首页 > 代码库 > 常见页面布局方式（三种框架集）
常见页面布局方式（三种框架集）
frameset框架集
Frameset标签可定义一个框架集，它用来组织多个窗口（框架），每个框架有独立的html文档，在石油frameset是，不可以同时存在body标签，他和body标签是同级的。
多个框架组成了一个框架集
1 框架集标签（frameset）第一如何将窗口分割为框架
2 每个frameset 第一了一系列行货列
3 rows、columns的值规定了每行或每列占据屏幕的面积
frameset的一些属性
cols“”把一个浏览器窗口按列进行切割，也就是把浏览器竖着切分
cols“20%，200px，*”上半部分战20%，中间部分占200px，剩下的为第三部分。
rows=“20%，200px，*”以行方式分割，横着划分
border=“1”设置间距为1等等
bordercolor=“red”框架边的颜色
frameborder=“no/yes” 是否显示边框线（也可以写0或1)
noresize=“noresize”不可以重新设置大小（两个内容之间不可以移动了）浏览器之间解析方式不太一样最好在frame单独写，而不是在frameset上写
它们都在frameset标签上显示。
框架标签<frame />
frame标签定义了放置在每个框架中的HTML文档。它通过引用要显示的HTML文档的路径，他是自闭合标签。
frame常用属性
1 name设置框架名称
2 src 设置此框架要显示的网页名称或路径。此为必须设置的属性。
3 scrolling=“” 设置是否要显示滚动条。设定值为auto，yes，no。不可以用0 1来写值：
！不能将body和frameset标签同时使用，但是如果添加包含一段文本的<noframeset>标签，就必须得将这段文字嵌套于<body>标签内：
<frameset rows="200px,*" border="1" bordercolor="red">
<frame src="http://www.baidu.com" />
<frameset cols="30%,*">
<frame src="http://www.360.com" name="leftwindows" scrolling="no" />
<frame src="http://www.taobao.com" noresize=“noresize”/>
</frameset>
</frameset>
<noframes>
<body>
你的浏览器不支持frameset框架集
</body>
</noframes>
浏览器不支持框架集用norframes标签来显示，一般写咋frameset下面里面包含body标签。
例如百谷歌度网站，百度谷歌一起搜
iframe内联框架和框架集实例
<iframe>内联框架标签
iframe元素会创建包含另外一个文档的内联框架（即行内框架）。iframe是属于内联框架，他是body的子集。iframe作为一个普通元素放在body里，而frameset是代替了body元素
属性：
1width可设置内联框架的宽
2 height可设置高
3 name 设置框架名称
4 src设置页面的路径
例子：<a href="http://www.youdao.com: target="right">百度</a>
<iframe name="right" src="http://www.baidu.com" frameborder="1" width="400" hright="200">你的浏览器不支持iframe标签</iframe>
制作页面是没有写单位，都默认为像素。
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="http://www.jd.com" target="iframeName">点击</a>
<iframe name="iframeName" src="http://www.baidu.com" width="600" height="600" frameborder="0">你的浏览器不支持iframe标签</iframe>
</body>
</html>
通过target属性指向了iframe的名字所以页面会在iframe里面显示，如果不加target，就会在整个页面打开。
a标签的target属性值：
_blank，在新的窗口打开
_self，默认，在相同的框架中打开被连接文档
_parent，在父框架集中打开被连接文档（在最外面的frameset中打开）
_top，在整个窗口中打开
framename，通过名字在指定的框架中打开
可以应用的qq邮箱类型的，在左面点击在右面被打开如下：
list.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li><a href="htto://www.baidu.com" target="rightWindow">百度</a></li>
<li><a href="htto://www.360.com" target="rightWindow">360</a></li>
<li><a href="htto://www.taobao.com" target="rightWindow">淘宝</a></li>
<li><a href="htto://www.jd.com" target="rightWindow">京东</a></li>
</ul>
</body>
</html>
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<title></title>
</head>
<frameset rows="20%,*">
<frame src="http://www.baidu.com" />
<frameset rows="20%,*>
<frame src="http://www.mamicode.com/list.html" />
<frame name="rightWdow" src="http://www.youdao.com" />
</frameset>
</frameset>
</html>
显示如下：在左下点击的效果会在右面的框架里产生。
常见页面布局方式（三种框架集）