首先,我希望在你的目录下,有4个网页,各自显示不同的内容。

如图所示:

1.html显示“火影忍者”

2.html显示“英雄联盟”

3.html显示“嵌入式开发、网页开发、安卓开发”

4.html显示“alsp”

OK,来介绍下frameset的语法

<frameset rows="第一个框架窗口的高度,第二个框架窗口的高度......"

cols="第一个框架窗口的宽度,第二个框架窗口的宽度"......>

所谓框架集属性frameset,其目的就是用来将网页分成什么样子。如图所示,通过frameset将整个页面分成三个部分:1)上面是头部,用来放置logo等2)左侧是目录架构,用来放置目录3)右侧是要显示内容懂了吧,frameset的作用,就是用来将整个页面分成你想要的模块和架构;

这里,又要提到一个窗口属性,frame

用<frameset>将整个页面分割成N个块,而每一个块,就是用frame来表示,其就是用来表示一个单独的页面。

其语法:

<frame src="页面的源地址">

下面看例子。

<frameset rows="100,200,800" frameborder="yes" border="1" framespacing="1"><frame src="2.html"/><frame src="3.html"><frame src="4.html"></frame>

再来看一下效果图

可以看到,整个页面被分成了3分。

而用frame指定的页面也显示了出来。

其中,

frameborder:用来表示显示边框

framespacing:表示边框的宽度

下面再来看一个例子:

<frameset cols="100,200,900" frameborder="yes" border="1" framespacing="1"><frame src="2.html"/><frame src="3.html"><frame src="4.html"></frame>

看效果图,整个页面也被分成了3分,但是,是横向的。

再来看最后一个例子。

<frameset rows="30%,*" cols="*" frameborder="yes" border="1" framespacing="1"><frame src="2.html"/><frameset cols="30%,70%" frameborder="yes" framespacing="1"><frame src="3.html"><frame src="4.html"></frame>

看效果图

被分成了3分,但是和之前的都不一样。

这里,rows="30%,*"的意思是,将页面分成上部分30%,下部分用“*”表示为还没有分配。

cols也是这个意思。

然后,通过frame将2.html页面放在其中。

之后,再用frameset将下部分分成左右两部分,放上3.html页面和4.html页面,就会出现上述的效果了

使用框架结构之frameset的更多相关文章

  1. HTML网页制作:[12]使用框架结构之frameset

    首先,我希望在你的目录下,有4个网页,各自显示不同的内容. 如图所示: 1.html显示“火影忍者” 2.html显示“英雄联盟” 3.html显示“嵌入式开发.网页开发.安卓开发” 4.html显示 ...

  2. HTML笔记(四) 框架

    通过框架,可以在一个窗口显示多个页面.而所谓的框架,就是指每一份HTML文档. 框架结构标签<frameset> 定义如何将窗口分割为框架. frameset定义了一系列的行列. rows ...

  3. HTML框架标签

    与HTML框架有关的标签主要有三种: <frameset>框架结构标签 <frame>框架标签 <iframe>内联框架标签 一. 先来说第一种框架结构标签 < ...

  4. HTML简单介绍及举例

    超文本标记语言(Hyper Text Markup Language,简称HTML)是为"网页创建和其他可在网页浏览器中看到的信息"设计的一种标记语言.HTML被用来结构化信息,也 ...

  5. html常用的知识点以及混合框架

    html中:   <hr/> 在页面中创建水平线 例如:   <p> p标签是定义段落   > alt 作为可预备可替换信息,在无法加载图片时显示文字信息   定义htm ...

  6. 恶补web之一:html学习(1)

    发现以前欠下的web知识太多鸟,只有重头开始好好学吧,恶补第一站就是html知识啦! html指的是超文本标记语言,它不是编程语言,而是一种标记语言;标记语言是一套标记标签(markup tag),h ...

  7. html制作简单框架网页 实现自己的音乐驿站 操作步骤及源文件下载 (播放功能限mp3文件)

    使用HTML语言来设计制作 Hyper Text Markup Language 超文本标记语言 这门语言的特点就是标记,就是把所有的命令单词用<>标记起来,就可以发挥作用 还有一个特点, ...

  8. HTML5学习手册

    目录 HTML 简介 HTML 简介 什么是 HTML? HTML 标签 HTML 文档 = 网页 基本的 HTML 标签 - 四个实例 HTML 标题 HTML 段落 HTML 链接 HTML 图像 ...

  9. 【一起来烧脑】一步学会HTML体系

    [外链图片转存失败(img-zk4xNuy1-1563431241992)(https://upload-images.jianshu.io/upload_images/11158618-4e9cac ...

随机推荐

  1. ansible删除目录下所有内容

    使用ansible的同学都知道,ansible只支持新增删除具体的某个文件夹或者文件,如下所示: 1. 创建目录,删除整个目录 - name: Create a directory if it doe ...

  2. cmd定时自动弹窗命令

    at 17:00 /e:m,t,w,th,f,s,su msg * 弹窗文字

  3. Ka/ Ks|同义替换的三种路径|kaks_Calculator|

    生命组学 研究old gene 和 young gene CAI选择信号:CGmutation信号 Neutrality plot:CG3与GC1.GC2的关系:平:mutation:正相关:sele ...

  4. Springmvc接收数组参数

    Springmvc接收数组参数,必须添加@RequestParam注解 注解格式@RequestParam(value="前端参数名[]") 示例: controller端的代码 ...

  5. 2019 Python工程师平均薪资22K,又涨了11.9%!

    转行的同学最关心的就是Python的薪资情况了.今天我们就来具体看一下Python现在的薪资情况. 这是一张网友统计的Python工程师工资情况图表.详细说明了现在Python工程师在各个城市的薪资情 ...

  6. 宝塔面板,Typecho,Lsky Pro图床安装

    宝塔面板,Typecho,Lsky Pro图床安装 本文安装包:链接:https://cloud.cangye.me/s/l3i4avjl 密码是宝塔面板4个汉字拼音首字母小写(防止被爬) 一,宝塔面 ...

  7. ZJNU 1422 - 碰撞的小球

    完全弹性碰撞可以视作互相穿过 所以直接考虑只有单个小球的时候,从板子上滑下所需要的时间即可 最后以30000为界分开流读入与缓冲区优化的io方法 //Case4用缓冲区io优化会WA??? /* Wr ...

  8. Django专题

    一.   web框架的原理: 1.C/S架构和B/S架构 C/S:客户端与服务器 B/S:浏览器与服务器     web开发 2.web开发的本质: socket服务端:收发消息都是按照HTTP协议的 ...

  9. 洛谷 P2278 [HNOI2003]操作系统

    题目传送门 解题思路: 一道没啥思维含量的模拟题,但是个人感觉代码实现不简单,可能是我太弱了,花了我6个小时,3次重写. AC代码: #include<iostream> #include ...

  10. LeetCode——735.行星碰撞

    给定一个整数数组 asteroids,表示在同一行的行星. 对于数组中的每一个元素,其绝对值表示行星的大小,正负表示行星的移动方向(正表示向右移动,负表示向左移动).每一颗行星以相同的速度移动. 找出 ...