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

最新推荐文章于 2021-06-01 08:09:09 发布

obession

最新推荐文章于 2021-06-01 08:09:09 发布

阅读量659

点赞数

本文链接：https://blog.csdn.net/obession/article/details/48048671

版权

java web 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

框架把当前页划分为若干个窗格，每个窗格显示一个页面，框架网页，通过<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>