Frame和Div

最新推荐文章于 2023-04-27 10:14:48 发布
最新推荐文章于 2023-04-27 10:14:48 发布
阅读量643 收藏 3
点赞数
CC 4.0 BY-SA版权
原文链接：https://yq.aliyun.com/articles/419054
本文详细介绍了HTML中的Frame和Div标签的使用方法及注意事项。包括如何利用Frame在同一页面展示多个独立网页，以及如何通过Div对文档进行逻辑划分，并设置样式。

1、Frame

使用框架(Frame)，你可以在浏览器窗口同时显示多个网页。每个Frame里设定一个网页，每个Frame里的网页相互独立。

【注意】(1)不能放在<body>标签中；(2)cols：左右分, rows：上下分；name和src之间不能有逗号","

例1：分为左、中、右三块，分别占20%，20%，60%的宽度



  1. <frameset cols="20%,20%,*"> 
  2.      <frame name="left" src="left.html"> 
  3.      <frame name="mid" src="mid.html"> 
  4.      <frame name="right" src="right.html"> 
  5.  </frameset> 
 例2：不允许frame之间调整大小，设置noresize




  1. <frameset cols="20%,20%,*"> 
  2.         <frame name="left" src="left.html" noresize> 
  3.         <frame name="mid" src="mid.html"> 
  4.         <frame name="right" src="right.html"> 
  5.     </frameset> 
例3：上下分块，下块再分为左右




  1. <frameset rows="10%,*"> 
  2.  
  3.    <frame name="top" src="top.html" noresize> 
  4.  
  5.    <frameset cols="20%,20%,*"> 
  6.  
  7.        <frame name="left" src="left.html" noresize> 
  8.  
  9.        <frame name="mid" src="mid.html"> 
  10.  
  11.        <frame name="right" src="right.html"> 
  12.  
  13.    </frameset> 
  14.  
  15. </frameset> 
例4：在left的frame中设置target，表示链接在哪个frame显示。target="right"表示显示在名为‘right’帧的位置




  1. <body> 
  2.     <a href="student_add.html" target="right">添加学生</a><br> 
  3.     <a href="student_del.html" target="right">删除学生</a><br> 
  4.     <a href="student_modify.html" target="right">修改学生</a><br> 
  5.     <a href="student_query.html" target="right">查找学生</a><br> 
  6. </body> 
例5：隐含帧：iframe，可以做到刷新帧里面内容，对外面帧没影响




  1. <body> 
  2.         <h1>iframe sample</h1> 
  3.         <iframe src="iframe1.html"></iframe> 
  4. </body> 
 frame的名称命名为：topFrame，leftFrame，mainFrame，bottomFrame等，出现的位置由frameset中的出现的先后顺序决定。


电子上午后台实例如下：




  1. <frameset rows="60,*,30" frameborder="no" border="0" framespacing="0"> 
  2.   <frame src="top.jsp"  scrolling="no" noresize="noresize" id="topFrame"  style="border-bottom:1px #848284 solid;"/> 
  3.   <frameset cols="200,*" frameborder="no" border="0" framespacing="0"> 
  4.         <frame src="menu.jsp" name="leftFrame" scrolling="auto" id="leftFrame" style="border-right:1px #848284 solid;"/> 
  5.         <frame src="main.jsp" name="mainFrame" id="mainFrame" /> 
  6.   </frameset> 
  7.   <frame src="bottom.jsp" name="bottomFrame" scrolling="no" noresize="noresize" id="bottomFrame"  style="border-top:1px #848284 solid;"/> 
  8. </frameset> 
 可以通过指定占的像素大小、或者各部分的比列决定占的位置。


 


 


2、Div




<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。


如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。


【注意】


(1)<div>和<span>均属于无意义标签，<div>默认是换行，<span>则不换行


(2)主要用于分块，设置各个部分的样式


(3)每个div可以取不同的名字，分别进行样式设置


例1：




  1. <head> 
  2.   <style> 
  3.     span{ 
  4.       color:red; 
  5.       font-weight:blod; 
  6.     } 
  7.     div{ 
  8.       color:red; 
  9.       font-weight:blod; 
  10.     } 
  11.   </style> 
  12. </head> 
  13.  
  14. <body> 
  15.   <div>abcdef</div> 
  16.   <div>abcdef</div> 
  17.   <div>abcdef</div> 
  18.   <span>name:</span>zhangsan<br> 
  19.   <span>age:</span>20<br> 
  20.   <span>sex:</span>femail<br> 
  21. </body> 
 


 


 本文转自 tianya23 51CTO博客，原文链接：http://blog.51cto.com/tianya23/679462，如需转载请自行联系原作者


        
        
                
    

                

        




    

    
  



    



                



	

		

			

				
					
div iframe html5,深入理解iframe

				
			

			

				

					weixin_42433529的博客
				

				

					06-10
					
					885
					
				

			

		

		

			
				
深入理解iframe一、什么是 iframeiframe 用于在页面内显示页面，使用  会创建包含另外一个文档的内联框架(即行内框架)二、iframe 的常用属性1、width定义 iframe 的宽度2、height定义 iframe 的高度3、name规定 iframe 的名称4、frameborder规定是否显示边框，值为 0(不显示)和 1(显示)5、scrolling规定是否在 ifra...

			
		

	



                

            
              



	

		

			

				
					
HTML基础 -----【框架元素，div 和 span 标记】【块级元素和行内元素区别】

				
			

			

				

					weixin_51516810的博客
				

				

					04-17
					
					630
					
				

			

		

		

			
				
1.html 中的框架元素
【1.】frameset 标记–表示一个框架集【包含框架的集合】
定义了如何将窗口拆分成框架单元。
使用 frameset 标签时候不需要 body 元素
以下是框架属性：
（1.）rows 属性–将窗口拆分成上下结构，取值的个数决定了拆分成个数，取值大小数决定了拆分的每一个窗口的比例
（2.）cols 属性–将窗口拆分成左右结构，取值的个数决定了拆分成个数，取值大小数决定了拆分的每一个窗口的比例。
【2.】frame 标记–表示一个框架[每个框架中放入什么文件]
1.src  

			
		

	



              


  
              

                


	

		

			

				
					
开发后台界面用 div好，还是frame 框架 好？

				
			

			

				

					weizhongxing6的专栏
				

				

					11-01
					
					4796
					
				

			

		

		

			
				
我开发后台管理系统时，同时尝试过使用div和frame框架作为后台管理界面的布局。我发现，还是用frame框架更好一下。

div的缺点：

			
		

	





	

		

			

				
					
div frame

				
			

			

				

					iteye_4755的博客
				

				

					06-18
					
					146
					
				

			

		

		

			
				
Set up your IFRAME:
&lt;IFRAME style="DISPLAY: none; LEFT: 0px; POSITION: absolute; TOP: 0px" src="javascript:false;" frameBorder="0" scrolling="no"&gt;&lt;/IFRAME&gt;
iframe.style.topiframe.style.l

			
		

	



		

			
		



	

		

			

				
					
frameset和div常规布局的优缺点比较

					
热门推荐

				
			

			

				

					zhangxinrun的专栏
				

				

					06-18
					
					1万+
					
				

			

		

		

			
				
<br />用frameset来布局的优点：<br />1，在frameset里使用iframe来实现常规的一些分栏布局，可以借助一个页面承载多个页面的方式来重用页面代码。<br />2，一个页面中的iframe之间可以互相实现关联，而且不需要依靠过多的js就可以实现类似“局部”刷新的机制。<br />3，一些常见的后台管理系统大部分是用这种方式来布局的（追其原因可能是上面2点），所以固定了思维系统布局可能用frameset来实现比较好。<br />用frameset来布局的缺点：<br />1，如果要实现

			
		

	





	

		

			

				
					
HTML 选择器、div标签、frame

				
			

			

				

					qq_41083450的博客
				

				

					09-25
					
					502
					
				

			

		

		

			
				
选择器和div标签
可在head子标签中写选择器（id选择器、class选择器、标签选择器、通配符选择器、分组选择器、后代选择器）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>/*里面只写选...

			
		

	





	

		

			

				
					
div ,frame等空间的透明实现代码

				
			

			

				

					12-09
				

			

		

		

			
				
总结起来，实现`div`和`frame`等元素的透明效果主要依赖于CSS的`background`属性以及可能需要的特定属性如`allowTransparency`。在设计网页时，透明效果能够增加视觉深度，但需注意，过度使用透明可能导致页面可读性...

			
		

	





	

		

			

				
					
用DIV模拟Frame的静态页面的实现

				
			

			

				

					03-25
				

			

		

		

			
				
描述中提到的博客链接指向了一个关于该话题的具体教程，虽然具体内容未提供，但我们可以推测博主分享了如何使用DIV元素和相关技术来构建分隔的页面区域，模仿Frame的功能。  在实现这个功能时，主要涉及以下几个知识...

			
		

	





	

		

			

				
					
多个iframe，显示其中一个frame中的div，并处于最上层显示

				
			

			

				

					10-25
				

			

		

		

			
				
总结来说，实现"多个iframe，显示其中一个frame中的div，并处于最上层显示"的功能，涉及了HTML的`iframe`标签、CSS的`z-index`属性、JavaScript的`postMessage`通信以及动态创建和操作DOM元素的技巧。通过这些技术，...

			
		

	





	

		

			

				
					
Frame 窗口部件和lable

					
最新发布

				
			

			

				

					03-12
				

			

		

		

			
				
而在Web开发中，通过HTML的<div>标签可以创建Frame效果，并使用CSS来定义其样式；Label则对应HTML中的标签。  由于给定的文件名称列表仅提供了一个数字“3-8”，无法直接推断出与标题和描述相关的内容，因此本回答中...

			
		

	





	

		

			

				
					
div被iframe遮住的几种情况及解决方法

				
			

			

				

					12-10
				

			

		

		

			
				
类似结构：
复制代码代码如下:</iframe”>http://caibaojian.com”></iframe
第一种：透明背景被遮住
当div使用透明的背景时，无论是使用（opacity或者rgba格式），除了chrome，其它浏览器都出现div被iframe遮住的情况。
解决方法：
div使用不透明背景或者使用透明的背景图片。
第二种：ie8中z-index失效
在ie中，iframe里引入video视频播放会导致div的z-index无效，即div的z-index无论

			
		

	





	

		

			

				
					
JS在Div中frame操作应用

				
			

			

				

					02-10
				

			

		

		

			
				
JS 在Div中frame操作应用
JS 在Div中frame操作应用
JS 在Div中frame操作应用
JS 在Div中frame操作应用
JS 在Div中frame操作应用

			
		

	





	

		

			

				
					
用div+iframe 布局

				
			

			

				

					bestlove12345的博客
				

				

					07-05
					
					5544
					
				

			

		

		

			
				
用div+iframe 布局





frameset 已经过时, 使用frameset会带来很多问题,比如session丢失等. 所以提倡用iframe。下面是一个不错的网站布局的。

1. Main.htm页面代码




后台管理系统



body
{
margin: 0;
padding: 0;
border: 0;
overflow: hi

			
		

	





	

		

			

				
					
使用div替代＜frameset＞＜frame＞的问题以及解决办法

				
			

			

				

					qq3892997的博客
				

				

					04-27
					
					1208
					
				

			

		

		

			
				
1. 替换后最重要的就是a标签指定刷新哪个frame需要更改为$('#main').load(链接)，其他倒没有什么，如果不把frame改成div就会经常出现frame中某些内容重复生成或者不显示，特别恶心。window.parent是当前页面C通过location.href转到新的页面D，那在D页面上window.parent就是B。window.opener是当前页面A通过open方法弹出一个窗口B，那在B页面上 window.opener就是A。

			
		

	





	

		

			

				
					
用div实现框架（排除frame）

				
			

			

				

					张朝玉的专栏
				

				

					12-27
					
					9096
					
				

			

		

		

			
				
frame中嵌套一iframe 之间的分隔条 也可以拖动 但是地图会发生改变移到我上面aaabbbccc document的使用document.getElementById("id1").style.display="none"; document.all.id1 同 document.getElementById("id1").   document.all是集合 有长度 可循环var obj

			
		

	





	

		

			

				
					
frameset过时，以及用div+iframe的代替frameset实现

				
			

			

				

					qq_42058441的博客
				

				

					01-20
					
					4611
					
				

			

		

		

			
				
今天在学习 java web项目时，书中示例使用了 &lt;frameset&gt;&lt;/frameset&gt;标签，编译器添加删除线标识该标签过时，最初考虑不影响使用，就没有关心，运行工程后发现网页没有输出，于是查询相关资料，学习记录。

过时的frameset


	使用frameset页面空白问题

	这是因为我将 &lt;frameset&gt;&lt;/frameset&gt; 标...

			
		

	





	

		

			

				
					
如何在div中使用frame

				
			

			

				

					05-22
				

			

		

		

			
				
3. 可以通过CSS样式来设置iframe元素的大小和位置，以适应div的大小，如下所示：  ```css #myDiv {  width: 500px;  height: 500px; } #myFrame {  width: 100%;  height: 100%;  border: none; } ```  这样，在div...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值