HTML中一些老的实用框架用来做简单布局

最新推荐文章于 2024-07-19 13:18:23 发布

赵广陆

最新推荐文章于 2024-07-19 13:18:23 发布

阅读量798

点赞数

分类专栏： front

本文链接：https://blog.csdn.net/ZGL_cyy/article/details/105616887

版权

front 专栏收录该内容

45 篇文章 6 订阅

订阅专栏

1.iframe标签规定一个内联框架

2.HTML 标签 - HTML5 不支持

`1.iframe`标签规定一个内联框架

一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

iframe语法:

<iframe src="URL"></iframe>

该URL指向不同的网页。将窗口内容显示为URL地址指向页面。

Iframe - 设置高度与宽度

height和width属性用来定义iframe标签的高度与宽度。

属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%").

Iframe - 移除边框

frameborder属性用于定义iframe表示是否显示边框。

设置属性值为 "0" 移除iframe的边框:

使用iframe来显示目录链接页面

iframe可以显示一个目标链接的页面

目标链接的属性必须使用iframe的属性，如下实例:

HTML iframe 标签

标签	说明
<iframe>	定义一个内联的iframe

iframe 标准属性

属性	说明
class	规定元素的类名（classname）
id	规定元素的唯一 id
style	规定元素的行内样式（inline style）
title	规定元素的额外信息（可在工具提示中显示）

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<ul>
			<li><a href="http://www.baidu.com" target="ifm">百度</a></li>
			<li><a href="http://www.taobao.com" target="ifm">淘宝</a></li>
			<li><a href="http://www.jd.com" target="ifm">京东</a></li>
		</ul>
		
		<!--框架学习  width：宽度  height：高度  src:默认路径 -->
		<iframe width="1000px" height="550px" name="ifm" src="http://www.baidu.com"></iframe>
		
		
	</body>
</html>

效果：

2.HTML <frameset>标签 - HTML5 不支持

<frameset>标签在一个页面中设置一个或多个框架，用<frameset></frameset>代替了<body></body>，不能出现在body标签里。

<frameset>语法：

<html>
<head></head>

 <frameset>
   <frame src="menu.html">
   <frame src="content.html">
</frameset>
</html>

frameset- 建立框架的标记，将在其中定义各个框架。

frame src- 指示框架显示内容URL地址。

<frameset> - 设置行列比例

<frameset>标签中我们使用rows设置行的占页面的百分比；cols设置列的所占百分比。

<html>
  <head></head>

  <frameset rows="20%,*">
      <frame src="title.html">
      <frameset cols="30%,*">
          <frame src="menu.html">
          <frame src="content.html">
      </frameset>
  </frameset>
</html>

frameset cols- 确定每个框架列所占百分比。在前面的示例中，我们已经确定第一框架将占据所示区域的30％，并且我们使用“*”符号来指示剩余百分比。

frameset rows- 确定将显示的每个框架行所占百分比。在前面的示例中，我们选择第一框架为20％，剩下的剩余空间将在menu.html和content.html之间划分。

<frameset> - 设置边框

　框架有一些边框线，大多数时候都不需要。<frameset>标签中我们使用frameborder和framespacing属性可以擦除它们。

注意：frameset和frameborder是相同的属性。

<html>
  <head></head>

  <frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
      <frame src="title.html">
      <frameset border="0" frameborder="0" framespacing="0" cols="30%,*">
          <frame src="menu.html">
          <frame src="content.html">
      </frameset>
  </frameset>
</html>

frameborder-设置边框， 0值表示没有边框

border- 修改边框的粗细（由Netscape浏览器使用）

framespacing- 修改边框的粗细（由Internet Explorer浏览器使用）

<frameset> - 设置名字

<frameset>标签中我们使用name属性命名每个框架，而不是内容页面。

<html>
  <head></head>

  <frameset rows="20%,*">
      <frame name="title" src="title.html">
      <frameset cols="30%,*">
   <frame name="menu" src="menu.html">
   <name="content" src="content.html">	
      </frameset>
  </frameset>
</html>

<frameset> - 设置滚动

<frameset>标签中我们使用noresize设置禁止用户拖拉框架大小；scrolling用于设置滚动条是否显示。

<html>
  <head></head>

  <frameset border="2" frameborder="1" framespacing="2" rows="20%,*">
      <frame src="title.html" noresize scrolling="no">
      <frameset border="4" frameborder="1" framespacing="4" cols="30%,*">
          <frame src="menu.html" scrolling="auto" noresize>
          <frame src="content.html" scrolling="yes" noresize>
      </frameset>
  </frameset>
</html>

noresize- 不允许用户更改其尺寸。

scrolling- 设置滚动条是否显示。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	 <frameset rows="150px,*,100px">
	 	
	 	<!--顶部部分-->
	 	 <frame  src="admin/top.html" noresize="noresize"/>
	 	<!--中间的部分-->
	 	
	 	<frameset cols="10%,*">
	 		<!--左侧部分-->
	 		<frame  src="admin/left.html"/>
	 		<!--右侧部分-->
	 		<frame  src="admin/right.html" name="rig"/>
	 	</frameset>
	 	
	 	
	 	<!--底部部分-->
	 	<frame  src="admin/bottom.html"/>
	 	
	 </frameset>
	
	<!--<body>
	</body>-->
</html>

效果：

赵广陆

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML中一些老的实用框架用来做简单布局

目录1.iframe标签规定一个内联框架2.HTML 标签 -HTML5 不支持1.iframe标签规定一个内联框架一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。iframe语法: <iframe src="URL"></iframe>该URL指向不同的网页。将窗口内容...
复制链接

扫一扫