Web前端-framsets框架

xiaoxiao2021-02-28  35

今天开始进军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嵌套,两者只能取其一.

转载请注明原文地址: https://www.6miu.com/read-2350125.html

最新回复(0)