HTML3 框架标签, 完成一个初级登陆页面

来源：互联网发布：阿里云免费编辑：程序博客网时间：2024/06/06 05:26

框架把当前页划分为若干个窗格，每个窗格显示一个页面，框架网页，通过<frameset>框架集，和多个框架<frame>标记来定义。<frameset>标记放在<head>标记之后取代<body>的位置，还可以使用<noframes>指出框架不能被浏览器显示时的替代内容。 PS：body和frameset不能同时起作用

例如：

</frameset>

cols ：纵向，rows：横向；取值可以用像素，百分比，相对尺寸（*）；

**************************************************************************************************************************

完成一个效果的图：

用框架显示3个页面

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>Document</title> </head>  <frameset rows="120,*"><frame src="top.html" name="top"/><frameset cols="120,*"><frame src="left.html" name="left"/><frame src="rb2014.jpg" name="right"/></frameset>  </frameset></html>

上面的：

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>Document</title> </head> <body bgcolor="green" align = "center" ><font size="5" color = "white" ><center>欢迎登陆学生成绩管理系统</center></font>   </body></html>

左边：3个超链接，用target，在右边显示不同的页面

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>Document</title> </head> <body > </br>  </br>   </br>    </br> </br>  </br>  <a href="example2.html" target="rigth"><center>学生成绩表</center></a>  </br>  <a href="example1.html" target="right"><center>学生信息显示</center></a>    </br>  <a href="rb2014.jpg" target = "right"><center>返回主页</center></a>    </br> </body></html>

右边显示学生信息显示这个页面，example1.html

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title align = center>学生个人信息</title> </head> <body> <h1 align = center>学生个人信息</h1> <form method="post" action="xsServlet" method="post" ><!--<caption>学生个人信息</caption>--><table align="center" width="400" border = "1" bgcolor="#ffff66" > <tr><td width = "120">学号：</td><td><input type="text"></td> </tr> <tr><td>姓名：</td><td><input type="text"></td> </tr> <tr><td>性别 </td><td><input type="radio" name="sex" value = "boy" checked ="checked">男 <input type="radio" name="sex" value = "girl" >女</td> </tr> <tr><td>出生日期：</td><td><input type="text"></td> </tr> <tr><td>所学专业：</td><td><select name="profession" size =1><option value="0" selected="selected">计算机专业</option><option value="1">通信工程</option></select></td> </tr> <tr><td>所学课程：</td><td><select name="class" size = 1><option value="0" selected="selected">计算机导论</option><option value="1">高等数学</option></select></td> </tr> <tr><td>备注：</td><td><textarea name="area" rows="10" cols="20">团员：</textarea></td> </tr> <tr><td>兴趣：</td><td><input type="checkbox" name="interest", value="0">听音乐<input type="checkbox" name="interest", value="1">看小说<input type="checkbox" name="interest", value="2">上网</td> </tr> <tr><td><input type="button" value="提交" name=button1></td><td><input type="button" value="重置" name=button2></td> </tr> </table>   </form>  </body></html>

0 0