8-框架_8d8hh框架-CSDN博客

本文链接：https://blog.csdn.net/skyandairchild/article/details/52718289

多框窗的基本结构
嵌套多框体设置
多框架与超链接
悬浮窗体的设置

浏览器视窗本身就是用于显示网页的单一框架，可将原先盛放单一框架的视窗分割成多个框架，每个框架分别显示指定的网页。

1. 多框窗的基本结构

格式 :

    <frameset>     <!--此html页面不包含<body>标签-->
        <frame src="URL">  <!--URL指向html页面-->
        <frame src="URL">
        ...
    </frameset>

frameset下的属性 :

属性名	属性值	说明
cols	像素或百分比	设置直排多框窗环境
rows	像素或百分比	设置横排多框窗环境
frameborder	0或1	border或者framespacing是否生效
border	像素	边框的宽度
framespacing	像素	框架间距

应用范例：

<frameset cols="300,350,3000">
<frameset cols="30%,40%,30%">
<frameset cols="40%,*,*">
<frameset rows="300,350,3000">
<frameset rows="30%,40%,30%">
<frameset rows="40%,*,*">

frame的属性 :

属性名	属性值	说明
src	URL	指向框架包含的网页
noresize	noresize	不允许改变框架大小
scrolling	auto	浏览器自动判断是否需要滚动条
	yes	不管网页内容的大小，都出现滚动条
	no	不管网页内容的大小，都不出现滚动条
marginheight	像素	设置垂直方向框架边界与内容的距离
marginwidth	像素	设置水平方向框架边界与内容的距离
frameborder	0或1	是否出现框体边
name	字符串	框体的名称

2. 嵌套多框体设置

格式 :

    <frameset rows="20%，80%">
        <frame src="URL">
        <frameset cols="20%,*">
            <frame src="URL">
            <frame src="URL">
        </frameset> 
    </frameset>

3. 多框架与超链接

使用超链接可以方便的在一个视窗的多个页面间互相链接
相关属性说明：
<frame>的命名属性：<frame name="框体名称">
<a>超链接 <a href="URL" target="框体名称">

关于超链接<a> 的target 属性的进一步了解

属性名称	属性值	说明
target	_blank	新视窗载入目标文档
	_self	本框架或视窗载入目标文档
	_top	浏览器视窗清除包含本链接的多框架后载入目标文档
	_parent	父框架或顶级框架载入目标文档
	字符串	即框体名称，在此指定的框架载入目标文档

4. 悬浮窗体的设置

格式 : <iframe> ...</iframe>
功能 :

属性名	属性值	说明
width	像素或者百分比	绝对/相对高度
height	像素或者百分比	绝对/相对宽度
name	字符串	框体的名称
scrolling	auto	浏览器自动判断是否需要滚动条
	yes	不管网页内容的大小，都出现滚动条
	no	不管网页内容的大小，都不出现滚动条
frameborder	0或1	是否出现框体边
marginheight	像素	设置垂直方向框架边界与内容的距离
marginwidth	像素	设置水平方向框架边界与内容的距离

悬浮窗体实例 :

<html>
    <head><title>我的悬浮窗体设置实验</title></head>
    <body>
        <table  width="500" height="600">
                <tr><td height="100" colspan="2">标题</td> </tr>
                <tr>
                    <td width="80" valign="top" align="center">
                    <a href="1.html"target="mainiframe">主页面</a><br>
                     <a href="表格实验.html" target="mainiframe">第一页</a><br>
                     <a href="表格边框实验.html" target="mainiframe">第二页</a><br>
                     <a href="清单列表实验.html" target="mainiframe">第三页</a><br>
                    </td>
                    <td>
                         <iframe name="mainiframe" width="100%" height="100%" scrolling="no" frameborder="0"  >
                         </iframe><!--iframe 需要加结束标签浏览器才能正常显示-->
                    </td> 
                </tr>
        </table>
    </body>
</html>