首页 > 代码库 > 常见页面布局方式(三种框架集)

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

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="http://www.mamicode.com/list.html" />

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

  </frameset>

</frameset>

</html>

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

技术分享

 

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