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>