html页面如何划分部分,【HTML】Frameset 的使用 来看看我是怎么划分网页的吧!-程序员宅基地

技术标签: html页面如何划分部分  

1.一个简单的 HTML 文件

一个普通 HTML 文件的结构可以非常简单,你看:

标题

网页内容

我们可以把以上所示代码保存在一个后缀为.html的文件里(比如demo.html),然后双击在浏览器打开就可以看到效果了。

05c3a0ad81cc9eb7b6377cb35ecf671a.png

大家可以看到,网页内容是写在

标签之间的,body就好像是一个盛放网页内容的容器,也就是我们浏览网页时所能看到的部分。

某人说了,兄弟你这body不好使啊,我要是想同时看三部片 三篇文章还得打开三个网页来回切换不方便啊,能不能给我整到一个页面里,方便我“学习”!

2.body 的替身 frameset

你body干不了的事,我frameset可以,滚开,我上!

标题

如此,body被干下去了,frameset说了,一山不容二虎,你我必走一个。

不能将

标签与 标签同时使用!

但是这frameset虽然强大,但它需要的条件也多,要想一个页面改成同时显示三个页面,就得划分一下地盘,既然是划地盘,你得告诉我按什么比例去划分吧。

所以再给它加个属性,给我竖着分,各占50%:

给我横着分,上边40%,剩下的(*)是下边:

地盘划分完成了,里面该显示片 学习内容了,frameset又说了,显示可以,不要在我这里乱涂乱画,你有两个区域,给你分配两个秘书(frame),把你要展示的那个什么片的地址,不是,学习内容,告诉我的秘书(frame的src),他们会帮你显示的,其它的就不用你操心了。

那就左边显示百度,右边显示hao123吧:

da1e0afc18ca401c0612ad41d265ca97.png

还真可以,把第二种情况给我看看:

869bb1e8964a8d04e9f952df4578d735.png

嗯,现在好像挺好的了,但是这中间的分界线好像可以随便移动啊(鼠标放到分界线上可以左右或者上下拖动改变区域大小),那不行,你不能随便改变我的地盘大小,这时候秘书(frame)说了,给我点好处,我说了算:

给第一个秘书送上了noresize="noresize",现在第一个区域大小就定住了,第二个区域也就根据第一个的区域大小决定了,就一道墙,你动不了了,我还动啥。

某人:”别忘了我们的约定,我要同时显示三个页面。“

frameset:“显示三个是可以,但总共就这么点地方,还被你分成了两个部分,那你说接下来怎么分。”

某人:”把上面的部分再给我分成两部分。“

frameset:“没问题,那我得再叫个兄弟“。

可以看到,frameset为了完成任务,把它的第一个秘书给开除了,让它的兄弟顶上,相当于又扮演它的角色,而且还有两个秘书。

因为第一个收礼的秘书(frame)被开除了,这上下区域的分界线又可以随便被更改了,没办法,给掌管上下地盘的第二个秘书再送一次吧,又想了想,还是一次性办利索吧,给掌管左右区域大小的秘书也送上点礼吧。

77a920a87a2b54c3f60ed4f3de904181.png

被弄下岗的body看了之后很生气,凭什么,你frameset虽然牛B,但是不一定所有浏览器都认可,而我body才是公认的男神!

如果浏览器不支持框架,给不支持框架的浏览器添加 标签。

那就给body点面子,当浏览器不支持frameset的时候,再找个助理把body请出来给大家说明一下。

您的浏览器不支持框架

不过,假如你添加包含一段文本的 标签,就必须将这段文字嵌套于 标签内。

完。

本文地址:https://blog.csdn.net/ZhangJiWei_2019/article/details/107541378

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_30114439/article/details/117818846

智能推荐

python编码问题之encode、decode、codecs模块_python中encode在什么模块-程序员宅基地

文章浏览阅读2.1k次。原文链接先说说编解码问题编码转换时,通常需要以unicode作为中间编码,即先将其他编码的字符串解码(decode)成unicode,再从unicode编码(encode)成另一种编码。 Eg:str1.decode('gb2312') #将gb2312编码的字符串转换成unicode编码str2.encode('gb2312') #将unicode编码..._python中encode在什么模块

Java数据流-程序员宅基地

文章浏览阅读949次,点赞21次,收藏15次。本文介绍了Java中的数据输入流(DataInputStream)和数据输出流(DataOutputStream)的使用方法。

ie浏览器无法兼容的问题汇总_ie 浏览器 newdate-程序员宅基地

文章浏览阅读111次。ie无法兼容_ie 浏览器 newdate

想用K8s,还得先会Docker吗?其实完全没必要-程序员宅基地

文章浏览阅读239次。这篇文章把 Docker 和 K8s 的关系给大家做了一个解答,希望还在迟疑自己现有的知识储备能不能直接学 K8s 的,赶紧行动起来,K8s 是典型的入门有点难,后面越用越香。

ADI中文手册获取方法_adi 如何查看数据手册-程序员宅基地

文章浏览阅读561次。ADI中文手册获取方法_adi 如何查看数据手册

React 分页-程序员宅基地

文章浏览阅读1k次,点赞4次,收藏3次。React 获取接口数据实现分页效果以拼多多接口为例实现思路加载前 加载动画加载后 判断有内容的时候 无内容的时候用到的知识点1、动画效果(用在加载前,加载之后就隐藏或关闭,用开关效果即可)2、axios请求3、map渲染页面4、分页插件(antd)代码实现import React, { Component } from 'react';//引入axiosimport axios from 'axios';//引入antd插件import { Pagination }_react 分页

随便推点

关于使用CryPtopp库进行RSA签名与验签的一些说明_cryptopp 签名-程序员宅基地

文章浏览阅读449次,点赞9次,收藏7次。这个变量与验签过程中的SignatureVerificationFilter::PUT_MESSAGE这个宏是对应的,SignatureVerificationFilter::PUT_MESSAGE,如果在签名过程中putMessage设置为true,则在验签过程中需要添加SignatureVerificationFilter::PUT_MESSAGE。项目中使用到了CryPtopp库进行RSA签名与验签,但是在使用过程中反复提示无效的数字签名。否则就会出现文章开头出现的数字签名无效。_cryptopp 签名

新闻稿的写作格式_新闻稿时间应该放在什么位置-程序员宅基地

文章浏览阅读848次。新闻稿是新闻从业者经常使用的一种文体,它的格式与内容都有着一定的规范。本文将从新闻稿的格式和范文两个方面进行介绍,以帮助读者更好地了解新闻稿的写作_新闻稿时间应该放在什么位置

Java中的转换器设计模式_java转换器模式-程序员宅基地

文章浏览阅读1.7k次。Java中的转换器设计模式 在这篇文章中,我们将讨论 Java / J2EE项目中最常用的 Converter Design Pattern。由于Java8 功能不仅提供了相应类型之间的通用双向转换方式,而且还提供了转换相同类型对象集合的常用方法,从而将样板代码减少到绝对最小值。我们使用Java8 功能编写了..._java转换器模式

应用k8s入门-程序员宅基地

文章浏览阅读150次。1,kubectl run创建pods[root@master ~]# kubectl run nginx-deploy --image=nginx:1.14-alpine --port=80 --replicas=1[root@master ~]# kubectl get podsNAME READY STATUS REST...

PAT菜鸡进化史_乙级_1003_1003 pat乙级 最优-程序员宅基地

文章浏览阅读128次。PAT菜鸡进化史_乙级_1003“答案正确”是自动判题系统给出的最令人欢喜的回复。本题属于 PAT 的“答案正确”大派送 —— 只要读入的字符串满足下列条件,系统就输出“答案正确”,否则输出“答案错误”。得到“答案正确”的条件是: 1. 字符串中必须仅有 P、 A、 T这三种字符,不可以包含其它字符; 2. 任意形如 xPATx 的字符串都可以获得“答案正确”,其中 x 或者是空字符串,或..._1003 pat乙级 最优

CH340与Android串口通信_340串口小板 安卓给安卓发指令-程序员宅基地

文章浏览阅读5.6k次。CH340与Android串口通信为何要将CH340的ATD+Eclipse上的安卓工程移植到AndroidStudio移植的具体步骤CH340串口通信驱动函数通信过程中重难点还存在的问题为何要将CH340的ATD+Eclipse上的安卓工程移植到AndroidStudio为了在这个工程基础上进行改动,验证串口的数据和配置串口的参数,我首先在Eclipse上配置了安卓开发环境,注意在配置环境是..._340串口小板 安卓给安卓发指令