小贝学习html--框架

最新推荐文章于 2022-12-22 09:15:24 发布

脚本小子-小贝

最新推荐文章于 2022-12-22 09:15:24 发布

阅读量466

点赞数

分类专栏： xhtml 文章标签： html xhtml 框架 url

本文链接：https://blog.csdn.net/u014795720/article/details/40055005

版权

xhtml 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

html--框架

导航
1.多窗框的基本结构
2.嵌套多窗体设置
3.多框架与超链接
4.悬浮窗体的设置

简介:浏览器视窗本身就是一个框架，网页就是显示在该单一的框架内，这里将介绍另一种网页呈现的方式，那就是可将原先单一的框架分割成多个框架，且每个框架中可以分别显示出指定的网页，当然这种框架仍然是结构于单一的视窗中。

1、多窗框的基本结构
格式：
<frameset>
<frame>
<frame>
<frame>
</frameset>
功能说明:<frameset>用来设置多窗框结构的声明,不能为body共相处
<frameset>下的属性：
属性名称属性值     说明
cols    像素       设置直排的多窗框环境
        百分比     同上
rows    像素       设置横排的多窗框环境
        百分比     同上
border 像素       边框的宽度
framespacing 像素页面与页面的边距
属性格式：
<frameset cols=”120,80,120”>
<frameset cols=”20%,40%,20%”>
<frameset cols=”40%,*,*”>
<frameset rows=”120,80,120”>
<frameset rows=”20%,40%,20%”>
<frameset rows=”20%,*,*”>
<frame> 下的属性：
属性名称     属性值   说明
src         URL     链接的页面
noresize    true    允许浏览器自行改变框架大小
            false   不允许
scrolling   yes     不管网页内容的大小，都出现滚动条
            no      不管网页内容的大小，都不现滚动条
            auto    浏览器自动判断，是否需要滚动条
marginheight 像素    设置垂直方向，窗体内容与边界的距离
marginwidth 像素     设置水平方向，窗体内容与边界的距离
frameborder 0\1     不出现框体边/出现窗体边线
属性格式：
<frame src=”URL” >
<frame noresize>
备注: frameset不能与body共处于同一页面

2、嵌套多窗体设置：
格式：
<frameset rows="20%,80%">
<frame src="URL">
<frameset cols="20%,80%">
<frame src="URL">
<frame src="URL">
</frameset>
</frameset>

3、多框架与超链接
框架式网站的好处就是在同一张页面可以显示多个页面，而且可以跟方便的进行链接。常用于后台管理界面
相关属性说明：
<frame> 的命名属性：
格式：<frame name=”窗体名称” >
<a>超链接 <a href= ”URL” target= ” 窗体名称”>

4、悬浮窗体的设置
格式:<iframe>…</iframe>
功能:设置悬浮窗框
属性名称属性值说明
height 像素/% 绝对/相对高度
width   像素/% 绝对/相对宽度

其余属性除了 noresize 外, 其他都和 frameset 一样.

例子1:

<html>
<head>
	<meta name="keywords" content="HTML框架"/>
	<meta name="description" content="HTML框架"/>
	<meta name="author" content="xiaobei qq:2801616735"/>
	<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
	<title>2014-10-13 HTML框架</title>
</head>
<body>
	<ul>
    	<li>1.多窗框的基本结构</li>
        <li>2.嵌套多窗体设置</li>
        <li>3.多框架与超链接</li>
        <li>4.悬浮窗体的设置</li>
    </ul>
    <h2>1、多窗框的基本结构</h2>
    <p style="border:1px #FF0000 dashed;">
    	<frameset><br/>
        	<frame src="url"><br/>
            <frame src="url"><br/>
        </frameset>
    </p>
    <hr/>
    <h2>2、嵌套多窗体设置</h2>
    <p style="border:1px #FF0000 dashed;">
    	<iframe src="http://localhost/xhtml/frameset.html" width="100%" height="100%"></iframe>
    </p>
    <hr/>
    <h2>3、多框架与超链接</h2>
    <p style="border:1px #FF0000 dashed;">
    	<iframe name="iframe" src="http://www.jd.com" width="100%"></iframe><br/>
        <a href="http://www.jd.com" target="iframe">京东</a>    <a href="http://www.dangdang.com" target="iframe">当当</a>
    </p>
</body>
</html>

例子2:

<html>
<head>
	<meta name="keywords" content="HTML框架"/>
	<meta name="description" content="HTML框架"/>
	<meta name="author" content="xiaobei qq:2801616735"/>
	<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
	<title>2014-10-13 HTML框架</title>
</head>
<frameset cols="40%,60%" frameborder="0">
	<frame src="http://localhost/xhtml/a.html" frameborder="0" noresize scrolling="no">
    <frameset rows="30%,70%">
    	<frame src="http://localhost/xhtml/img.html">
        <frame src="http://localhost/xhtml/table.html">
    </frameset>
</frameset>
<noframes>
<body>
	无法使用框架frameset
</body>
</noframes>
</html>

脚本小子-小贝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小贝学习html--框架

框架导航1.多窗框的基本结构2.嵌套多窗体设置3.多框架与超链接4.悬浮窗体的设置简介:浏览器视窗本身就是一个框架，网页就是显示在该单一的框架内，这里将介绍另一种网页呈现的方式，那就是可将原先单一的框架分割成多个框架，且每个框架中可以分别显示出指定的网页，当然这种框架仍然是结构于单一的视窗中。1、多窗框的基本结构格式：功能说明
复制链接

扫一扫