登录注册页面和页面跳转

要求
页面登录页面:博客园登入
1、页面有背景图
2、有一个登录表单(用户名,密码,登录按钮,注册按钮)
3、点击登录按钮跳转到学生信息表页面
4、点击注册按钮跳转的注册页面
(仿新浪邮箱注册页面,点击注册跳转到学生信息表页面)

stuTable.html
学生信息表页面:
1、只有一个表格,标题是学生信息表
表头为:姓名、性别、年龄、生日、查看详情
2、点击查看详情跳转到类似简历的页面的指定学生位置

stuInfo.html
学生详情页面:
1、将所有学生信息放到这个页面
2、顺序排放,学生信息展示方式自定义,要有头像
(可以是表格,也可以标题段落)
3、学生信息支持下载


 

首先用<table>表格做登录面的布局,

<body>
<form action="xinxibiao.html" method="post"><!--提交到xinxibiao页面-->
	<center>
	<table border="0" cellpadding="1" cellspacing="2" bgcolor="#CCFFFF" width="30%">
		<tr> 
			<td rowspan="6">     </td>
			<td><h2>登录博客园 - 代码改变世界</h2></td>
			
		</tr>
		<tr>
			<td>登入用户名<br /><input type="text" name="yonghu" value="" /></td>
			
		</tr>
		<tr>
			<td>密码<br /><input type="password" name="mima" value="" /></td>
			
		</tr>
		<tr>
			<td><input type="radio" name="xuanze" value="" />下次自动登录</td>
			
		</tr>
		<tr>
			<td><input type="submit" name="dengru" value="     登入    " /></td><!--button怎么设置 --><!--设置提交按钮,form设置提交到xinxibiao页面,实现页面的跳转-->
			
		</tr>
		<tr>
			<td><a href="zhuce.html">》立即注册</a><br /><a href="">》反馈问题</a></td>
			
		</tr>
		<tr height="10"></tr>
	</table>
	</center>
</form>
</body>

 新建学生信息表的页面xinxibiao.html 

 

<body>
<center><!--整体居中-->

<table border="1" cellspacing="0" width="50%">
	<caption>学生信息表</caption><!--表头信息-->
	<tr>
		<th>姓名</th>
		<th>性别</th>
		<th>年龄</th>
		<th>生日</th>
		<th>查看详情</th>
	</tr>
	<tr>
		<td>李一</td>
		<td>男</td>
		<td>17</td>
		<td>01.22</td>
		<td><a href="xiangqing.html#liyi">查看详情</a></td><!--连接标签跳转到详情页面,设置id实现指定的跳转-->
	</tr>
	<tr>
		<td>王二</td>
		<td>女</td>
		<td>18</td>
		<td>02.22</td>
		<td><a href="xiangqing.html#wanger">查看详情</a></td>
	</tr>
	<tr>
		<td>张三</td>
		<td>女</td>
		<td>15</td>
		<td>03.14</td>
		<td><a href="xiangqing.html#zhangsan">查看详情</a></td>
	</tr>
	<tr>
		<td>大四</td>
		<td>男</td>
		<td>78</td>
		<td>05.27</td>
		<td><a href="xiangqing.html#dasi">查看详情</a></td>
	</tr>
</table>

  通过table表格做详情页面

<body>
<center><!--整体居中-->
<table border="1" cellspacing="0" width="50%">
	<caption>个人简历</caption><!--表头信息-->
	<tr height="50">
		<td>姓名</td>
		<td align="center" id="liyi">李一</td><!--align居中--><!--id设置和xinxibiao.html的<form>id一致-->
		<td>性别</td>
		<td align="right">男</td>
		<td rowspan="5" ><img src="image/liyi.jpg" width="100%"></td><!--rowspan垂直方向合并-->
	</tr>
	<tr>
		<td>民族</td>
		<td>汉</td>
		<td>籍贯</td>
		<td>山东淄博</td>
		
	</tr>
	<tr>
		<td>出生年月</td>
		<td>900705</td>
		<td>政治面貌</td>
		<td>党员</td>
		
	</tr>
	<tr>
		<td>学历</td>
		<td>本科</td>
		<td>婚姻状况</td>
		<td>未婚</td>
		
	</tr>
	<tr>
		<td>专业</td>
		<td>油气储存</td>
		<td>健康状况</td>
		<td>很健康</td>
	
	</tr>
	
	<tr>
		<td bgcolor="#66FFFF">求职意向</td>
		<td colspan="4" bgcolor="#FFFF00" align="center">一切高薪的工作都是所爱的</td><!--水平方向-->
	</tr>
	<tr>
		<td>毕业院校</td>
		<td>辽宁石油化工大学</td>
		<td>qq</td>
		<td colspan="2">862581421</td>
	</tr>
	<tr>
		<td>联系电话</td>
		<td>15242747377</td>
		<td>邮箱</td>
		<td colspan="2">862581421@qq.com</td>
	</tr>
	<tr>
		<td>主修课程</td>
		<td colspan="4">阿拉伯语,油气运输,国际贸易,力资源</td>
	</tr>
	<tr height="60">
		<td>个人技能</td>
		<td colspan="4">适应力超级强,无论何时都不会放弃治疗</td>
	</tr>

</table>

<a href="ziliao/liyi.doc"><h3>下载资料</h3></a><a标签指定到文件实现下载效果>

<table border="1" cellspacing="0" width="50%">
	<caption>个人简历</caption><!--表头信息-->
	<tr height="50">
		<td>姓名</td>
		<td align="center" id="wanger">王二</td><!--align居中-->
		<td>性别</td>
		<td align="right">女</td>
		<td rowspan="5" ><img src="image/wanger.jpg" width="100%"></td><!--rowspan垂直方向合并-->
	</tr>
	<tr>
		<td>民族</td>
		<td>汉</td>
		<td>籍贯</td>
		<td>山东潍坊</td>
		
	</tr>
	<tr>
		<td>出生年月</td>
		<td>900705</td>
		<td>政治面貌</td>
		<td>党员</td>
		
	</tr>
	<tr>
		<td>学历</td>
		<td>本科</td>
		<td>婚姻状况</td>
		<td>未婚</td>
		
	</tr>
	<tr>
		<td>专业</td>
		<td>油气储存</td>
		<td>健康状况</td>
		<td>很健康</td>
	
	</tr>
	
	<tr>
		<td bgcolor="#66FFFF">求职意向</td>
		<td colspan="4" bgcolor="#FFFF00" align="center">一切高薪的工作都是所爱的</td><!--水平方向-->
	</tr>
	<tr>
		<td>毕业院校</td>
		<td>辽宁石油化工大学</td>
		<td>qq</td>
		<td colspan="2">862581421</td>
	</tr>
	<tr>
		<td>联系电话</td>
		<td>15242735477</td>
		<td>邮箱</td>
		<td colspan="2">862581421@qq.com</td>
	</tr>
	<tr>
		<td>主修课程</td>
		<td colspan="4">阿拉伯语,油气运输,国际贸易,力资源</td>
	</tr>
	<tr height="60">
		<td>个人技能</td>
		<td colspan="4">适应力超级强,无论何时都不会放弃治疗</td>
	</tr>

</table>

<a href="ziliao/wanger.doc"><h3>下载资料</h3></a>


<table border="1" cellspacing="0" width="50%">
	<caption>个人简历</caption><!--表头信息-->
	<tr height="50">
		<td>姓名</td>
		<td align="center" id="zhangsan">张三</td><!--align居中-->
		<td>性别</td>
		<td align="right">女</td>
		<td rowspan="5" ><img src="image/zhangsan.jpg" width="100%"></td><!--rowspan垂直方向合并-->
	</tr>
	<tr>
		<td>民族</td>
		<td>汉</td>
		<td>籍贯</td>
		<td>山东潍坊</td>
		
	</tr>
	<tr>
		<td>出生年月</td>
		<td>900705</td>
		<td>政治面貌</td>
		<td>党员</td>
		
	</tr>
	<tr>
		<td>学历</td>
		<td>本科</td>
		<td>婚姻状况</td>
		<td>未婚</td>
		
	</tr>
	<tr>
		<td>专业</td>
		<td>油气储存</td>
		<td>健康状况</td>
		<td>很健康</td>
	
	</tr>
	
	<tr>
		<td bgcolor="#66FFFF">求职意向</td>
		<td colspan="4" bgcolor="#FFFF00" align="center">一切高薪的工作都是所爱的</td><!--水平方向-->
	</tr>
	<tr>
		<td>毕业院校</td>
		<td>辽宁石油化工大学</td>
		<td>qq</td>
		<td colspan="2">862581421</td>
	</tr>
	<tr>
		<td>联系电话</td>
		<td>15242735477</td>
		<td>邮箱</td>
		<td colspan="2">862581421@qq.com</td>
	</tr>
	<tr>
		<td>主修课程</td>
		<td colspan="4">阿拉伯语,油气运输,国际贸易,力资源</td>
	</tr>
	<tr height="60">
		<td>个人技能</td>
		<td colspan="4">适应力超级强</td>
	</tr>

</table>
<a href="ziliao/zhangsan.doc"><h3>下载资料</h3></a>
<table border="1" cellspacing="0" width="50%">
	<caption>个人简历</caption><!--表头信息-->
	<tr height="50">
		<td>姓名</td>
		<td align="center" id="dasi">大四</td><!--align居中-->
		<td>性别</td>
		<td align="right">男</td>
		<td rowspan="5" ><img src="image/dasi.jpg" width="100%"></td><!--rowspan垂直方向合并-->
	</tr>
	<tr>
		<td>民族</td>
		<td>汉</td>
		<td>籍贯</td>
		<td>山东潍坊</td>
		
	</tr>
	<tr>
		<td>出生年月</td>
		<td>900705</td>
		<td>政治面貌</td>
		<td>党员</td>
		
	</tr>
	<tr>
		<td>学历</td>
		<td>本科</td>
		<td>婚姻状况</td>
		<td>未婚</td>
		
	</tr>
	<tr>
		<td>专业</td>
		<td>油气储存</td>
		<td>健康状况</td>
		<td>很健康</td>
	
	</tr>
	
	<tr>
		<td bgcolor="#66FFFF">求职意向</td>
		<td colspan="4" bgcolor="#FFFF00" align="center">一切高薪的工作都是所爱的</td><!--水平方向-->
	</tr>
	<tr>
		<td>毕业院校</td>
		<td>辽宁石油化工大学</td>
		<td>qq</td>
		<td colspan="2">862581421</td>
	</tr>
	<tr>
		<td>联系电话</td>
		<td>15242735477</td>
		<td>邮箱</td>
		<td colspan="2">862581421@qq.com</td>
	</tr>
	<tr>
		<td>主修课程</td>
		<td colspan="4">阿拉伯语,油气运输,国际贸易,力资源</td>
	</tr>
	<tr height="60">
		<td>个人技能</td>
		<td colspan="4">适应力超级强</td>
	</tr>

</table>

<a href="ziliao/dasi.doc"><h3>下载资料</h3></a>


</center>
</body>

  注册页面,同样用table

<center>
<form action="xinxibiao.html" method="post">
<table   border="0" cellpadding="2" cellspacing="2" width="60%">
	<tr>
		<td><h4>注册新用户</h4></td>
		<td> </td>
	</tr>
	<tr>
		<td></td>
		<td rowspan="7"><img src="image/zhuce.jpg" /></td>
	</tr>
	<tr>
		<td >邮     箱<input type="text" name="" value="" /></td>
	</tr>
	<tr>
		<td>手机号码 <input type="text" name="" value="" /></td>
	</tr>
	<tr>
		<td>登入账号 <input type="text" name="" value="" /></td>
	</tr>
	<tr>
		<td>显示名称 <input type="text" name="" value="" /></td>
	</tr>
	<tr>
		<td>密     码<input type="password" name="" value="" /></td>
	</tr>
	<tr>
		<td>确认密码 <input type="password" name="" value="" /></td>
	</tr>
	<tr height="50"></tr>
	<tr>
		<td >                              <input type="submit" name="" value="注册" /></td>
	</tr>
	<tr>
		<td colspan="2" >*点击 “注册” 按钮,即表示您同意并愿意遵守 用户协议。 </td>
	</tr>
</table>
</form>
</center>

  

 

posted @ 2017-09-22 22:20  沃泽法克  阅读(8238)  评论(1)    收藏  举报