[前端 1] 使用frameset框架构建网页基本布局

最新推荐文章于 2024-04-23 10:35:25 发布

既过不念，未来不继

最新推荐文章于 2024-04-23 10:35:25 发布

阅读量7.3k

点赞数 3

分类专栏： ◆知识探究 ------【前端】

本文链接：https://blog.csdn.net/hhx0626/article/details/50994330

版权

◆知识探究同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

------【前端】

9 篇文章 0 订阅

订阅专栏

导读：在做项目的过程中，发现网页的一些地方是不变的，比如说顶部、底部。而变幻的内容就只是一部分。这个时候在想，这是每次都刷新一个界面呢，还是有别的快捷方法呢。然后就找到了frameset 这个东西。本篇博客是结合一个小实例对frameset的简单介绍。

一、是什么

frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。

优点：

1，在frameset里使用iframe来实现常规的一些分栏布局，可以借助一个页面承载多个页面的方式来重用页面代码。
2，一个页面中的iframe之间可以互相实现关联，而且不需要依靠过多的js就可以实现类似“局部”刷新的机制。

缺点：

1，如果要实现不同iframe之间的dom元素产生互动和关联，需要的js复杂程度较高，而且有些根本实现不了（比如拖拽，比如用户自定制页面布局）。

2，一个页面承载多个页面的http请求，而且实现那种类似局部刷新的效果，不是后台运行请求的机制，而也是使用了前台的浏览器刷新机制，会有延迟的响应而且无法对响应进行控制（比如loading或者一些响应状态的监听）。

使用场景：

适用于有固定布局的系统

二、实例简介

2.1，上、下、左的布局

top：

<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>freamset——top</title>  
  </head>  
    
  <body>  
    <div style="text-align:center;color:blue;font-size:50px">（这里是头部）牡丹亭</div>  
  </body>  
</html>  </span>

bottom：

<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>freamset——bottom</title>  
  </head>  
    
  <body>  
    <div style="text-align:center;color:blue;font-size:30px">（底部）
		《皂罗袍》
	</div>  
  </body>  
</html>  </span>

left：

<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>freamset——left</title>  
  </head>  
    
  <body>  
    <div style="color:blue;font-size:30px">（左边）
	</br>
	《牡丹亭》
	</br>
	作者：汤显祖
	</br>
	<a target="right" href="right.html">前两句</a> </br>
	<a target="right" href="myright.html">后两句</a> 
	</div>  
  </body>  
</html>  </span>

2.2，center中的右面布局

<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>freamset——right</title>  
  </head>  
  <body>  
    <div style="color:blue;font-size:30px">（右边前两句）
		</br>
		原来姹紫嫣红开遍
		</br>
		似这般都付与断井颓垣
	</div>  
  </body>  
</html>  </span>

<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>  
  <head>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>freamset——myright</title>  
  </head> 
  <body> 
	<div style="color:blue;font-size:30px">（右边后两句）  
		</br>
		良辰美景奈何天
		</br>
		赏心乐事谁家院 
	</div> 
  </body>  
</html> </span>

2.3，混合的frameset布局

<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>freamset——index</title>  
	
<frameset rows="15%,80%,5%">
  <frame name="top" src="top.html" /><--拥有15%的高度-->
	<frameset cols="25%,75%"><--拥有80%的高度-->
		<frame name="left" src="left.html"><--拥有25%的宽度-->
		<frame name="right" src=""><--拥有75%的宽度-->
	</frameset>
  <frame name="bottom" src="bottom.html" /><--拥有5%的高度-->
</frameset>

</html>  </span>

2.4，效果

三、总结

利用frameset标签可以设置一个固定的网站布局，但是在HTML5中，已经不支持这个属性了。那么我想肯定有一种可以替代的东西。接下来，还需要了解一些别的相关的东西，比如IFrame等。

既过不念，未来不继

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
27
评论
[前端 1] 使用frameset框架构建网页基本布局

导读：在做项目的过程中，发现网页的一些地方是不变的，比如说顶部、底部。而变幻的内容就只是一部分。这个时候在想，这是每次都刷新一个界面呢，还是有别的快捷方法呢。然后就找到了frameset 这个东西。本篇博客是结合一个小实例对frameset的简单介绍。一、是什么frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，fram
复制链接

扫一扫