要求
页面登录页面:博客园登入
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>