Web前端-framsets框架

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013055213/article/details/79820569

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

猜你喜欢

转载自blog.csdn.net/u013055213/article/details/79820569
今日推荐