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,如需转载请自行联系原作者

相关文章
24Echarts - 折线图(Line Style and Item Style)
24Echarts - 折线图(Line Style and Item Style)
61 0
element-ui 里 el-popover 位置发生偏移
element-ui 里 el-popover 位置发生偏移
1426 0
|
容器
layui框架实战案例(23):在layui-tab-content中layui-progress-bar在html拼接中不显示lay-percent的解决方案
layui框架实战案例(23):在layui-tab-content中layui-progress-bar在html拼接中不显示lay-percent的解决方案
360 0
|
7月前
Frame-Pannel-Button综合
Frame-Pannel-Button综合
|
Web App开发 前端开发
给Img标签设置height和width属性
给Img标签设置height和width属性
713 0