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


    导读:在做项目的过程中,发现网页的一些地方是不变的,比如说顶部、底部。而变幻的内容就只是一部分。这个时候在想,这是每次都刷新一个界面呢,还是有别的快捷方法呢。然后就找到了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等。


  • 相关阅读:
    EXE中释放文件
    关闭GS选项,解决注入后崩溃
    HDU2516 取石子游戏
    HDU2188 选拔志愿者
    HDU2149 Public Sale
    HDU2147 kiki's game
    HDU1846 Brave Game
    LightOJ1214 Large Division
    POJ2480 Longge's problem
    HDU 5880 Family View
  • 原文地址:https://www.cnblogs.com/hhx626/p/6010352.html
Copyright © 2020-2023  润新知