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

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

例如:

<frameset rows = "20%,*">

<frame name = "rmtop" src="top.htm"/>

<frame name ="bottom" src="bottom.htm"/>

</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
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

obession

觉得有用可以打赏咖啡一杯~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值