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

HTML实训课程笔记_04

2014-05-16 19:54 302 查看

frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset
元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。其作用是指定一个框架集，用于组织多个框架和嵌套框架集。

注意：

1.frameset 元素是 frame元素的容器。HTML 文档可包含 frameset 元素或
body元素之一，而不能同时包含两者。

2.不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。不过，如果需要为不支持框架的浏览器添加一个 <noframes></noframes> 标签，把 <body></body> 放在<noframes></noframes>标签中。

案例效果：

1.框架布局效果

2.当点击个人链接的时候的效果图如下：

实现的代码：

1.index.html页面代码如下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>主页面</title>
</head>

<frameset rows="20%,*"><!--框架把整体页面按照垂直方向分为两块，第一个块占20%,第二块占用剩余的所有部分(*代表所有)-->
<frame src="top.html"/><!--用frame标签设置第一部分 20%部分-->
<frameset cols="20%,80%"><!--框架把第二块按照水平分成了两块，第一块占用20% 第二块占用80%-->
<frame src="left.html"/><!--用frame标签设置第二块框架的左边-->
<frame name="mainFrame" src="main.html"/><!--用frame标签设置第二块框架的右边-->
</frameset>
</frameset>

<noframes><!--如果遇到不支持框架结构的浏览器 显示body部分-->
<body>
如果遇到不支持框架结构的浏览器，此时就需要用到该标签来设置替换的内容，并告诉浏览者其浏览器无法打开框架页面。
</body>
</noframes>
</html>

2.left.html页面部分

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>left</title>
</head>

<body bgcolor="#FF00FF">
<h3 align="center">我是左面</h3>
<h5>
<!--用target属性设置页面打开的位置，在框架中打开-->
<a href="gerenjieshao.html" target="mainFrame">个人介绍</a>
</h5>
</body>
</html>

3.top.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>top</title>
</head>
<body bgcolor="#FFFF00">
<h3 align="center">我是上面</h3>
</body>
</html>

4.main.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>main</title>
</head>

<body bgcolor="#0000CC">
<h3 align="center">我是主要部分</h3>
</body>
</html>

5.gerenjieshao.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<p>
陈红军：人称军哥。讲课幽默。人见人爱，花见花开，车见车爆胎！
</p>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航