博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
创建框架结构的页面
阅读量:4948 次
发布时间:2019-06-11

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

 

框架指的是一种布局

 

1.创建窗口框架页面:

有的网页,像论坛,就左侧是导航栏,右侧是论坛主体,单击左侧导航栏,则在右侧显示链接页面。这个布局是将浏览器分为左右两部分。

创建窗口框架的<frameset>和<frame>标签。

使用<frame>标签在HTML 页面中设置框架,那么当一个浏览器被分为很多个框架时,这些框架放在一起,称为框架集。 框架集的html标签为<frameset>也称为框架结构标签。
如果要在框架中放入内容,采用的方式是通过引用所放内容的路径来加载对象
<framesset….>
  <frame src=…..>
  <frame src=…..>
</frameset>
(不能将<frameset>标签和<body>标签一起用。因为框架分割的是浏览器,理论上至少也需要两个标签组成。所以不存在只有一个框架页面。而且框架集的作用是将多个页面同时展示在浏览器中,同样也不存在包含框架的独立页面。所以不能一起用喔。)

 

2.横向分割窗口:

窗口的分割只有横纵连个方向,没有斜方向的切割方法。横向分割窗口,使用row属性,代码:
<frameset rows="框架高度,框架高度,…..*"> (框架高度可以用像素或者百分比来表示)
(*表示最后一个框架的高度,就是说剩下的最后一个也就无需用数值表示)
<html>
  <head>
  <title>横向分割窗口</title>
  </head>
  <frameset rows="40%,40%,*">
    <frame></frame>
    <frame></frame>
    <frame></frame>
  </frameset>
</html>

3.纵向分割窗口:

使用的是cols属性
<frameset cols="20%,40%,*">

(在HTML中,<frame>标签不需要关闭,但是在xhtml中,<frame>标签必须被正确地关闭)

 

4.框架的嵌套:

框架的嵌套就是说如果同时混合使用横纵结构,即在分割的框架中再嵌套一个框架集。

            框架的嵌套                                                            

 这个框架可以看作大框架中的一个子框架

 

5.将页面放入窗口框架中:

需要在框架中通过路径的方式来添加页面。
<frame src="傻逼主页.html">

 

6.修饰框架的细节:

在框架设计页面时,有时候会遇到不能显示框架的浏览器,在这时候就可以用<noframes>标签加以注释。
<frameset>
<frame>
<frame>
<noframes>
<body>
很抱歉,您的浏览器无法处理框架
</body>
</noframes>
</frameset>

固定框架的位置:

设定好框架的位置后,框架并不是固定的,通过拉拽框架集的边框,大小是会变的。
可以用<noresize>标签来固定标签。
<frame noresize="noresize">

框架中设置滚动条:可以通过scrolling属性来实现这种控制。

<frame src="klsafj.html" scrolling=auto>//设置滚动条是自动的,即根据页面的内容是否超出框架范围决定是否出现滚动条
<frame src=".." scrolling=no>//表示不现滚动条
<frame src="…" scrolling=yes>//无论页面内容是否超过框架范围,都将显示滚动条。

 

7.修改框架边框的样式:
1.判定边框是否显示: 用frameborder属性可以决定是否显示边框
<frame frameborder="0" src="">如果写成0则不显示,如果写成1则显示。
2.改变边框的表现效果:
border表示框架的边框。在这个属性上可以扩展出一些新的特性。如bordercolor
<frameset rows="30%,*" border=23px bordercolor="#FF0000">

 

8.边框的边距:

就是指框架内页面内容和边框的距离。使用margininwidth属性设置左右两边的边距。使用marginheight属性设置上i行啊两边的边距 这几个属性可以控制文字在边框中的位置

 

转载于:https://www.cnblogs.com/wangshen31/p/7912046.html

你可能感兴趣的文章
电商总结(四)基于共享存储的图片服务器架构
查看>>
EJS 语法
查看>>
<<浪潮之巅>>阅读笔记一
查看>>
二叉树的二叉链表存储结构
查看>>
负逻辑
查看>>
jq封装Prompt吐司,默认两秒淡去
查看>>
vs2015升级后台mvc视图编辑器默认不是razor视图引擎问题
查看>>
ZooKeeper安装教程
查看>>
node.js 生成二维码
查看>>
测试MS题
查看>>
《人生路上对我影响最大的三位老师》
查看>>
Kafka及集群部署
查看>>
Linux学习笔记003-目录
查看>>
h5页面宽度设置7.5rem
查看>>
spring IOC 详解
查看>>
第七周作业
查看>>
ecliplse集成SVN
查看>>
1、VMware安装步骤
查看>>
本周学习进度表及时间安排(2017-12-31~2018-1-6)
查看>>
mysql 实行模糊查询 一个输入值匹配多个字段和多个输入值匹配一个字段
查看>>