1、Frame
使用框架(Frame)，你可以在浏览器窗口同时显示多个网页。每个Frame里设定一个网页，每个Frame里的网页相互独立。
【注意】(1)不能放在<body>标签中；(2)cols：左右分, rows：上下分；name和src之间不能有逗号","
例1：分为左、中、右三块，分别占20%，20%，60%的宽度
- <frameset cols="20%,20%,*">
- <frame name="left" src="left.html">
- <frame name="mid" src="mid.html">
- <frame name="right" src="right.html">
- </frameset>
例2：不允许frame之间调整大小，设置noresize
- <frameset cols="20%,20%,*">
- <frame name="left" src="left.html" noresize>
- <frame name="mid" src="mid.html">
- <frame name="right" src="right.html">
- </frameset>
例3：上下分块，下块再分为左右
- <frameset rows="10%,*">
- <frame name="top" src="top.html" noresize>
- <frameset cols="20%,20%,*">
- <frame name="left" src="left.html" noresize>
- <frame name="mid" src="mid.html">
- <frame name="right" src="right.html">
- </frameset>
- </frameset>
例4：在left的frame中设置target，表示链接在哪个frame显示。target="right"表示显示在名为‘right’帧的位置
- <body>
- <a href="student_add.html" target="right">添加学生</a><br>
- <a href="student_del.html" target="right">删除学生</a><br>
- <a href="student_modify.html" target="right">修改学生</a><br>
- <a href="student_query.html" target="right">查找学生</a><br>
- </body>
例5：隐含帧：iframe，可以做到刷新帧里面内容，对外面帧没影响
- <body>
- <h1>iframe sample</h1>
- <iframe src="iframe1.html"></iframe>
- </body>
frame的名称命名为：topFrame，leftFrame，mainFrame，bottomFrame等，出现的位置由frameset中的出现的先后顺序决定。
电子上午后台实例如下：
- <frameset rows="60,*,30" frameborder="no" border="0" framespacing="0">
- <frame src="top.jsp" scrolling="no" noresize="noresize" id="topFrame" style="border-bottom:1px #848284 solid;"/>
- <frameset cols="200,*" frameborder="no" border="0" framespacing="0">
- <frame src="menu.jsp" name="leftFrame" scrolling="auto" id="leftFrame" style="border-right:1px #848284 solid;"/>
- <frame src="main.jsp" name="mainFrame" id="mainFrame" />
- </frameset>
- <frame src="bottom.jsp" name="bottomFrame" scrolling="no" noresize="noresize" id="bottomFrame" style="border-top:1px #848284 solid;"/>
- </frameset>
可以通过指定占的像素大小、或者各部分的比列决定占的位置。
2、Div
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
【注意】
(1)<div>和<span>均属于无意义标签，<div>默认是换行，<span>则不换行
(2)主要用于分块，设置各个部分的样式
(3)每个div可以取不同的名字，分别进行样式设置
例1：
- <head>
- <style>
- span{
- color:red;
- font-weight:blod;
- }
- div{
- color:red;
- font-weight:blod;
- }
- </style>
- </head>
- <body>
- <div>abcdef</div>
- <div>abcdef</div>
- <div>abcdef</div>
- <span>name:</span>zhangsan<br>
- <span>age:</span>20<br>
- <span>sex:</span>femail<br>
- </body>
本文转自 tianya23 51CTO博客，原文链接：http://blog.51cto.com/tianya23/679462，如需转载请自行联系原作者
