登录注册页面和页面跳转
要求
页面登录页面:博客园登入
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>

浙公网安备 33010602011771号