当前位置:首页 > 分享 > 正文内容

如何制作框架网页?

访客3年前 (2022-09-13)分享1394

在学习web前端的时候,会学习到关于框架的内容,框架可以将同一个页面分成不同的几部分,每一部分加载不同的网页,我教大家实现一个页面分成两部分,点击左边部分的链接在右边部分显示

操作方法

  • 01

    新建一个网页文件frame.html,后缀名是html,用sublime Text打开

  • 02

    然后写上网页的基本结构,内容如下<!DOCTYPE html><html><head><meta charset="utf-8"><title>1</title></head><body>您的浏览器不支持框架</body></html>

  • 03

    框架标签必须卸载head标签中,在head标签中添加如下内容<frameset cols="20%,80%" border="1"><frame src="./left.html" name=""></frame><frame src="https://zhinan.sogou.com/" name="right"></frame></frameset>

  • 04

    在当前目录下新建一个网页文件,名字必须和上面的框架源代码中使用的名字想通过,这里是left.html,然后写上如下内容<!DOCTYPE html><html><head><meta charset="utf-8"><title>left</title></head><body><ul><li><a href="https://zhinan.sogou.com/" target="right">首页</a></li><li><a href="https://wenwen.sogou.com/?pid=zn.wenwen&ch=zn.daohang.wenwen&src=zhinan" target="right">问问</a></li><li><a href="http://pic.sogou.com/" target="right">图片</a></li></ul></body></html>

  • 05

    使用浏览器打开frame.html文件,结果如下

  • 06

    点击左边的文件,右边就会显示结果

扫描二维码推送至手机访问。

版权声明:本文由冒牌码农发布,如需转载请注明出处。

本文链接:http://www.xxbyc.cn:1223/post/1913.html

分享给朋友:

“如何制作框架网页?” 的相关文章

小米商城中抢红米的妙招

小米商城中抢红米的妙招

操作方法01近段时间,总是有人在身边说要去抢小米手机,可是一些朋友压根就不知道要怎么去抢购。接下来,小编就介绍一下在小米商城中抢购红米手机的妙招吧!有需要的朋友可以参考一下。1、下载安装小米商城至手机,安卓手机都可以安装。小米商城2、使用小...

如何废物利用制作花盆

如何废物利用制作花盆

平常我们身边总有很多废弃的饮料瓶,今天我们就来将它们做成花瓶种花吧。操作方法01先找到一个废弃的饮料瓶,比如脉动或者雪碧,农夫山泉,可乐的瓶子。02将饮料瓶的二分之一剪掉,可以成为两个花盆。03将其中带有饮料瓶底部的那半个瓶子在底部打孔,好...

胖脸女生适合什么样的发型

胖脸女生适合什么样的发型

可爱的女生会因为自己脸胖而不自信,现在小编给大家推荐几款胖脸女生适合的发型。操作方法01第一种,整齐的齐刘海加上长直发,减龄又时尚哦~同时可以修饰脸型,胖脸女生首选哦~02第二种,中分刘海加上卷卷中长发,此发型将不完美的脸型大部分遮盖,打造...

如何用纸钱叠心

如何用纸钱叠心

有不少土豪用百元大钞叠成爱心送给喜欢的女孩子,今天小编就来教一教不管是不是土豪的你叠爱心。操作方法01将百元大钞的长边向另一条长边对折,向上和向下分别折一次,打开后有四道折痕。02将百元大钞对折,将两条折痕挤压在一起,对折的两面都要如此操作...

睡前十分钟减肥瑜伽,睡前减肥瑜伽动作?

睡前十分钟减肥瑜伽,睡前减肥瑜伽动作?

睡前十分钟,充分把握时间,也能练习瑜伽减肥,还能促进睡前。那么,适合在睡前练习的瑜伽动作有哪些呢?操作方法01动作一站直,双脚打开,与肩同宽,右手握住左手臂的根部,用力拉伸左手臂,感受酸痛感02动作二用力吸气,两手臂向上伸展,尽量让手臂根部...

什么是 Web Worker?

什么是 Web Worker?

好多人不知道什么是Web Worker,今天我就和大家说一说操作方法01web worker 是运行在后台的 JavaScript,不会影响页面的性能。02什么是 Web Worker?当在 HTML 页面中执行脚本时,页面的状态是不可响应...