博客
关于我
FRAME 框架
阅读量:540 次
发布时间:2019-03-08

本文共 1512 字,大约阅读时间需要 5 分钟。

垂直框架通常,垂直框架采用<frameset>标签,并通过rows属性来定义框架的行高。例如:

<frameset rows="200, 300, 400">  <frame>内容1</frame>  <frame>内容2</frame>  <frame>内容3</frame></frameset>

这样,页面会分为三个部分,高度分别为200、300和400像素。

水平框架水平框架则通过cols属性来设置框架的列宽。例如:

<frameset cols="200, 300, 400">  <frame>内容1</frame>  <frame>内容2</frame>  <frame>内容3</frame></frameset>

这样,页面会被分成三个列布局,每列宽度分别为200、300和400像素。

混合框架有时也可以使用rows和cols同时定义的<frameset>标签来创建混合布局。例如:

<frameset cols="25%" rows="150px, 200px">  <frame>左侧框架</frame>  <frame>右侧框架</frame>  <frame>下方框架</frame></frameset>

这样,左侧框架占25%宽度,右侧框架和下方框架则占据剩余空间,并分别设置行高。

含有noresize属性的垂直框架如果需要垂直框架不可移动,可以在<frameset>标签中添加noresize属性。例如:

<frameset rows="200, 300, 400" noresize>  <frame>内容1</frame>  <frame>内容2</frame>  <frame>内容3</frame></frameset>

这样,框架不会被用户拖动或重新调整大小。

导航框架导航框架通常用于创建多页面的导航结构。例如,在html_contents.html文件中:

<div><meta charset="utf-8"><title>html_contests</title><a href="frame_a.html" target="showframe">Frame_a</a><div><div><div><!---target:目标、锚点等----><a href="frame_b.html" target="showframe">Frame_b</a><div><div><div><a href="frame_c.html" target="showframe">Frame_c</a><div><div><div></div></div></div>

通过target="showframe"属性,可以实现点击链接后在同一页面内显示对应的框架内容。

查询区别:HTML<frameset>标签的cols属性和rows属性<frameset>标签的cols和rows属性都用于定义框架的大小差异。cols属性用于设置水平方向的列宽,而rows属性用于设置垂直方向的行高。例如:

<frameset cols="25%, 75%" rows="200, 300">  <frame>左侧框架</frame>  <frame>右侧框架</frame>  <frame>上方框架</frame>  <frame>下方框架</frame></frameset>

这样,左侧框架占25%宽度,右侧框架占75%,上方框架和下方框架分别占据200和300像素的高度。

框架显示在支持frames的浏览器中,以上代码会在页面中显示多个框架内容。每个框架都可以独立显示不同的页面内容。

转载地址:http://zhyiz.baihongyu.com/

你可能感兴趣的文章
npm报错File to import not found or unreadable: @/assets/styles/global.scss.
查看>>
npm报错unable to access ‘https://github.com/sohee-lee7/Squire.git/‘
查看>>
npm淘宝镜像过期npm ERR! request to https://registry.npm.taobao.org/vuex failed, reason: certificate has ex
查看>>
npm版本过高问题
查看>>
npm的“--force“和“--legacy-peer-deps“参数
查看>>
npm的安装和更新---npm工作笔记002
查看>>
npm的常用配置项---npm工作笔记004
查看>>
npm的问题:config global `--global`, `--local` are deprecated. Use `--location=global` instead 的解决办法
查看>>
npm编译报错You may need an additional loader to handle the result of these loaders
查看>>
npm设置淘宝镜像、升级等
查看>>
npm设置源地址,npm官方地址
查看>>
npm设置镜像如淘宝:http://npm.taobao.org/
查看>>
npm配置安装最新淘宝镜像,旧镜像会errror
查看>>
NPM酷库052:sax,按流解析XML
查看>>
npm错误 gyp错误 vs版本不对 msvs_version不兼容
查看>>
npm错误Error: Cannot find module ‘postcss-loader‘
查看>>
npm,yarn,cnpm 的区别
查看>>
NPOI
查看>>
NPOI之Excel——合并单元格、设置样式、输入公式
查看>>
NPOI初级教程
查看>>