窗口框架frame(HTML前端)

一.窗口框架

作用:将网页分割为多个HTML页面,即将窗口分为多个小窗口,每个小窗口可以显示不同的页面,但是在浏览器中是一个完整的页面

基本语法

<frameset cols="" row=""></frameset><frame src="">   </frame><frame src=""> </frame><frame src="">  </frame>
</frameset>

cols表示列的分割

rows表示行的分割

注意框架中没有<body>标记

步骤流程

1.先建4个HTML

2.在frame.html网页中,分出三个小的网页,分为左 中 右,分别占30% 40% 30%,此时记得这里不要写body标记

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><frameset cols="30%,40%,30%"><frame src="left.html">   </frame><frame src="middle.html"> </frame><frame src="right.html">  </frame>
</frameset></html>

3.然后分别对左 中 右写上一点东西,

left.html:随便插入一张图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>left</p><img src="../week3/imges/B.jpg" alt="">
</body>
</html>

right.html:也是随便插入一张图片


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p> right </p><img src="../week3/imges/car1.jpg" alt="">
</body>
</html>

middle.html:写入了一些超链接

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><p>middle</p>  <p>刷题网站推荐:</p><p><a href="http://ybt.ssoier.cn:8088/">信息学奥赛一本通</a></p><p><a href="https://www.luogu.com.cn/"> 洛谷 </a></p><P><a href="https://codeforces.com/"> codeforces </a></P><p><a href="https://atcoder.jp/"> atcoder </a></p><p><a href="https://leetcode.cn/"> leetcode </a></p><p><a href="https://ac.nowcoder.com/">牛客</a></p><p><a href="https://www.acwing.com/">acwing</a></p></body>
</html>

整体布局是这样的

4.此时找到frame.html在浏览器中预览效果如下,我们可以看到,一个网页分为左中右三个小的网页了,并且三个小的网页显示的东西不同

我们将frame中的cols修改为rows时,效果是怎么样的呢?

那么网页就会成为上 中 下 排列

效果如下

课后作业

 

题目要求:

我们将制作如图显示的网页

首先要将网页分为上 中 下三个页面

但是中间那个页面我们要在细分

分为左边 右边 两个小网页

一共是五个网页

 然后我们在左边那个网页插入两个超链接,一个是个人简历,一个是兴趣爱好

当我们点击个人简历或者兴趣爱好时,右边那个网页会显示对应的个人个人简历或兴趣爱好

提示:

思考我们一共要建立多少个html?

4个小的网页 top bottom left right

还有自己的简历和兴趣爱好  resume hobby 

还有一个负责链接的框架frame.html

我们建立一个超链接,点击超链接在当前页面显示时,只要设置a标签的href即可

但是呢?我们要在另一个网页中显示,此时我们就要设置默认打开的网页,也就是a标签的target属性,记得先对要显示的网页设置一个name,方便指定网页打开

完整代码:

frame.html:


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><frameset rows="15%,70%,15%"><frame src="top.html"></frame><frameset cols="30%,70%"><frame src="left.html"></frame><!-- 这里要设置一下name的值,方便其他网页跳转过来就是以便满足从left.html点击,但是呢?在right.html中显示 --><frame src="right.html" name="r"> </frame>  </frameset> <frame src="bottom.html"></frame></frameset>
</html>

top.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><p>top</p><h1 align="center">你好呀</h1> 
</body>
</html>

bottom.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><p>bottom</p><p align="right">版权所有&copy;hover</p>    
</body>
</html>

left.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>left</p><!-- <img src="../week3/imges/B.jpg" alt=""> --><!-- target:表示打开的位置 --><p><a href="resume.html" target="r" >个人简介</a></p><p><a href="hobby.html" target="r">我的兴趣爱好</a></p>
</body>
</html>

right.html:


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p> right </p>
</body>
</html>

resume.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>个人简介</h1><p>姓名:hover</p><p>年龄:18</p>
</body>
</html>

hobby.html:


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><p>hobby</p><ul><li>看小说</li><li>跑步</li><li>写算法</li></ul>
</body>
</html>

完整效果

点击1,然后观察2里的内容变化,此时出现了个人简历

 点击我的兴趣爱好,将出现如何内容

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/141582.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

从汇编语言到高级语言:人类计算机科学的伟大探索

从20世纪中叶第一台电子计算机的诞生&#xff0c;到如今的智能设备遍布全球&#xff0c;计算机科学的发展历程是一部充满着人类探索精神的伟大史诗。计算机语言作为人类与机器交流的桥梁&#xff0c;见证并推动了这一切。从最早的汇编语言到如今多样的高级语言&#xff0c;我们…

内网渗透- 内网渗透的基本知识

攻击流程讲解 内网介绍 内网也指局域网&#xff0c;是指在某一区域内由多台计算机互联而成的计算机组&#xff0c;组网范围通常在数千米以内。在局域网中&#xff0c;可以实现文件管理、应用软件共享、打印机共享、工作组内的日程安排、电子邮件和传真通信服务等。内网是封闭的…

通过logstash同步elasticsearch数据

1 概述 logstash是一个对数据进行抽取、转换、输出的工具&#xff0c;能对接多种数据源和目标数据。本文介绍通过它来同步elasticsearch的数据。 2 环境 实验仅仅需要一台logstash机器和两台elasticsearch机器&#xff08;elasticsearch v7.1.0&#xff09;。本文用docker来模…

Puppet 部署应用(Puppet deployment application)

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:Linux运维老纪的首页…

FIB对芯片反向技术的贡献

目前由于国内在模拟集成电路设计领域的研究较为薄弱&#xff0c;芯片逆向分析便成为大多数模拟集成电路工程师基础实际模拟电路积累经验的有效途径&#xff0c;IC反向设计也成为推动国内集成电路设计进步的有效手段。在IC逆向分析与设计服务中&#xff0c;主要用FBI对IC线路进行…

8.4Prewitt算子边缘检测

基本原理 Prewitt算子是一种用于边缘检测的经典算子&#xff0c;它通过计算图像中像素值的&#xff08;一阶导数&#xff09;梯度来检测边缘。Prewitt算子通常包括两个3x3的卷积核&#xff0c;一个用于检测水平方向上的边缘&#xff0c;另一个用于检测垂直方向上的边缘。 示例…

深入理解数据分析的使用流程:从数据准备到洞察挖掘

数据分析是企业和技术团队实现价值的核心。 5 秒内你能否让数据帮你做出决策&#xff1f; 通过本文&#xff0c;我们将深入探讨如何将原始数据转化为有意义的洞察&#xff0c;帮助你快速掌握数据分析的关键流程。 目录 数据分析的五个核心步骤1. 数据获取常用数据获取方式 2. 数…

CentOS7更换阿里云yum更新源

目前CentOS内置的更新安装源经常报错无法更新&#xff0c;或者速度不够理想&#xff0c;这个时候更换国内的镜像源就是一个不错的选择。 备份内置更新源 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup 下载阿里云repo源&#xff08;需要系统…

Mysql InnoDB 存储引擎简介

InnoDB 存储引擎是 Mysql 的默认存储引擎&#xff0c;它是由 Innobase Oy 公司开发的 Mysql 为什么默认使用 InnoDB 存储引擎 InnoDB 是一款兼顾高可靠性和高性能的通用存储引擎 在 Mysql 5.5 版本之前&#xff0c;默认是使用 MyISAM 存储引擎&#xff0c;在 5.5 及其之后版…

监控系列之-prometheus部署说明

一、Prometheus介绍 Prometheus是一款开源的监控系统&#xff0c;主要用于收集、存储和查询时间序列数据&#xff0c;以便于对系统进行监控和分析Prometheus的架构由四个主要组件组成&#xff1a; 1、Prometheus Server &#xff1a;Prometheus Server是Prometheus的核心组件&a…

一步一步自制py脚本并且并且修改为exe可执行文件教学外附带SHA-1解密exe文件资源

第一步&#xff1a;安装 Python 下载 Python&#xff1a;访问 Python 官网 下载并安装最新版本的 Python。安装时选择添加到环境变量 PATH&#xff1a;在安装过程中&#xff0c;确保勾选“Add Python to PATH”选项。 第二步&#xff1a;编写 Python 脚本 创建一个新的 Pyth…

人脸防伪检测系统源码分享

人脸防伪检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Vis…

✔2848. 与车相交的点

代码实现&#xff1a; 方法一&#xff1a;哈希表 #define fmax(a, b) ((a) > (b) ? (a) : (b))int numberOfPoints(int **nums, int numsSize, int *numsColSize) {int hash[101] {0};int max 0;for (int i 0; i < numsSize; i) {max fmax(max, nums[i][1]);for …

Spring4-IoC3-手写IoC

Spring框架的IoC是基于Java反射机制实现的 Java反射机制是在运行状态中&#xff0c;对于任意一个类&#xff0c;都能够知道这个类的所有属性和方法&#xff1b;对于任意一个对象&#xff0c;都能够调用它的任意方法和属性&#xff0c;这种动态获取信息以及动态调用对象方法的功…

学习大数据DAY57 新的接口配置

作业  完成 API 接口和文件的接入, 并部署到生产调度平台, 每个任务最后至少 要有两条 不报错 的日志, 报错就驳回作业  作业不需要复制日志 API Appliation Program Interface 应用程序接口 > JSON 的地址 客户需求: 把 https://zhiyun.pub:9099/site/c-class…

【QT】定时器使用

文章目录 关于 Qt 定时器使用的注意细节总结实例-检查工具使用周期时间是否合理UI设计头文件 remind.h源文件 remind.cpp实现效果 关于 Qt 定时器使用的注意细节总结 一、创建与初始化 使用 QTimer 类来创建定时器。可以在构造函数中指定父对象&#xff0c;确保定时器在正确的…

电子电气架构——中央计算的软件定义汽车架构

我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 屏蔽力是信息过载时代一个人的特殊竞争力&#xff0c;任何消耗你的人和事&#xff0c;多看一眼都是你的不…

台风,也称为热带气旋,是一种在热带海洋上形成的强烈风暴系统。台风的形成需要满足以下几个条件:

台风&#xff0c;也称为热带气旋&#xff0c;是一种在热带海洋上形成的强烈风暴系统。台风的形成需要满足以下几个条件&#xff1a; 1. **温暖的海水**&#xff1a;台风通常在海面温度至少达到26.5C&#xff08;79.7F&#xff09;的海域形成&#xff0c;因为温暖的海水能够提供…

XShell快速连接虚拟机(Ubuntu系统)

目录 前言 一 (XShell)(虚拟机 )(Ubuntu)下载 二 虚拟机的ip查找 三 虚拟机中安装连接环境 四 开启ssh-server服务 五 验证是Ubuntu是否开启ssh-server服务 六 连接XShell软件 前言 对于刚开始探索 Linux 世界的新手来说&#xff0c;拥有一台自己的服务器可能并不现实。幸运的…

学习大数据DAY58 增量抽取数据表

作业 1 SQL 优化的常见写法有哪些 - 面试经常被问 使用索引&#xff1a;合理创建和使用索引是提高查询效率的关键。索引可以加速数据的检 索速度&#xff0c;但是索引也会占用额外的存储空间&#xff0c;并且在插入、删除和更新操作时会 有额外的开销。 避免全表扫描&…