今天开始进军h5
虽然之前也学习过h5,但没有坚持下来.今天开始全面进攻h5了.基础的标签就不记录了,之前学过了,今天学习的是framsets.
- framsets的使用
- 注意
framsets的使用
这个框架主要是配合现在普通的网页展示效果,对网页进行分块操作的.
相当于把网页分成了3部分,标题banner是一部分,左边导航是一部分,右侧展示区域是另一部分.framsets把这3部分嵌套在一起就是我们看到的了.
外层页面
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content = "text/html;charset=utf-8"/>
<title>HTML框架-framsets</title>
<meta name="author" content = "zxx">
<meta name="Description" content = "首次进军h5">
<meta name="keywords" content = "加油">
</head>
<frameset rows = "30%,*">
<frame src = "top.html" name = "topFrame"></frame>
<frameset cols = "20%,*">
<frame name="leftFram" src="left.html" noresize="noresize"></frame>
<frame name="rightFram" src="page1.html"></frame>
</frameset>
</frameset>
<noframes>
<body>
<p>该浏览器不支持框架</p>
</body>
</noframes>
</html>
rows 和cols是将页面按照行或者列来进行划分的,可以是像素,%,*;
*表示其余模块划分后剩余的部分,有几部分下面就写几个framsets或者fram,他们之间可以嵌套
frame中的noresize是为了不让页面随意拖动的
noframes,我们在注意里面说
标题页面
<!DOCTYPE HTML>
<html>
<head>
<title>banner</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
<img src="banner.jpg">
</body>
</html>
导航栏页面
<!DOCTYPE HTML>
<html>
<head>
<title>leftFrame</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<style type="text/css">
body{
background-color: orange;
}
</style>
<body>
<p><a href="page1.html" target="rightFram">内容提要</a></p>
<p><a href="page2.html" target="rightFram">详细介绍</a></p>
<p><a href="page3.html" target="rightFram">总结汇报</a></p>
</body>
</html>
右侧展示的几个页面,以page1为例,page2,3,类似
<!DOCTYPE HTML>
<html>
<head>
<title>leftFrame</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
<p> 超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。
在本教程中,您将学习如何使用 HTML 来创建站点。
HTML 很容易学习!相信您能很快学会它!</p>
</body>
</html>
这样我们就可以实现页面的分模块浏览效果了
注意
下面我们来说一下noframe,这个是为了防止有的浏览器不支持这个框架而设置的.给用户一个提示.提示内容在body里面写.但是body不能喝framesets嵌套,两者只能取其一.