常见页面布局方式(三种框架集)

frameset框架集

Frameset标签可定义一个框架集,它用来组织多个窗口(框架),每个框架有独立的html文档,在石油frameset是,不可以同时存在body标签,他和body标签是同级的。

多个框架组成了一个框架集

1 框架集标签(frameset)第一如何将窗口分割为框架

2 每个frameset 第一了一系列行货列

3 rows、columns的值规定了每行或每列占据屏幕的面积

frameset的一些属性

  cols“”把一个浏览器窗口按列进行切割,也就是把浏览器竖着切分

      cols“20%,200px,*”上半部分战20%,中间部分占200px,剩下的为第三部分。

  rows=“20%,200px,*”以行方式分割,横着划分

  border=“1”设置间距为1等等

  bordercolor=“red”框架边的颜色

  frameborder=“no/yes” 是否显示边框线(也可以写0或1)

  noresize=“noresize”不可以重新设置大小(两个内容之间不可以移动了)浏览器之间解析方式不太一样最好在frame单独写,而不是在frameset上写

它们都在frameset标签上显示。

框架标签<frame />

frame标签定义了放置在每个框架中的HTML文档。它通过引用要显示的HTML文档的路径,他是自闭合标签。

frame常用属性

1 name设置框架名称

2 src 设置此框架要显示的网页名称或路径。此为必须设置的属性。

3 scrolling=“” 设置是否要显示滚动条。设定值为auto,yes,no。不可以用0  1来写值:

!不能将body和frameset标签同时使用,但是如果添加包含一段文本的<noframeset>标签,就必须得将这段文字嵌套于<body>标签内:

<frameset rows="200px,*" border="1" bordercolor="red">
  <frame src="http://www.baidu.com" />
  <frameset cols="30%,*">
  <frame src="http://www.360.com" name="leftwindows" scrolling="no" />
  <frame src="http://www.taobao.com" noresize=“noresize”/>
  </frameset>
</frameset>
<noframes>
  <body>
    你的浏览器不支持frameset框架集
  </body>
</noframes>

浏览器不支持框架集用norframes标签来显示,一般写咋frameset下面里面包含body标签。

例如百谷歌度网站,百度谷歌一起搜

iframe内联框架和框架集实例

<iframe>内联框架标签

iframe元素会创建包含另外一个文档的内联框架(即行内框架)。iframe是属于内联框架,他是body的子集。iframe作为一个普通元素放在body里,而frameset是代替了body元素

属性:

1width可设置内联框架的宽

2 height可设置高

3 name 设置框架名称

4 src设置页面的路径

例子:<a href="http://www.youdao.com: target="right">百度</a>

  <iframe name="right" src="http://www.baidu.com" frameborder="1" width="400" hright="200">你的浏览器不支持iframe标签</iframe>

制作页面是没有写单位,都默认为像素。

<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="http://www.jd.com" target="iframeName">点击</a>
<iframe name="iframeName" src="http://www.baidu.com" width="600" height="600" frameborder="0">你的浏览器不支持iframe标签</iframe>
</body>
</html>

通过target属性指向了iframe的名字所以页面会在iframe里面显示,如果不加target,就会在整个页面打开。

a标签的target属性值:

_blank,在新的窗口打开

_self,默认,在相同的框架中打开被连接文档

_parent,在父框架集中打开被连接文档(在最外面的frameset中打开)

_top,在整个窗口中打开

framename,通过名字在指定的框架中打开

可以应用的qq邮箱类型的,在左面点击在右面被打开如下:

list.html

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="utf-8">

  <title></title>

</head>

<body>

  <ul>

    <li><a href="htto://www.baidu.com" target="rightWindow">百度</a></li>

    <li><a href="htto://www.360.com" target="rightWindow">360</a></li>

    <li><a href="htto://www.taobao.com" target="rightWindow">淘宝</a></li>

    <li><a href="htto://www.jd.com" target="rightWindow">京东</a></li>

  </ul>

</body>

</html>

index.html

<!DOCTYPE html>

<html>

<head lang="en">

  <title></title>

</head>

<frameset rows="20%,*">

  <frame src="http://www.baidu.com" />

  <frameset rows="20%,*>

  <frame src="list.html" />

  <frame name="rightWdow" src="http://www.youdao.com" />

  </frameset>

</frameset>

</html>

显示如下:在左下点击的效果会在右面的框架里产生。

时间: 2024-10-14 03:35:00

常见页面布局方式(三种框架集)的相关文章

YbSoftwareFactory 代码生成插件【二十五】:Razor视图中以全局方式调用后台方法输出页面代码的三种方法

上一篇介绍了 MVC中实现动态自定义路由 的实现,本篇将介绍Razor视图中以全局方式调用后台方法输出页面代码的三种方法. 框架最新的升级实现了一个页面部件功能,其实就是通过后台方法查询数据库内容,把查询结果的 HTML 代码呈现到 Razor 视图中,考虑到灵活性,需要能在任意 Razor 视图中调用该方法,这样任意 Razor 页面都能以统一的方式方便地共享该页面部件的 HTML 内容,这对于代码的重用性和可维护性都是非常有必要的. 为实现上述要求,本文介绍如下可供选择的三种方式.   1.

三种Tomcat集群方式的优缺点分析

三种Tomcat集群方式的优缺点分析 2009-09-01 10:00 kit_lo kit_lo的博客 字号:T | T 本文对三种Tomcat集群方式的优缺点进行了分析.三种集群方式分别是:使用DNS轮询,使用Apache R-proxy方式,以及使用Apache mod_jk方式. AD:WOT2014课程推荐:实战MSA:用开源软件搭建微服务系统 Tomcat集群方式有三种,分别是: 1.使用DNS轮询. 2.使用Apache R-proxy方式. 3.使用Apache mod_jk方式

页面添加锚点的三种方式

页面添加锚点的三种方式 HTML中的链接,正确的说法应该称作"锚点",它命名锚点链接(也叫书签链接)常常用于那些内容庞大繁琐的网页,通过点击命名锚点,不仅让我们能指向文档,还能指向页面里的特定段落,更能当作"精准链接"的便利工具,让链接对象接近焦点.便于浏览者查看网页内容.类似于我们阅读书籍时的目录页码或章回提示.在需要指定到页面的特定部分时,标记锚点是最佳的方法. 锚点链接对SEO的作用 锚链接是一个非常重要的概念,在网页中增加恰当的锚链接,会让所在网页和所指向网

android中填充界面布局的三种方式

改变原来界面布局的三种方式: 1.第一种方式: LayoutInflater li = LayoutInflater.from(this); 具体代码: public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activ

马化腾漫谈“流式大数据处理的三种框架:Storm,Spark和Samza”

Apache Storm 在Storm中,先要设计一个用于实时计算的图状结构,我们称之为拓扑(topology).这个拓扑将会被提交给集群,由集群中的主控节点(master node)分发代码,将任务分配给工作节点(worker node)执行.一个拓扑中包括spout和bolt两种角色,其中spout发送消息,负责将数据流以tuple元组的形式发送出去:而bolt则负责转换这些数据流,在bolt中可以完成计算.过滤等操作,bolt自身也可以随机将数据发送给其他bolt.由spout发射出的tu

流式大数据处理的三种框架:Storm,Spark和Samza

许多分布式计算系统都可以实时或接近实时地处理大数据流.本文将对三种Apache框架分别进行简单介绍,然后尝试快速.高度概述其异同. Apache Storm 在Storm中,先要设计一个用于实时计算的图状结构,我们称之为拓扑(topology).这个拓扑将会被提交给集群,由集群中的主控节点(master node)分发代码,将任务分配给工作节点(worker node)执行.一个拓扑中包括spout和bolt两种角色,其中spout发送消息,负责将数据流以tuple元组的形式发送出去:而bolt

Storm与Spark、Hadoop三种框架对比

一.Storm与Spark.Hadoop三种框架对比 Storm与Spark.Hadoop这三种框架,各有各的优点,每个框架都有自己的最佳应用场景.所以,在不同的应用场景下,应该选择不同的框架. 1.Storm是最佳的流式计算框架,Storm由Java和Clojure写成,Storm的优点是全内存计算,所以它的定位是分布式实时计算系统,按照Storm作者的说法,Storm对于实时计算的意义类似于Hadoop对于批处理的意义.Storm的适用场景:1)流数据处理Storm可以用来处理源源不断流进来

Web页面布局方式小结

事实上,本文是在Peter Jerde的How much information can be stored by ordering 52 playing cards文章基础上翻译.改编和扩展而来的.当然这是经过Jerde本人首肯的. 注意本文方法并非最优,也没有完全利用所有的信息空间,只是简单的尝试. 有数字的地方就有信息.所以扑克牌中保存信息不是什么新鲜事. PDF文档点这里:下载 原文(英文)点这里:访问 这里有两个DEMO. 编码DEMO,解码DEMO 首先是"DEEP IN SHALL

中间定宽,两边自适应布局的三种实现方法

中间定宽,两边自适应布局的三种实现方法 1. 浮动加定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>中间定宽,两边自适应</title> <style type="text/css"> html,body,div{ height: 100%; } .parent{ p